How to make Incremental and Decremental counter using HTML, CSS and JavaScript? - GeeksforGeeks

26 Mar, 2021

While visiting different shopping websites like Flipkart and Amazon you have seen a counter on each product, that counter is used to specify the quantity of that product. Hence, counter is very useful part for many websites. In this article, we will design a counter using HTML, CSS, and JavaScript.
A sample image is provided to give you a more clear idea about the article.
Step by step implementation:
Step 1: First, we will design a simple button using HTML. Refer to the comments in the code.
index.html
 

 
 










<!DOCTYPE HTML>  
  
<html>  
  
<head>  
    <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8" />  
      
</head>  
      
<body>  
  <!-- give a suitable heading using h1 tag-->
        <h1>Increment and Decrement counter</h1> 
  
        <div="container">             
          <!-- adding button and heading to show the digits -->
          <!--increment() and decrement() functions on button click-->
            <button onclick="increment()">+</button>   
            <h2 id="counting"></h2> 
            <button onclick="decrement()">-</button>          
        </div> 
  
</body>  
  
</html>  






Step 2: Next, we will use some CSS properties to design the button and use the hover class to get the animation effect when we hover the mouse over the button.
style.css
 

 
 










/*apply css properties to body tag*/
  
body { 
    position: absolute; 
    left: 0%; 
    text-align: center; 
} 
  
/*apply css properties to container class*/
  
.container { 
    justify-content: center; 
    align-items: center; 
    display: flex; 
    height: 100%; 
    text-align: center; 
} 
  
/*apply css properties to button tag*/
  
button { 
    width: 90px; 
    height: 60px; 
    font-size: 30px; 
    background-color: green; 
    color: honeydew; 
} 
  
/*apply hover effect to button tag*/
  
button:hover { 
    background-color: greenyellow; 
    color: grey; 
} 
  
/*apply css properties to h2 tag*/
  
h2 { 
    color: black; 
    margin: 0 50px; 
    font-size: 45px; 
} 
  
/*apply css properties to h1 tag*/
  
h1 { 
    font-size: 35px; 
    color: green; 
    text-align: center; 
    padding-left: 10%; 
} 






Step 3: Now, we will add some JavaScript code to add functionality to the buttons which we have created earlier. Refer to the comments in the code for help.
index.js
 

 
 










//initialising a variable name data 
  
var data = 0; 
  
//printing default value of data that is 0 in h2 tag 
document.getElementById("counting").innerText = data; 
  
//creation of increment function 
function increment() { 
    data = data + 1; 
    document.getElementById("counting").innerText = data; 
} 
//creation of decrement function 
function decrement() { 
    data = data - 1; 
    document.getElementById("counting").innerText = data; 
} 






Complete Code: In this section, we will combine the above three sections to create a counter.
HTML
 

 
 










<!DOCTYPE html> 
<html> 
    <head> 
        <!-- CSS code-->
  
        <style> 
            /*apply css properties to body tag*/ 
  
            body { 
                position: absolute; 
                left: 0%; 
                text-align: center; 
            } 
  
            /*apply css properties to container class*/ 
  
            .container { 
                justify-content: center; 
                align-items: center; 
                display: flex; 
                height: 100%; 
                text-align: center; 
            } 
  
            /*apply css properties to button tag*/ 
  
            button { 
                width: 90px; 
                height: 60px; 
                font-size: 30px; 
                background-color: green; 
                color: honeydew; 
            } 
  
            /*apply hover effect to button tag*/ 
  
            button:hover { 
                background-color: greenyellow; 
                color: grey; 
            } 
  
            /*apply css properties to h2 tag*/ 
  
            h2 { 
                color: black; 
                margin: 0 50px; 
                font-size: 45px; 
            } 
            /*apply css properties to h1 tag*/ 
  
            h1 { 
                font-size: 35px; 
                color: green; 
                text-align: center; 
                padding-left: 10%; 
            } 
        </style> 
    </head> 
  
    <body> 
        <!-- give a suitable heading using h1 tag-->
        <h1>Increment and Decrement counter</h1> 
  
        <div ="container"> 
            <!-- adding button and heading to show the digits -->
            <!-- increment() and decrement() functions on button click-->
            <button onclick="increment()">+</button> 
            <h2 id="counting"></h2> 
            <button onclick="decrement()">-</button> 
        </div> 
        <!-- JavaScript code-->
        <script> 
            //initialising a variable name data 
            var data = 0; 
  
            //printing default value of data that is 0 in h2 tag 
            document.getElementById("counting").innerText = data; 
  
            //creation of increment function 
            function increment() { 
                data = data + 1; 
                document.getElementById("counting").innerText = data; 
            } 
            //creation of decrement function 
            function decrement() { 
                data = data - 1; 
                document.getElementById("counting").innerText = data; 
            } 
        </script> 
    </body> 
</html> 






 

CSS-Properties


HTML-Tags


JavaScript-Questions


CSS


HTML


JavaScript


Web Technologies

Writing code in comment? 
                                    Please use ide.geeksforgeeks.org, 
                                    generate link and share the link here.
                                
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
Design a web page using HTML and CSS
Search Bar using HTML, CSS and JavaScript
How to wrap the text around an image using HTML and CSS ?
REST API (Introduction)
How to Insert Form Data into Database  using PHP ?
Form validation using HTML and JavaScript
How to set input type date in dd-mm-yyyy format using HTML ?
How to set the default value for an HTML <select> element ?