Hello and welcome to today’s tutorial. In today’s tutorial, we will learn how to create a basic counter. For this project, we need HTML, CSS and Javascript. If you are a javascript beginner, then this project might be the perfect choice for you.
The project consists of a number display along with three buttons. The plus button increments the value, the next one is the minus button that decrements it. Lastly, we have the reset button that resets the count back to zero. This counter comes with a sleek UI.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. If you are interested you can check it down below:
Project Folder Structure:
Now before we start the coding, let us see what the project folder structure looks like. The project folder structure is called Counter. Within this folder, we have three files. First is index.html which is the HTML document. The second is style.css which is a stylesheet. And the last one is the javascript file called script.js.
HTML:
Let us begin with the HTML code. Copy the code below and paste it into your HTML file.
The HTML file consists of a div with a class name container. Inside the container, we have an h1 element with id num.
Following the h1 element, we have a div with class name btns. This div consists of three buttons. Each of these divs has an icon inside of it. I have used font awesome icons for this project. You can use any other icon or even some text.
The class name assigned to these buttons is dec, reset and inc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 id="num">0</h1>
<div class="btns">
<button class="dec">
<i class="fas fa-minus"></i>
</button>
<button class="reset">
<i class="fas fa-redo"></i>
</button>
<button class="inc">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Now let us style this counter using CSS. Copy the code provided below and paste it into your style.css file.
We begin by discarding unwanted paddings and margins from all the elements. Following this, we set the height of the body to 100vh and display it to the grid. By setting display to the grid we can use place items to centre the container.
We set dimensions for containers and use the after pseudo-element to create a box. This creates a sleek UI for the counter. We add box-shadow to the container to make it stand out even more.
Next, we centre the h1 element. After this, we use a flex layout to space around the buttons. You can customize these buttons however you would like to.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #13162b;
display: grid;
place-items: center;
}
.container {
position: relative;
width: 80vmin;
background-color: #191c37;
padding: 100px 40px;
border-radius: 9px;
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.2);
}
.container:after {
content: "";
position: absolute;
width: 85%;
left: 7.5%;
height: 120%;
bottom: -10%;
background-color: #0087ff;
z-index: -1;
border-radius: 8px;
}
h1 {
text-align: center;
font-family: "Roboto Mono", monospace;
font-size: 80px;
color: #ffffff;
}
.btns {
display: flex;
justify-content: space-around;
margin-top: 80px;
}
.btns button {
width: 130px;
padding: 15px 0;
font-size: 18px;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
button.inc,
button.dec {
background-color: #0087ff;
color: #ffffff;
}
button.reset {
background-color: transparent;
border: 4px solid #0087ff;
color: #0087ff;
}
Javascript:
Now let us add functionality to this counter using javascript. We select the num element and assign it to a variable. Next, we create a variable called value and set its value to zero. Following this, we also select all three buttons using the querySelector. We add a click event listener to each of these buttons.
The function for btnInc increases the value by one. It then changes the text content of the numContiner to this new value. Next, btnDec does a similar thing but instead of adding one, it subtracts one from the value.
Lastly, the function attached to the event listener of btnReset sets the value back to zero. Your counter is now ready.
let numContainer = document.getElementById("num");
let value = 0;
let btnInc = document.querySelector(".inc");
let btnDec = document.querySelector(".dec");
let btnReset = document.querySelector(".reset");
btnInc.addEventListener("click", () => {
value++;
numContainer.textContent = value;
});
btnDec.addEventListener("click", () => {
value--;
numContainer.textContent = value;
});
btnReset.addEventListener("click", () => {
value = 0;
numContainer.textContent = value;
});
If you have issues while coding this, you can download the source code by clicking on the download button below. Also, do leave your suggestions and feedback in the comments below.
hi