JavaScript - 20

JavaScript - 20: Mini Project - Simple Counter

Build a simple counter with Increase, Decrease, and Reset buttons.

This project combines variables, DOM selection, and click events.

Your challenge: Make each button update the counter and display the new value on the page.

How the counter works

The variable count stores the current number: let count = 0;

Because the value changes, let is the right choice.

Select the page elements

Use document.getElementById() to select the display and the three buttons.

For example: const countDisplay = document.getElementById("count");

Increase and decrease

Inside the Increase button's click event: count++; adds one.

Inside the Decrease button's click event: count--; subtracts one.

After changing the value, update the page with: countDisplay.textContent = count;

Reset the counter

The Reset button sets: count = 0;

Then the display is updated again.

Try it: Click Increase several times, then Decrease, then Reset.

Notice that the JavaScript variable stores the current value while textContent keeps the visible number in sync.

Small experiment: Change count++ to count = count + 5. Now the Increase button adds five each time.

Good JavaScript habit: Change the variable first, then update the page from that value. This keeps the counter's data and display easy to follow.

let count = 0;

const countDisplay = document.getElementById("count");
const increaseBtn = document.getElementById("increase");
const decreaseBtn = document.getElementById("decrease");
const resetBtn = document.getElementById("reset");

increaseBtn.addEventListener("click", () => {
  count++;
  countDisplay.textContent = count;
});

decreaseBtn.addEventListener("click", () => {
  count--;
  countDisplay.textContent = count;
});

resetBtn.addEventListener("click", () => {
  count = 0;
  countDisplay.textContent = count;
});