Day 01: Button Counter
Build a counter with increment, decrement, and reset buttons.
JavaScript focus
- querySelector
- addEventListener
- updating text with textContent
- simple state variable
- conditional class changes for positive/negative/zero
Nice extras
- disable decrement at zero
- change label color based on value
- add step buttons like +5
MDN prep
Counter
Current Count: 0
The HTML
<div class="counter_card">
<p class="counter_label">Current Count: <span id="counter-value">0</span></p>
<div class="button_row">
<button type="button" class="button" id="decrement">
<span class="sr-only">Decrease</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 256H112"/></svg>
</button>
<button type="button" class="button button_outline" id="reset">Reset</button>
<button type="button" class="button" id="increment">
<span class="sr-only">Increase</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288M400 256H112"/></svg>
</button>
</div>
</div>
The JavaScript
function initCounter() {
const increment = document.getElementById("increment");
const decrement = document.getElementById("decrement");
const reset = document.getElementById("reset");
const label = document.querySelector(".counter_label");
const counter = document.getElementById("counter-value");
if (!increment || !decrement || !reset || !label || !counter) return;
let count = 0;
decrement.setAttribute("disabled", "");
function disabled() {
if (count === 0) {
decrement.setAttribute("disabled", "");
} else {
decrement.removeAttribute("disabled", "");
}
}
function changeColor() {
if (count === 0) {
label.classList.remove("black");
} else if (count === 5) {
label.classList.add("black");
} else if (count === 10) {
label.classList.remove("black");
} else if (count === 15) {
label.classList.add("black");
} else {
label.classList.remove("black");
}
}
increment.addEventListener("click", () => {
count = count + 5;
counter.textContent = count;
disabled();
changeColor();
});
decrement.addEventListener("click", () => {
if (count > 0) {
count = count - 5;
counter.textContent = count;
}
disabled();
changeColor();
});
reset.addEventListener("click", () => {
count = 0;
counter.textContent = count;
disabled();
changeColor();
});
}
initCounter();