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);