Creating a Counter using JavaScript vanilla

Amulya Raj Budhathoki Amulya Raj Budhathoki
Jun 25, 2022 - 12:15
0 370

Let's create a simple counter using javascript.

1. Setting up the environment 

a. use VS code as a code editor 
b. create three files namely app js and index.html

2. In your index.html file use standard html5 boilerplate code by typing "!" or "html:5" and click on the suggestion; then your html boiler plate code is ready.

this shall look something like this  

<!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>Counter</title> //change the title
</head>
<body>
    
</body>
</html>

3.   Now import app.js (javascript file in the body of the html code) using  

<script src="app.js"></script>

4.  After this, we shall create a simple html page to show the counter which shall also have three buttons which shall increase, decrease or reset the counter.

Our final html page shall look like this. 

<!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>Counter</title>
</head>
<body>
    <h1>counter</h1>
    <span id="value"> 0 </span>
    <div class="button-container">
      <button class="btn decrease">Decrease</button>
      <button class="btn reset">Reset</button>
      <button class="btn increase">Increase</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

5. Now let's move on to the app.js file to give these code LIFE.

a. Let us first create a variable using "let"  

let count =0;

b. Then let's create a constant variable to select the id' s and classes to change the innerHTML using query selector. 

const value=document.querySelector('#value');
const btns = document.querySelectorAll('.btn');

the constant variable value holds the innerHTML element id called value i.e. id=value and the btns holds all the button elements that were given the classes "btn"

c. Now for all the buttons, we shall need to assign some functionalities. And as bins are now an array, we will use the "forEach" command to start a loop and create an event listener. 

btns.forEach( function(btn){
    btn.addEventListener('click',function(e){
      console.log(e.currentTarget);
    })
});

save the app.js file and open the index.html file in chrome. Now,open developer tools and click on any button. Here you can see which button you have just clicked. We now use .classList to get all the class name used in that element. 

btns.forEach( function(btn){
    btn.addEventListener('click',function(e){
      console.log(e.currentTarget.classList);
    })
});

Change this code and again open up the developer's tool and click on the buttons. You'll see all the classes used in the button. Now, we shall create a constant variable to store the list and then modify the count. 

btns.forEach( function(btn){
    btn.addEventListener('click',function(e){
      const styles = e.currentTarget.classList;
       
    })
});

Now, we use conditional statement to update the value in the innnerHTML page. Our app.js shall look like this. 

let count =0;

const value=document.querySelector('#value');
const btns = document.querySelectorAll('.btn');

btns.forEach( function(btn){
    btn.addEventListener('click',function(e){
      const styles = e.currentTarget.classList;
        if (styles.contains('decrease')){
            count --;
        }else if(styles.contains('increase')){
            count ++;
        }
        else if(styles.contains('reset')){
            count =0;
        }

        value.textContent=count;
    })
});

Now save the app.js and deploy the HTML in web browser.