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
Simple Counter App UsingTypeScriptCounter App - HTML and CSS Setup
Below is the combined HTML and CSS code that structures and styles the counter app
HTML
<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
- A container div holds the counter display and buttons for incrementing, decrementing, and resetting.
- CSS Styling
- Ensures a clean, centered layout with visually distinct buttons for each action.
- 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.
JavaScript
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
<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>
Similar Reads
Create a Single Page Application using HTML CSS & JavaScript In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more in
4 min read
Typing Speed Detector App Using Typescript Typing speed has been a very important test for Engineers as a faster typing skill leads to faster code so, To test this speed we are building a typing speed detector.What We’re Going to CreateAn Input Box for Typing Our Text.A Time Element to show the time.An Element to show Words per minute.A star
5 min read
How to execute TypeScript file using command line? TypeScript is a statically-typed superset of JavaScript that adds optional type annotations and compiles to plain JavaScript. It helps catch errors during development. To execute a TypeScript file from the command line, compile it using tsc filename.ts, then run the output JavaScript file with node.
2 min read
Calculator App Using TypeScript A calculator app is a perfect project for practising TypeScript along with HTML and CSS. This app will have basic functionalities like addition, subtraction, multiplication, and division. It provides a clean and interactive interface for the user while using TypeScript to handle logic safely and eff
6 min read
Quiz App Using Typescript A quiz app built with TypeScript provides an interactive way to test knowledge while using TypeScript’s strong typing for better code quality. By implementing features like multiple-choice questions, score tracking, and timers, we can create a robust and engaging quiz experience for users.What We’re
7 min read
Task Management App Using TypeScript Task management apps help users organize their daily activities effectively. In this article, we will create a simple task management app that allows users to add and delete tasks. We’ll use HTML for structure, CSS for styling, and TypeScript for functionality to make it robust and type-safe.What We
7 min read
Pixel Art Maker Using Typescript A Pixel Art Maker lets users create art by colouring squares on a grid, like retro pixel graphics. This project uses TypeScript and DOM manipulation for a fun and creative experience.What We’re Going to CreateWe are going to create a pixel Art maker with the following components.A grid with size * s
5 min read
Design Background color changer using HTML CSS and JavaScript Background color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive.File stru
3 min read
How To Build Notes App Using Html CSS JavaScript ? In this article, we are going to learn how to make a Notes App using HTML, CSS, and JavaScript. This project will help you improve your practical knowledge in HTML, CSS, and JavaScript. In this notes app, we can save the notes as titles and descriptions in the local storage, so the notes will stay t
4 min read
Task Scheduler Using HTML, CSS and JS In this article, we will create a Task Scheduler web application using HTML, CSS and JavaScript. This is an application which can store tasks provided by user and classified them as low priority, middle priority, and high priority. User also can provide a deadline for the task. User also can mark do
3 min read