JavaScript Notes

Build a JavaScript Counter Application - Step by Step Project Tutorial

Learn to build a counter app in JavaScript with increment, decrement, reset, min/max limits, and localStorage persistence. Great first JavaScript DOM project.

What You'll Learn

How to store and display a single piece of state (the count)
How to increment, decrement, and reset a value
How to enforce min/max limits on state changes
How to change styles dynamically based on state (color for positive/negative)
How to persist state across page reloads with localStorage

Project Overview

A counter is one of the best first projects because it isolates the essential pattern of every JavaScript app: state → event → update state → render. Once you understand this pattern in a counter, you can apply it to any project.

Component Structure

Counter Application - Architecture Diagram

How It Works — Flow Diagram

Step-by-Step Build

Step 1 — HTML Structure

html example

<div class="counter-card">
  <h1 class="counter-title">Counter</h1>
  <div id="countDisplay" class="count-display">0</div>
  <div class="controls">
    <button id="decrementBtn" class="btn btn-decrement">−</button>
    <button id="resetBtn"     class="btn btn-reset">Reset</button>
    <button id="incrementBtn" class="btn btn-increment">+</button>
  </div>
  <div class="step-controls">
    <span>Step:</span>
    <button class="step-btn active" data-step="1">1</button>
    <button class="step-btn" data-step="5">5</button>
    <button class="step-btn" data-step="10">10</button>
  </div>
</div>

Step 2 — State & Configuration

Example

const CONFIG = { min: -50, max: 100, defaultStep: 1 }; let count = parseInt(localStorage.getItem("count")) || 0; let step = CONFIG.defaultStep;

Step 3 — DOM References

js example

const countDisplay  = document.getElementById("countDisplay");
const incrementBtn  = document.getElementById("incrementBtn");
const decrementBtn  = document.getElementById("decrementBtn");
const resetBtn      = document.getElementById("resetBtn");
const stepBtns      = document.querySelectorAll(".step-btn");

Step 4 — Update Display (Render Function)

js example

function updateDisplay() {
  // update number
  countDisplay.textContent = count;

  // visual color feedback
  countDisplay.className = "count-display";
  if (count > 0) countDisplay.classList.add("positive");
  if (count < 0) countDisplay.classList.add("negative");

  // disable buttons at limits
  decrementBtn.disabled = count <= CONFIG.min;
  incrementBtn.disabled = count >= CONFIG.max;

  // persist
  localStorage.setItem("count", count);
}

Step 5 — Event Handlers

Example

incrementBtn.addEventListener("click", () => { if (count + step > CONFIG.max) count = CONFIG.max; else count += step; updateDisplay(); }); decrementBtn.addEventListener("click", () => { if (count - step < CONFIG.min) count = CONFIG.min; else count -= step; updateDisplay(); }); resetBtn.addEventListener("click", () => { count = 0; updateDisplay(); });

Step 6 — Step Size Selector

Example

stepBtns.forEach(btn => { btn.addEventListener("click", () => { step = parseInt(btn.dataset.step); stepBtns.forEach(b => b.classList.remove("active")); btn.classList.add("active"); }); });

Step 7 — Initialize on Load

js example

updateDisplay(); // render persisted value immediately

Console Output

Output

// Initial load — localStorage had count = 7
count = 7
updateDisplay() → countDisplay.textContent = "7", class "positive" added
decrementBtn.disabled = false, incrementBtn.disabled = false

// User clicks "+" with step = 5
count = 12
updateDisplay() → countDisplay.textContent = "12"

// User clicks "+" repeatedly until max
count = 100
incrementBtn.disabled = true   // can't go higher

// User clicks "Reset"
count = 0
localStorage.setItem("count", "0")

Final Output — What It Looks Like

Edge Cases to Handle

Situation	Expected Behavior
Count reaches MAX	Increment button disabled
Count reaches MIN	Decrement button disabled
Step would overshoot	Clamp to min/max exactly
Page refresh	Restore count from localStorage
Count equals 0	Neither positive nor negative class applied

Challenge Yourself

Multiple independent counters — render 3 counters on the same page, each with its own state
Undo/redo history — store each count in an array, allow undo with Ctrl+Z
Animated count — animate the number rolling up/down instead of jumping
Custom min/max form — let the user type in the min and max values
Export count — add a button that copies the current count to clipboard

Best Practices

Always derive display from state, never update the DOM and forget to update state
Use disabled attribute to prevent invalid actions instead of just ignoring clicks
Clamp values explicitly rather than relying on sequential increments
Persist state with localStorage so refreshing the page doesn't wipe progress
Extract the render logic into a single updateDisplay() function called from all handlers

Continue the lesson path

Study next in this module

4 connected lessons

01Mini ProjectsBuild a JavaScript Image Carousel - Step by Step Project TutorialLearn to build an auto-playing image carousel in JavaScript with prev/next buttons, dot indicators, touch swipe support, and smooth CSS transitions.02Mini ProjectsBuild a JavaScript Digital Clock - Step by Step Project TutorialLearn to build a live digital clock in JavaScript using Date object, setInterval, 12/24-hour toggle, AM/PM display, and smooth CSS styling.03Mini ProjectsBuild a JavaScript Calculator - Step by Step Project TutorialLearn to build a fully functional calculator in JavaScript with operator logic, decimal support, keyboard input, and clean UI. Perfect beginner project.04Mini ProjectsBuild a Dynamic Resume Builder in JavaScript - Step by Step TutorialLearn to build an interactive resume builder in JavaScript that generates a live HTML preview as you fill out form fields, with print and PDF export support.

PreviousBuild a JavaScript Image Carousel - Step by Step Project Tutorial NextBuild a JavaScript Digital Clock - Step by Step Project Tutorial