Header Ads Widget

Increment and decrement counter using JavaScript

My codding spot April 22, 2023

In this post, you will learn how to create increment and decrement counter using HTML CSS, and JavaScript. 

Before making a counter project discuss the topic.

What is the increment and decrement counter? 

The increment and decrement counter is an operation of increasing and decreasing numeric value.

E-commerce websites used this counter to add or remove the quantity of each product.

We will create a counter using two ways: 1) by using the onclick event and function and (2) by using the addeventlistener and arrow function.

Illustration of JS counter

JavaScript counter image
JS counter 

JavaScript counter using onclick event and function 

In this method, the onClick event and function are the main components used to create a counter.

Skills required:-

HTML:-  
button element, onClick event.

CSS:- 
position, transform, background property, border-radius properties, and more.

JavaScript:-  
function, DOM method – document.getElementById() innerHTML property.

Steps to create a counter with an onClick event 

1) Create an HTML structure

4 main things are required: first is displaying the number here we take the h1 element and three buttons are taken one for increment, second for reset, and third for decrement.

2) Applying CSS styles

Position, transform, top, and left properties are used to center the container. Border and border-radius properties are used for styling buttons. Pseudo class :hover is used to apply special effects on the button while hovering on it.

3) Adding JavaScript to make counter workable

Three functions are defined for incrementing, resetting, and decrementing counter. document.getElementById() method and innerHTML property are used to increasing and decreasing the counter, and set the counter value to 0. All functions are called using the onClick event on buttons.

Source code:-

HTML

<!DOCTYPE html>
<html>
<head>
<title>Counter using javascript</title>
</head>
<link rel="stylesheet" href="counter.css">
<script src="counter.js"></script>
</head>
<body>
<div class="container">
<h1 id="count">0</h1>
<button id="dec" onClick="decrmnt()">-</button>
<button id="reset" onClick="resetcount()">reset</button>
<button id="inc" onClick="incrmnt()">+</button>
</div>
</body>
</html>

CSS

.container
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:auto;
width:auto;
background-color:#1c1a18;
padding:15px;
}
h1
{
text-align:center;
color:#ffba00;
}
#dec,#inc
{
background-color:#ffba00;
padding:10px;
border-radius:50%;
height:auto;
width:auto;
border:3px groove #655b50;
box-shadow:-3px 3px 1px #655908;
font-size:24px; 
}
button
{
margin:10px;
}
button:hover
{
transform:translate(-3px,3px);
}
#reset
{
background-color:#83d39d;
padding:7px;
font-size:18px;
border:none;
border-radius:50%;
border:3px groove #655b50;
}

JavaScript

let cnt=document.getElementById("count");
let minus=document.getElementById("dec");
let rest=document.getElementById("reset");
let plus=document.getElementById("inc");
let count=0;
function decrmnt()
{
document.getElementById("count").innerHTML=count--;
}
function incrmnt()
{
document.getElementById("count").innerHTML=count++;
}
function resetcount()
{
count=0;
document.getElementById("count").innerHTML=count;
}

JS counter Output 1


JavaScript counter using addeventlistener and arrow function 

In this method, no function is used. Instead of event, addeventlistener is used which is the container for both event and function.

Skills required:-

HTML:-  
button element, paragraph element for display.

CSS:- 
Common CSS property for styling counter.

JavaScript:-  
addeventlistener, arrow function, DOM method – document.querySelector(), and innerHTML property.

Steps to create a counter with addeventlistener 

1) HTML structure

All components are the same. But here <p> element is taken to adjust font size.


2) CSS styles

CSS properties make counters look good by setting margin, padding, and shadow to elements.


3) Adding JavaScript

In this second method, the DOM method document.querySelector() selects elements according to their class and id name.

addEventlistener() is the JavaScript method of the DOM event listener. It takes 3 parameters: 1st parameter is for an event, In  2nd parameter you can call the function or define the function. 3rd parameter is optional so not defined here. Here click event is defined without the “on” prefix. The arrow function is defined for incrementing, decrementing, and resetting counter values. 

Source code
HTML

<!DOCTYPE html>
<html>
<head>
<title>JS counter</title>
<script src="jscounter.js"></script>
<link rel="stylesheet" href="counter.css">
</head>
<body>
<p class="count">0</p>
<button id="dec">decrement</button>
<button id="reset">reset</button>
<button id="inc">increment</button>
</body>
</html>

CSS

.count
{
text-align:center;
margin-left:48px;
max-width:250px;
background-color:#ff5b64;
border-radius:50px;
color:#190845;
font-size:50pt;
font-family:courier New;
box-shadow:5px 5px 15px #ff5b60;
}
button
{
height:50px;
width:100px;
font-size:14pt;
padding:5px;
border-radius:50px;
margin-left:10px;
}
#inc,#dec
{
background-color:#6951ae;
color:#aad4c8;
}
#reset
{
background-color:#aad4c8;
color:#6951ae;
}
button:hover
{
box-shadow:-3px 3px 10px #000000;
}

JavaScript

let c=0;
let counter=document.querySelector(".count");
let add=document.querySelector("#inc");
let zero=document.querySelector("#reset");
let minus=document.querySelector("#dec");
add.addEventListener("click",()=>{c=c+1;
counter.innerHTML=c;
});
zero.addEventListener("click",()=>{c=0;
counter.innerHTML=c;
});
minus.addEventListener("click",()=>{c=c-1;
counter.innerHTML=c;
});

JS counter Output 2




Summary

This post covered the concept of DOM methods and functions by making a counter-project. There is no difference in increasing and decreasing the counter value by using increment (++) and decrement (--) operators or arithmetic operator (+), both give the same results.


Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments