Incremental and Decremental counter using HTML, CSS ,and JavaScript

Incremental and Decremental counter using HTML, CSS, and JavaScript

Incremental and Decremental counter using HTML, CSS ,and JavaScript


Hey learners… Hope you guys are coding well😁.In this blog, we are going to make a simple javascript increment and decrement counter on button click using the very basics of HTML, CSS, and Javascript.

Live Server:-

The live server of the Increment and Decrement Counter is below:-

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

HTML CODE FOR THE INCREMENT AND DECREMENT COUNTER:-

Simply I have used a input for showing the number and two buttons one for increment and other for decrement. I have also used some inline javascript like increase function and decrease function which will be called only when I click on the button.I have set the default value of the input is 0.
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Document</title>  
 </head>  
 <body>  
   <h3>Increment and Decrement Counter</h3>  
   <div class="conatiner">  
     <button id="increment" onclick="increase()">+</button>  
     <input type="text" value="0" id="input">  
     <button id="decrement" onclick="decrease()">-</button>  
   </div>  
 </body>  
 </html>

CSS (Styling the webpage):-

As the project is very simple I have used only some basic concepts of CSS like flexbox to align the items vertically and horizontally.I have also used the box-shadow concept.
 body{  
       width:100vw;  
       height:100vh;  
       display:flex;  
 justify-content: center;  
 align-items: center;  
 background-color: rgb(175, 218, 203);  
 flex-direction: column;  
     }  
     .container{  
       display:flex;  
 justify-content: center;  
 align-items: center;  
     }  
     button{  
       width:50px;  
       height:50px;  
       font-size:32px;  
     }  
     #input{  
       height:40px;  
       width:200px;  
       border-radius:8px;  
       margin: 2px;  
       padding: 5px;  
       position:relative;  
       box-shadow: 5px 5px 5px rgba(0,0,0,0.2) inset,-5px -5px 5px rgba(0,0,0,0.2) inset;  
       font-size:32px;  
       font-weight:100;  
     }

Javascript:-

As the project is so simple the javascript is also simple includes only two functions which call increase and decrease which is used here in the increase function which increases the value by 1 on clicking the increase button and in the decrease function it decreases the value by 1 and on clicking.
  var input=document.getElementById("input")  
     function increase(){  
       input.value=eval(input.value)+1  
     }  
     function decrease(){  
       input.value=eval(input.value)-1  
     }

I hope you have liked it. Wait, Did you still not implement it So why are you waiting, go and implement it now 😎.
If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
You can follow me on Instagram.
Written by @Himanshu Singh.



Leave a Reply