Telegram Group Join Now
ADVERTISEMENT
Increment Counter Using JavaScript
Hello coders, a very warm welcome to code with random. Today we’ll build an Increment Counter Using JavaScript. An increment counter is basically a basic project for the front-end developer and javascript plays a major role in it. Let us see the building of this project.
ADVERTISEMENT
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML , CSS and JavaScript |
External link / Dependencies | No |
Responsive | Yes |
Html Code For Increment Counter: –
ADVERTISEMENT
Html stands for a hypertext markup language. It is used for creating the layout of the website. The main content of the website lies inside the body tag. Here we are going to create increment and decrement counters. In which we need to add two buttons one for increment(+) and the other is decrement(-) and an input tag for value.
<h1>Input Quantity Increment</h1> <section> <form action=""> <p class="qty"> <label for="qty">Quantity:</label> <button class="qtyminus" aria-hidden="true">−</button> <input type="number" name="qty" id="qty" min="1" max="1000" step="1" value="1" /> <button class="qtyplus" aria-hidden="true">+</button> </p> </form> </section>
In this code, we have given a heading and labeled it as quantity. Then we used a form element as a number and set the minimum and maximum entries at a time. And created buttons for the + and -. Let us see the html output. Before writing css for the increment counter.
ADVERTISEMENT
Create Music Player Project Using Javascript (Source Code)
ADVERTISEMENT
Html output:-
This is the output of the Html code.

Css Code For Increment Counter: –
Css stands for cascading styling sheet.Css is used for styling the layout of the website. Instead of using plain css for styling the layout of the website we can use the css frameworks like sass,scss, bootstrap, and tailwind.
ADVERTISEMENT
Here we are using the basic concepts of css like border-box, flexbox, and css selectors for classes and ids.
/* Reset for the demo */ * { box-sizing: border-box; min-width: 0; min-height: 0; } body { margin: 0; font-size: 1.4rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.5; color: #575757; } h1 { text-align: center; } button { padding: 0; margin: 0; border-style: none; touch-action: manipulation; display: inline-block; border: none; background: none; cursor: pointer; } /* End Reset for the demo */ /* Sass Config */ $btn_grey: #575757; /* Contrast : 7.2:1 */ /* End Sass Config */ .qty { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; label { flex: 1 0 100%; } input { width: 7rem; height: 3rem; font-size: 1.3rem; text-align: center; border: 1px solid $btn_grey; } button { width: 3rem; height: 3rem; color: #fff; font-size: 2rem; background: $btn_grey; } button.qtyminus { margin-right: 0.3rem; } button.qtyplus { margin-left: 0.3rem; } }
In this css code we have set the font color for the heading and set the position for the counter and styled the button of + and – . Let us have a look at the css output.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Html + Css output:
ADVERTISEMENT

JavaScript Code For Increment Counter: –
Javascript is used to add functionalities to websites. Here we want the when we click on the increment button the value increases by 1 and when we click on the decrement sign the value decreased by 1. So we need to use dom(document-object-model) manipulation.
/* * @Adilade Input Quantity Increment * * Free to use - No warranty */ var input = document.querySelector( "#qty" ); var btnminus = document.querySelector(".qtyminus"); var btnplus = document.querySelector(".qtyplus"); if ( input !== undefined && btnminus !== undefined && btnplus !== undefined && input !== null && btnminus !== null && btnplus !== null ) { var min = Number(input.getAttribute("min")); var max = Number(input.getAttribute("max")); var step = Number(input.getAttribute("step")); function qtyminus(e) { var current = Number(input.value); var newval = current - step; if (newval < min) { newval = min; } else if (newval > max) { newval = max; } input.value = Number(newval); e.preventDefault(); } function qtyplus(e) { var current = Number(input.value); var newval = current + step; if (newval > max) newval = max; input.value = Number(newval); e.preventDefault(); } btnminus.addEventListener("click", qtyminus); btnplus.addEventListener("click", qtyplus); } // End if test
In this js code, we have defined everything as a variable except the + and – button for them we have defined function and set the conditions so that they can act accordingly. Let us see the output of this project.
50+ Html ,Css & Javascript Projects With Source Code
Final Output Of Increment Counter Using JavaScript:
Summary Increment Counter Using JavaScript:
ADVERTISEMENT
We have created an increment counter using html, css & javascript. We first created an html file using an element of the form called the number, creating a button as + and -. Then we styled all of them in a css file.
ADVERTISEMENT
We called them as variable(var) in the javascript file and then for buttons we set them in a function and pass on some conditions. If you loved do comment as it boosts our motivation to bring new projects for you guys. If you face any difficulty while performing feel free to reach out to us with the help of the comment section.
ADVERTISEMENT
Happy coding
ADVERTISEMENT
Written by @harsh_9& Himanshu Singh
ADVERTISEMENT
Which code editor do you use for this Increment Counter coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
ADVERTISEMENT