Hello Coders, In this article we are going to build this Counter App JavaScript project. This is going to be for complete beginners who want to practice their JavaScript skills. You can follow along with this article to build this project.
Below I have provided both step by step article guide as well as a complete video tutorial for you. And you can also download entire source code of this project by clicking on the download button at the bottom of this article.
Counter App using JavaScript | Video Tutorial
In the above video I have explained each and everything. If you are having trouble understanding this article and if you are a complete beginner, then this video is for you.
Simple Counter App Using JavaScript | Step by Step Article Guide with Source Code
Project Setup :
First lets set up our project. Create three files. index.html, styles.css, script.js. Lets generate boiler plate our html plate first. Then, I will be using two Icons from the font awesome. So, first lets import the cdn link for it.
Importing Font Awesome : Go to cdnjs.com and search for font awesome. Copy the cdn link and paste it inside our html file.
Importing Custom Font from the google fonts : Go to fonts.google.com. Search for “Poppins” and Import the following weights : 100, 200, 300, 400, 500, 600, 700, 800, 900.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter App</title>
<!-- fontawesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;900&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.2s linear;
border: none;
outline: none;
}
Adding HTML & CSS :Â
For any app we build we are gonna need frontend for it. Frontend is something which the user sees with his eyes. So we need to design our app first and then we will move to JavaScript to add functionality to our app.
index.html
<div class="container">
<div class="counter">
<p id="count">0</p>
<div class="buttons">
<button id="sub"><i class="fas fa-minus"></i></button>
<button id="reset">Reset</button>
<button id="add"><i class="fas fa-add"></i></button>
</div>
</div>
</div>
styles.css
body {
background-color: #eee;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.counter {
background-color: #fff;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.counter p {
text-align: center;
font-size: 10rem;
font-weight: 300;
line-height: 1;
}
.counter .buttons {
text-align: center;
margin-top: 2rem;
}
.counter .buttons button {
font-size: 1.5rem;
padding: 0.5rem 1rem;
margin: 0.5rem;
cursor: pointer;
}
.counter .buttons button#sub {
background-color: orangered;
color: #fff;
}
.counter .buttons button#add {
background-color: green;
color: #fff;
}
Adding JavaScript :
First we need to get access to the DOM elements which we need. We will need the count element for which we have already given and id of “count”. We will also get access to add, sub, reset buttons. Then we will add click event listeners for each of those buttons. For the add button, we will Increment the count value. For the sub button, We will decrement the count value. For the reset button, we will reset the count value to zero.
We are also going to add color green when the count value is in positive. Red color if the count value is in negative. Refer the code below.
script.js
const count = document.getElementById('count');
const add = document.getElementById('add');
const sub = document.getElementById('sub');
const reset = document.getElementById('reset');
add.addEventListener('click', () => {
count.innerHTML++;
applyColor();
});
sub.addEventListener('click', () => {
count.innerHTML--;
applyColor();
});
reset.addEventListener('click', () => {
count.innerHTML = 0;
applyColor();
});
function applyColor() {
if (count.innerHTML > 0) {
count.style.color = 'green';
} else if (count.innerHTML < 0) {
count.style.color = 'orangered';
} else {
count.style.color = 'black';
}
}
That’s it. Congratulations on building this project. If you have any doubts then you can ask them in the comment section below.
Download Source Code of Counter App built using HTML, CSS and JavaScript.
