Counter Project in JavaScript

In this tutorial, we are going to do a JavaScript counter project in which we will show a value on the custom HTML page and this value will increase by 1 when we click on the + button and decrease by 1 when we click on the – button.

Creating a Basic Template of HTML and CSS

In this, we created three files home.html, style.css, and index.js. In home.html we have a basic layout web page with heading “Counter Project” with three buttons for increment(+), decrement(-), a number which is displayed.

We have added the link to the Bootstrap CDN, script index.js, and styles.css.

The buttons have a unique ID so that we can access these elements directly using DOM model in the index.js file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <h1>Counter Project</h1>
    <div class="container mainBox">
      <button id="increment" type="button" class="btn btn-light">
        +
      </button>
      <button id="number" type="button" class="btn btn-light text-center">
        0
      </button>

      <button id="decrement" type="button" class="btn btn-light">
        -
      </button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

 

Now moving to styles.css, we have basic styles so that button looks nice inside the container div.

body {
  background-color: rgb(71, 69, 69);
}

.mainBox {
  height: 150px;
  width: 500px;
  margin: auto;
  margin-top: 50px;
  background-color: rgb(101, 101, 182);
}

h1 {
  text-align: center;
}

#number {
  height: 50px;
  width: 250px;
  margin-top: 40px;
  border: 1px solid black;
  text-align: center;
  background-color: white;
}

#increment {
  height: 30px;
  width: 100px;
  margin-top: 50px;
  margin-left: 225px;
  margin-right: 100px;
}

#decrement {
  height: 30px;
  width: 100px;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 225px;
}

Till this step, we have built the basic front end of the web page and now it is time to move to the backend of how the counter works.

Counter Functionality Implementation

We have to get the button with id “number” and increment its value. For getting the elements we use the DOM model.

let add = document.getElementById("increment");
let sub = document.getElementById("decrement");
let no = document.getElementById("number");

Then a temporary variable named counter is used to keep the count ready and when we click the increment or decrement button it gets updated first and then sets the counter value to id = “number” button.

let count = 0;

Now time to implement on button click functionality using the event listeners in JavaScript.

add.onclick = function() {
  count += 1;
  no.innerHTML = count;
};

sub.onclick = function() {
  count -= 1;
  no.innerHTML = count;
};

Now Its time to run the project.

Note: Every time we refresh the page, the counter will get reset to 0 because it is stored in current runtime memory and not in storage.

JavaScript counter

Thanks. If any doubts please reply to this thread.

Leave a Reply

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