Design a simple counter using HTML CSS and JavaScript
Last Updated :
16 Aug, 2023
Counters are a simple yet important feature that can be found in various web applications, including e-commerce sites, social media platforms, and online games. Counters can be used to track the number of likes, shares, or clicks, or to display the number of any item. In this article, we will explore how to build a counter application with JavaScript.
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
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
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
Javascript
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');
incrementBtn.addEventListener('click', () => {
counter++;
counterValue.innerHTML = counter;
});
decrementBtn.addEventListener('click', () => {
counter--;
counterValue.innerHTML = counter;
});
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 have added event listeners to both the ‘incrementBtn’, ‘decrementBtn’, and ‘resetBtn’ constants. The event listener function for the ‘incrementBtn’ will increment the ‘counter’ variable by 1 and update the innerHTML of the ‘counterValue’ span element to display the updated value. The event listener function for the ‘decrementBtn’ will decrement the ‘counter’ variable by 1 and update the innerHTML of the ‘counterValue’ span element to display the updated value. Similarly, the ‘resetBtn’ will just set the value to zero, when clicked.
Output:
In conclusion, counters are a useful feature in many web applications, and with JavaScript, building a counter application has never been easier. By understanding the basic concepts behind a counter and using the code provided in this article.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...