body { background-color: orange; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .counter { border: 1px solid white; border-radius: 0.5rem; padding: 2rem; text-align: center; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); background-color: #f7f7f7; } .counter__display { font-size: 4rem; font-weight: bold; color: black; margin-bottom: 1.5rem; } .buttonGroup { display: flex; gap: 1rem; } .button { cursor: pointer; border: none; background: none; font-size: 1.5rem; padding: 0.5rem; border-radius: 0.5rem; transition: background 0.3s; } .button:active { transform: scale(0.9); } .button:hover { background-color: lightgray; } Js // https://www.webdong.dev/post/build-a-counter-using-javascript/ let counter = 0; const counterDisplay = document.getElementById("counterDisplay"); const counterAddButton = document.getElementById("add"); const counterResetButton = document.getElementById("reset"); const counterMinusButton = document.getElementById("minus"); const counterButtons = document.getElementById("buttonGroup"); counterButtons.addEventListener("click", (e) => { if (e.target.id === "add") { addCounter(); } else if (e.target.id === "reset") { resetCounter(); } else if (e.target.id === "minus") { subtractCounter(); } }); function renderCounter() { counterDisplay.textContent = counter; } function addCounter() { counter++; renderCounter(counter); } function resetCounter() { counter = 0; renderCounter(counter); } function subtractCounter() { counter--; renderCounter(counter); } renderCounter(counter);