Counter Project in JavaScript
By Mohit GoswamiIn this tutorial, we are going to do a JavaScript counter project in which we will show a value on the custom HTML page and this value will increase by 1 when we click on the + button and decrease by 1 when we click on the – button.
Creating a Basic Template of HTML and CSS
In this, we created three files home.html, style.css, and index.js. In home.html we have a basic layout web page with heading “Counter Project” with three buttons for increment(+), decrement(-), a number which is displayed.
We have added the link to the Bootstrap CDN, script index.js, and styles.css.
The buttons have a unique ID so that we can access these elements directly using DOM model in the index.js file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<title>Document</title>
</head>
<body>
<h1>Counter Project</h1>
<div class="container mainBox">
<button id="increment" type="button" class="btn btn-light">
+
</button>
<button id="number" type="button" class="btn btn-light text-center">
0
</button>
<button id="decrement" type="button" class="btn btn-light">
-
</button>
</div>
<script src="index.js"></script>
</body>
</html>
Now moving to styles.css, we have basic styles so that button looks nice inside the container div.
body {
background-color: rgb(71, 69, 69);
}
.mainBox {
height: 150px;
width: 500px;
margin: auto;
margin-top: 50px;
background-color: rgb(101, 101, 182);
}
h1 {
text-align: center;
}
#number {
height: 50px;
width: 250px;
margin-top: 40px;
border: 1px solid black;
text-align: center;
background-color: white;
}
#increment {
height: 30px;
width: 100px;
margin-top: 50px;
margin-left: 225px;
margin-right: 100px;
}
#decrement {
height: 30px;
width: 100px;
margin-top: 50px;
margin-left: 100px;
margin-right: 225px;
}Till this step, we have built the basic front end of the web page and now it is time to move to the backend of how the counter works.
Counter Functionality Implementation
We have to get the button with id “number” and increment its value. For getting the elements we use the DOM model.
let add = document.getElementById("increment");
let sub = document.getElementById("decrement");
let no = document.getElementById("number");
Then a temporary variable named counter is used to keep the count ready and when we click the increment or decrement button it gets updated first and then sets the counter value to id = “number” button.
let count = 0;
Now time to implement on button click functionality using the event listeners in JavaScript.
add.onclick = function() {
count += 1;
no.innerHTML = count;
};
sub.onclick = function() {
count -= 1;
no.innerHTML = count;
};Now Its time to run the project.
Note: Every time we refresh the page, the counter will get reset to 0 because it is stored in current runtime memory and not in storage.
Thanks. If any doubts please reply to this thread.
Why you don’t use the count inside a function
If we declare count inside the function the it will not be global. We need to maintain a global parameter to see the effective changes.
Can you explain what is no.innerHtml…?
I’m absolutely a beginner.
using innerHTML in js you can add any element in HTML like div,p,h and many more.