Sizing-an-Image/Sizing an Image.js at main · MERN-Stackers/Sizing-an-Image · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
let imageWidthElement = document.getElementById("imageWidth");
let imageElement = document.getElementById("image");
let warningMessageElement = document.getElementById("warningMessage");

let maxWidth = 300;
let minWidth = 100;
let originalWidth = 200;

let maxWarningMessage = "Too big, Decrease the image";
let minWarningMessage = "Not visible, Increase the image";

imageElement.style.width = originalWidth + "px";
imageWidthElement.textContent = originalWidth + "px";

function onIncrement(){
    if (originalWidth >= maxWidth){
        warningMessageElement.textContent = maxWarningMessage;
    }else{
        originalWidth = originalWidth + 5;
        let updatedImageWidth = originalWidth + "px";

        warningMessageElement.textContent = "";
        imageElement.style.width = updatedImageWidth;
        imageWidthElement.textContent = updatedImageWidth;
        }
}

function onDecrement(){
    if (originalWidth <= minWidth){
        warningMessageElement.textContent = minWarningMessage;
    }else{
        originalWidth = originalWidth - 5;
        let updatedImageWidth = originalWidth + "px";

        warningMessageElement.textContent = "";
        imageElement.style.width = updatedImageWidth;
        imageWidthElement.textContent = updatedImageWidth;
        }
}