See how to build a counting machine in JavaScript in this blog.
Live Output:-
00
I can also make 108 wadi garlands of my god with the help of this counting machine. Enter the name of the God you want to remember and input it into your mind and click on the button.
How to Create Count Button?
Below is a step-by-step guide on how to create a countdown button.
Step1:- Create Index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Create Count Button
</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="main-inner">
<input type="text" name="name" placeholder="Enter Your God Name">
<h1 class="counts">00</h1>
<button id="btn" value="name" type="name" name="name">+</button>
<p><a href="#" class="reset">Reset</a></p>
</div>
</div>
<script type="text/javascript" src="count.js"></script>
</body>
</html>Step2:- create Style.css File.
*{
padding: 0;
margin: 0;
}
.main{
height: 250px;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: column;
background: #ee4266;
width: 300px;
margin: auto;
margin-top: 20px;
border: 1px solid;
border-radius: 15px;
}
.main-inner{
background: #ffd23f;
padding: 20px;
border: 1px solid;
border-radius: 15px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.main-inner
button{
padding: 5px 50px;
border-radius: 15px;
border: 0;
font-size: 30px;
}
.main-inner
button:hover{
border-bottom: 2px solid #606060;
}
.main-inner
p{
margin-top: 10px;
}
.main-inner
p
a{
text-transform: uppercase;
background: red;
border-radius: 15px;
text-decoration: none;
color: #fff;
padding: 5px 20px;
font-size: 12px;
margin-top: 10px;
border: px solid;
}
.main-inner
p
a:hover{
border-bottom: 2px solid #606060;
background: #fff;
color: #000;
}
.main-inner
input{
text-align: center;
}Step3:- Create count.js File.
$(document).ready(function() {
var counts = 0;
$("#btn").click(function() {
counts += +1;
if(counts<10){
counts1 = "0" + counts
}else{
counts1 = counts;
}
$(".counts").text(counts1);
});
$(".reset").click(function(e){
counts = 0;
counts1 = "0"+counts;
$(".counts").text(counts1);
});
})Note:- Also add style.css and count.js link in index.html File.
Create Count Button Demo in Codepen.
See the Pen Create Count Button by khushal (@mr__khushal) on CodePen.
