I have a square element with a click event that increases its size by 50 pixels on each click. However, once it reaches a size of 400 pixels, the size decreases by 50 pixels with every click instead.
Additionally, when the size of the square reaches 100 pixels, it starts to grow again in the same pattern.
This results in the square's size progressing like this: 100, 150, 200, 250, 300, 350, 400, 350, 300, 250, 200, 150, 100, 150, 200...
Thank you to all who can provide assistance with this task.
Below is the code snippet:
<div class="square" onclick="onSquareClick()">
function onSquareClick() {
var squareSize = 100;
var sizeStep = 50;
var square = document.querySelector('.square');
squareSize = squareSize + sizeStep;
if (squareSize >= 400) {
squareSize = squareSize - sizeStep;
}
square.innerText = squareSize;
square.style.width = squareSize + 'px';
square.style.height = squareSize + 'px';
}