Counter App – Mini-Projects for Intermediate Learners

The Counter App is a simple project that demonstrates event handling and UI updates using plain JavaScript. No Node.js, npm, or frameworks are required.

Introduction

This app displays a counter on the screen. When you click buttons, the counter value updates instantly. It helps you understand how JavaScript interacts with HTML elements.

Project Setup

You only need:

A browser (Chrome, Edge, etc.)
A code editor (VS Code recommended)

No installation or dependencies required.

Code Implementation

📁 index.html

<!DOCTYPE html>
<html>
<head>
  <title>Simple Counter App</title>
  <style>
    body {
      font-family: Arial;
      text-align: center;
      margin-top: 50px;
    }

    h1 {
      font-size: 40px;
    }

    button {
      padding: 10px 20px;
      margin: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1 id="count">0</h1>

  <button id="incrementButton">Increment</button>
  <button id="decrementButton">Decrement</button>
  <button id="resetButton">Reset</button>

  <script src="script.js"></script>

</body>
</html>

📁 script.js

let count = 0;

// Select elements
const countDisplay = document.getElementById("count");
const incrementBtn = document.getElementById("incrementButton");
const decrementBtn = document.getElementById("decrementButton");
const resetBtn = document.getElementById("resetButton");

// Update UI
function updateDisplay() {
  countDisplay.textContent = count;
}

// Increment
incrementBtn.addEventListener("click", function () {
  count++;
  updateDisplay();
});

// Decrement
decrementBtn.addEventListener("click", function () {
  count--;
  updateDisplay();
});

// Reset
resetBtn.addEventListener("click", function () {
  count = 0;
  updateDisplay();
});

// Initial display
updateDisplay();

Running the Project

Create a folder Add index.html and script.js Open index.html in your browser

Summary

This tutorial has provided a basic introduction to the Counter App using JavaScript. By understanding event handling, array manipulation, and UI updates, you've gained a foundational understanding of how to build interactive web applications. Remember to practice and experiment with different techniques to further expand your JavaScript skills.

Counter App