How to Create Count machine in JavaScript?

See how to build a counting machine in JavaScript in this blog.

Live Output:-



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>
  <meta charset="utf-8">
    Create Count Button
  <script src="" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="style.css">

<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>
 <script type="text/javascript" src="count.js"></script>

Step2:- create Style.css File.

    padding: 0;
    margin: 0;
  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;
  background: #ffd23f;
  padding: 20px;
  border: 1px solid;
  border-radius: 15px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  padding: 5px 50px;
  border-radius: 15px;
  border: 0;
  font-size: 30px;
  border-bottom: 2px solid #606060;
  margin-top: 10px;
  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;

   border-bottom: 2px solid #606060;
   background: #fff;
   color: #000;
  text-align: center;

Step3:- Create count.js File.

  $(document).ready(function() {
  var counts = 0;
  $("#btn").click(function() {
    counts += +1;
      counts1 = "0" + counts
      counts1 = counts;

    counts = 0;
    counts1 = "0"+counts;

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.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *