Design a simple counter using HTML CSS and JavaScript
A simple counter is a numeric display that increments or decrements based on user interaction. To design one using HTML, CSS, and JavaScript, create a display area and buttons. Use JavaScript to increment or decrement the counter value and update the display accordingly.
Here is the Sample Image of the counter that we are going to make:
Preview Image
Before we start coding, let’s take a moment to understand the basic concepts behind a counter application. A counter is essentially a variable that keeps track of a numerical value. In JavaScript, we can create a variable using the ‘var’, ‘let’, or ‘const’ keywords. We will be using the ‘let’ keyword to create our counter variable, which can be incremented or decremented based on user actions. We will be also creating a button that will reset the counter.
Now, let’s get started with the coding part. We will be building a simple counter application that can be incremented, decremented, or can be reset using three different buttons. Here is the HTML code that we will be using:
Example:
HTML Code: File name – index.html
<!DOCTYPE html>
<html>
<head>
<title>Counter App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Counter App</h1>
<div class="counter">
<button id="increment-btn">+</button>
<div id="counter-value">0</div>
<button id="decrement-btn">-</button>
</div>
<button id="reset">Reset</button>
</div>
<script src="counter.js"></script>
</body>
</html>
We have created a basic HTML structure with a heading and a div element containing two buttons and a div element that will display the counter value. We have also created a button for resetting the counter. We have also included a reference to our JavaScript file, ‘counter.js’, using the ‘script’ tag.
Let’s style our counter app using CSS:
CSS Code: File name – style.css
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
margin: 30px;
}
.counter {
width: 30%;
display: flex;
justify-content: center;
}
#increment-btn,
#decrement-btn,
#reset {
height: 50px;
width: 120px;
padding: 0 40px;
border-radius: 10px;
font-size: 40px;
background-color: #2e8d46;
border: 2px solid #2e8d46;
color: white;
margin: 20px;
}
#reset {
font-size: 20px;
}
#counter-value {
height: 50px;
min-width: 120px;
border-radius: 10px;
background-color: rgba(255, 0, 0, 0.187);
margin-top: 20px;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
Now, let’s move on to the JavaScript code. Here is the code that we will be using:
JavaScript Code: File name – counter.js
let counter = 0;
const counterValue = document.getElementById('counter-value');
const incrementBtn = document.getElementById('increment-btn');
const decrementBtn = document.getElementById('decrement-btn');
const resetBtn = document.querySelector('#reset');
// To increment the value of counter
incrementBtn.addEventListener('click', () => {
counter++;
counterValue.innerHTML = counter;
});
// To decrement the value of counter
decrementBtn.addEventListener('click', () => {
counter--;
counterValue.innerHTML = counter;
});
// To reset the counter to zero
resetBtn.addEventListener('click', reset);
function reset() {
counter = 0;
counterValue.innerHTML = counter;
}
First, we have declared a ‘counter’ variable with an initial value of 0. We have also created four constants using the ‘const’ keyword to reference the HTML elements that we will be interacting with.
Next, we’ve added what are called event listeners to three buttons: ‘increment’, ‘decrement’, and ‘reset’.
When you click the ‘increment’ button, it adds 1 to the counter and shows the new number on the page.
When you click the ‘decrement’ button, it takes away 1 from the counter and shows the updated number.
And if you click the ‘reset’ button, it just sets the number back to zero.
Output:
simple counter Example Output
So, to sum it up, counters are handy things on websites, and making one with JavaScript is pretty straightforward. With the code we’ve talked about in this article, you can get started on your own counter in no time. Just grasp the basics and use the code we’ve given you here.