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, the counter is a very useful part of 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.
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.
Step 3: Now, we will add some JavaScript code to add functionality to the buttons which we created earlier. Refer to the comments in the code for help.
Example:
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 class="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> |
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%;} |
Javascript
//initialising a variable name datalet data = 0;//printing default value of data that is 0 in h2 tagdocument.getElementById("counting").innerText = data;//creation of increment functionfunction increment() { data = data + 1; document.getElementById("counting").innerText = data;}//creation of decrement functionfunction decrement() { data = data - 1; document.getElementById("counting").innerText = data;} |
Output: Click here to see live code output
