Simple Counter App Using HTML CSS and TypeScript

Last Updated : 22 Jan, 2025

A simple counter app is a great project for learning how to integrate HTML, CSS, and TypeScript. The app will allow users to increment, decrement, and reset the counter value, demonstrating essential DOM manipulation and event handling in TypeScript.

What We’re Going to Create

We’ll build a counter app with the following features:

Increment the counter value.
Decrement the counter value (but not below zero).
Reset the counter to zero.

Project Preview

Counter App - HTML and CSS Setup

Below is the combined HTML and CSS code that structures and styles the counter app

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h1 {
            margin-bottom: 20px;
        }
        .counter {
            font-size: 3rem;
            margin: 20px 0;
        }
        .buttons button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 1rem;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            transition: background 0.3s;
        }
        #increment {
            background: #4caf50;
            color: white;
        }
        #decrement {
            background: #f44336;
            color: white;
        }
        #reset {
            background: #2196f3;
            color: white;
        }
        .buttons button:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Counter App</h1>
        <div id="counter" class="counter">0</div>
        <div class="buttons">
            <button id="increment">Increment</button>
            <button id="decrement">Decrement</button>
            <button id="reset">Reset</button>
        </div>
    </div>
    <script>
        var counter = document.getElementById('counter');
        var incrementBtn = document.getElementById('increment');
        var decrementBtn = document.getElementById('decrement');
        var resetBtn = document.getElementById('reset');
        var count = 0;

        function updateCounter() {
            counter.textContent = count.toString();
        }
        incrementBtn.addEventListener('click', function () {
            count++;
            updateCounter();
        });
        decrementBtn.addEventListener('click', function () {
            if (count > 0) {
                count--;
                updateCounter();
            }
        });
        resetBtn.addEventListener('click', function () {
            count = 0;
            updateCounter();
        });
    </script>
</body>
</html>

Explanation of the Code

HTML Structure
1. A container div holds the counter display and buttons for incrementing, decrementing, and resetting.
CSS Styling
1. Ensures a clean, centered layout with visually distinct buttons for each action.
2. Includes hover effects for an enhanced user experience.

Counter App – TypeScript Logic

The TypeScript code handles the counter's functionality, including updating the counter value and managing button clicks.

const counter = document.getElementById('counter') as HTMLDivElement;
const incrementBtn = document.getElementById('increment') as HTMLButtonElement;
const decrementBtn = document.getElementById('decrement') as HTMLButtonElement;
const resetBtn = document.getElementById('reset') as HTMLButtonElement;

let count = 0;

function updateCounter() {
    counter.textContent = count.toString();
}
incrementBtn.addEventListener('click', () => {
    count++;
    updateCounter();
});
decrementBtn.addEventListener('click', () => {
    if (count > 0) {
        count--; 
        updateCounter();
    }
});
resetBtn.addEventListener('click', () => {
    count = 0;
    updateCounter();
});

In this example

Selects HTML elements for the counter and buttons.
Initializes the counter value (count) to 0.
Defines a function (updateCounter()) to update the displayed count.
Adds event listeners to buttons:
- Increment button increases the counter by 1.
- Decrement button decreases the counter by 1.
- Reset button sets the counter back to 0.
Uses TypeScript type casting for type safety.

Convert to JavaScript File

Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command-

npx tsc task.ts
tsc task.ts

The command tsc task.ts compiles the calculator.ts TypeScript file into a task.js JavaScript file.
It places the output in the same directory as the input file by default.

Complete Code

<html>
<head>
  <style>
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-bottom: 20px;
}

.counter {
    font-size: 3rem;
    margin: 20px 0;
}

.buttons button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition: background 0.3s;
}

#increment {
    background: #4caf50;
    color: white;
}

#decrement {
    background: #f44336;
    color: white;
}

#reset {
    background: #2196f3;
    color: white;
}

.buttons button:hover {
    opacity: 0.8;
}
  </style>
</head>

<body>
    <div class="container">
        <h1>Counter App </h1>
        < div id="counter" class="counter"> 0
    </div>
    < div class="buttons">
        <button id="increment"> Increment </button>
        < button id="decrement"> Decrement </button>
            < button id="reset"> Reset </button>
                </div>
                </div>
                
    <script>
// Select elements from the DOM
var counter = document.getElementById('counter');
var incrementBtn = document.getElementById('increment');
var decrementBtn = document.getElementById('decrement');
var resetBtn = document.getElementById('reset');
// Initialize counter value
var count = 0;
// Update counter display
function updateCounter() {
    counter.textContent = count.toString();
}
// Increment button event listener
incrementBtn.addEventListener('click', function () {
    count++;
    updateCounter();
});
// Decrement button event listener
decrementBtn.addEventListener('click', function () {
    if (count > 0) {
        count--; // Only decrement if count is greater than 0
        updateCounter();
    }
});
// Reset button event listener
resetBtn.addEventListener('click', function () {
    count = 0;
    updateCounter();
});
    

  </script>
</body>

</html>