Hello, friends hope you all are doing well. Today in this HTML CSS and JavaScript Project, we are going to create buttons with increment and decrement numbers. As you know I have created lots of awesome and useful JavaScript projects and it will be one of them.
Increment and decrement the number means the way of increasing and decreasing number. This type of feature is mostly used on the E-commerce product card to order how many products users want to order to buy.
Let’s have a look at the given image of Button with Increment and Decrement Number using HTML CSS and JavaScript. Basically when you click on the plus button the center number increase by one, as when you click on the minus button center number decrease by one.
Now we watch the real virtual example of this projects, how number increases and decreases and all the code I have used to build this program [JavaScript Button with Increment and Decrement Number].
Button with Increment & Decrement Number | Video
You can download all the source code of this project [JavaScript Button with Increment and Decrement Number] from below, before jumping on the source code file, you need to know some basic things of this HTML CSS and JavaScript project.
As you have seen on the video tutorial of this JavaScript Button with Increment and Decrement Number. At first, we have seen number one at the center of the two-button. When I clicked on the plus button that number turns into “two” and when I clicked again it turns into “three” this increase and decrease with every click.
To make this program [ Button with Increment and Decrement Number], I have used HTML CSS, and JavaScript. Have you noticed that we can’t decrease the number to less than one?
I hope now you cant make this project easily, those friends who are feeling difficult to create this, I have provided all the source code of this JavaScript Button with Increment and Decrement Number below:
You Might Like This:
Button with Increment & Decrement Number [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Increment & Decrement Button | CodingLab </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<span class="minus">-</span>
<span class="num">01</span>
<span class="plus">+</span>
</div>
<script>
const plus = document.querySelector(".plus"),
minus = document.querySelector(".minus"),
num = document.querySelector(".num");
let a = 1;
plus.addEventListener("click", ()=>{
a++;
a = (a < 10) ? "0" + a : a;
num.innerText = a;
});
minus.addEventListener("click", ()=>{
if(a > 1){
a--;
a = (a < 10) ? "0" + a : a;
num.innerText = a;
}
});
</script>
</body>
</html>
/* Google fonts import link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #343F4F;
}
.wrapper{
height: 120px;
min-width: 380px;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
width: 100%;
text-align: center;
font-size: 55px;
font-weight: 600;
cursor: pointer;
user-select: none;
}
.wrapper span.num{
font-size: 50px;
border-right: 2px solid rgba(0,0,0,0.2);
border-left: 2px solid rgba(0,0,0,0.2);
pointer-events: none;
}
If you face any difficulties while creating your Button Click Animation or your code is not working as expected, you can download the source code files for this Add to Card Button for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
