Build a JS Counter App Beginner DOM Mini Project

A JavaScript counter app is a small page with a number on screen and two buttons that increase or decrease it. It is one of the first real projects beginners build because it uses the exact pattern behind most interactive websites: select an element, listen for a click, then update the page.

You will build a page with a count display, an increment button, and a decrement button. By the end, clicking a button will update the number instantly, without reloading the page.

What You Will Build

The finished app is three pieces of HTML and about ten lines of JavaScript. Here is the behavior you are aiming for:

• The page shows a number, starting at zero.
• Clicking the plus button increases the number by one.
• Clicking the minus button decreases the number by one.
• The count never goes below zero, no matter how many times you click minus.

This is a small project, but it covers the same three ideas that almost every interactive web page relies on: finding elements on the page, reacting to user input, and keeping the visible page in sync with a value your code is tracking.

Every click follows the same four steps: the browser fires an event, your handler function runs, a variable changes, and the page text updates to match. This loop is the core idea behind the whole project, and you will build it piece by piece below.

Step 1: Build the HTML

Start with a small page that has a number display and two buttons.

html

<div class="counter">
  <button id="decrement">-</button>
  <span id="count">0</span>
  <button id="increment">+</button>
</div>

Each element carries an id attribute so JavaScript can find it later. The middle element holds the number, and the two buttons on either side will trigger the increase and decrease actions once the script is wired up.

Step 2: Select the Elements

The next step is grabbing each of these three elements from JavaScript and storing a reference to them in a variable.

javascript

const countDisplay = document.getElementById("count");
const incrementButton = document.getElementById("increment");
const decrementButton = document.getElementById("decrement");
 
let count = 0;

The first three lines point to the number display and the two buttons. The last line adds a separate variable that holds the real count as a number, kept apart from whatever text happens to be on the page. Storing the value here, rather than reading it back out of the page later, is what keeps the app reliable as it grows. You can see a related selection approach in how to use querySelector and querySelectorAll.

Step 3: Handle the Button Clicks

With the elements selected, attach a click handler to each button that updates the count and reflects it on the page.

javascript

incrementButton.addEventListener("click", () => {
  count += 1;
  countDisplay.textContent = count;
});
 
decrementButton.addEventListener("click", () => {
  if (count > 0) {
    count -= 1;
    countDisplay.textContent = count;
  }
});

The first handler adds one to the count every time someone clicks the plus button, then writes the new value onto the page. The second handler does the same in reverse, but only runs the subtraction when the count is still above zero.

That single check is what stops the number from ever going negative. For more detail on wiring up clicks like this, see handling click events in JavaScript.

Why the Count Lives in a Variable, Not Just the Page

A common beginner approach skips the separate variable entirely and reads the number straight out of the page text on every click.

javascript

incrementButton.addEventListener("click", () => {
  const current = Number(countDisplay.textContent);
  countDisplay.textContent = current + 1;
});

This version works, but it converts text back into a number on every single click. Page text is always a string, so a missed conversion anywhere in the code causes the app to silently start concatenating text instead of adding numbers.

Keeping the count as a real number in its own variable avoids that entire category of bug. The page is only ever used to display the value, never to store it.

Common Mistakes

Next Step

You now have the core pattern for interactive JavaScript: select, listen, update. The same structure scales up to bigger projects, like a JavaScript todo list app or a JavaScript calculator, where you track more state and respond to more kinds of input.