This guide provides a step-by-step procedure to create an incremental and decremental counter using HTML, CSS, and JavaScript.
How to Make an Incremental and Decremental Counter?
The meaning of increment in programming is to add a certain number to the existing number, whereas decrement means subtracting a number from the existing number. The incremental and decremental counter has its own importance in e-commerce sites.
Example
In this example code, we are creating an incremental as well as decremental counter project by utilizing HTML, CSS, and JavaScript.
HTML Code
In the above HTML, two buttons are created. One button has the increment() function on its onclick event, and the second button has the decrement() function on its onclick event.
CSS Code
button {
width: 30px;
height: 30px;
font-size: 25px;
background-color: burlywood;
color: honeydew;}
h2 {
color: black;
margin: 0 50px;
font-size: 30px;}
</style>
The styling properties are implemented on the counter button as well as headings. These properties include width, height, font size, background color, color, etc.
JavaScript Code
document.getElementById('demoInput').stepUp();}
function decrement() {
document.getElementById('demoInput').stepDown(); }
In this file, two methods increment() and decrement() are utilized within a <script> tag. The increment() method is used to increase the value by one. Similarly, the decrement() method is employed to decrement the value by one. By default, the stepUp() and stepDown() methods increase and decrease the value by 1. However, you can set the interval by passing the required value in the stepUp() and stepDown() methods. For instance, stepUp(2) will increment the value by 2.
Complete Code
<head>
<style>
button {
width: 30px;
height: 30px;
font-size: 25px;
background-color: burlywood;
color: honeydew;}
h2 {
color: black;
margin: 0 50px;
font-size: 30px;}</style>
</head>
<body>
<h2>An example of Increment and Decrement counter</h2>
</div>
<input id=demoInput type=number min=1 max=100>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<script>
function increment() {
document.getElementById('demoInput').stepUp();}
function decrement() {
document.getElementById('demoInput').stepDown(); }
</script>
</body>
</html>
The above code is executed in the .html file.
Output
The output returns an input field with two buttons.
Initially, the text box does not contain any numbers. When the “+” button is pressed, the value starts increasing, while the “-” button decreases the value.
Conclusion
The incremental and decremental counters are employed for increasing or decreasing the value by a specific number. This incremental/decremental phenomenon is mostly used on shopping carts of online sites. Here, you have learned to design incremental and decremental counters with the help of HTML, CSS, and JavaScript. Usually, the increment or decrement value of the counter is set to “1”. However, you can set the interval value as per your requirements.
