How to build a simple counter using Javascript?

This is a simple article where you learn how to build a counter using JavaScript.

By the end of this article, you will learn how to create a counter, how to write conditions that change the color based on positive or negative numbers displayed, and also you will give more practice working with the DOM.

Some key concepts of JavaScript I will cover;

• document.querySelectorAll()
• forEach()
• addEventListener()
• currentTarget property
• classList
• textContent

Also read:

Explore the State of Vue 3 Reactivity, JavaScript Reactivity and Composition API.

React.js Alternatives: Modern Web Frameworks and Lightweight JavaScript Libraries

Can Javascript Frameworks replace Ruby On Rails?

1. querySelectorAll(): The querySelectorAll()method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
2. forEach(): The forEach() method calls a function once for each element in an array, in order.
3. addEventListener(): The addEventListener() method attaches an event handler to the specified element.
4. CurrentTarget property: The currentTarget event property returns the element whose event listeners triggered the event.
5. classList: The classList property returns the class name(s) of an element, as a DOMTokenList object.
6. textContent: The textContent property sets or returns the text content of the specified node, and all its descendants.

Building the counter,

First, we want to build the HTML and CSS files.

Here are the https://github.com/Vidushika0316/Js-Counter.git HTML, CSS, and JavaScript codes needed. You can download the CSS code as here I’m not going to talk about CSS code.

This is how the counter displayed.

To create the value 0;

<span id="value">0</span>

To create three buttons for decrease, reset, and increase;

<div class="button-container">
  <button class="btn decrease">Decrease</button>
  <button class="btn reset">Reset</button>
  <button class="btn increase">Increase</button>
</div>

So, here is our HTML code,

So, that’s all about the HTML code.

Now we shall move to our JavaScript code.

So first we have to declare a variable count and should initialize it to 0. count is the variable that changes its value with the increase, decrease and reset functions.

let count=0;
//set initialize count

Next, we have to select “value” and buttons.

To select “value” in Javascript code we have to use querySelector and assign it to a variable.

As “value” is given with id attribute, we have to use #value in querySelector.

const value=document.querySelector("#value");

To select all three buttons, we have to use querySelectorAll() with .btn class name.

const buttons=document.querySelectorAll(".btn");

If you want to make sure that all buttons are selected, you have to use console.log(buttons); and check whether you are getting the NodeList of the buttons in the console as follows.

If you are getting this output, you are good to go!!!

So, as the next step, we have to call each button in the array. For this, I use forEach method.

buttons.forEach(function(button){});

You can use any name for the parameter in function(parameter) .But remember to use meaningful names. Here I use the button as my parameter.

And again if you want to make sure that you have access the all the buttons correctly, you can type console.log(buttons); inside the function parentheses and check whether you have done coding correctly.

Next, I’m going to add eventListener to all the buttons to check which button the user clicks.

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

After that, if you click the decrease button you can see the following output in your console.

Likewise, you can see the following output for reset and increase buttons.

Now assign e.currentTarget.classList to a variable.

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

Now we are at the end of our counter.

Next, we are going to perform the actions according to the buttons that the user selects.

If the user selects the decrease button, we have to reduce one from the count, and if the user selects the increase button, we have to add one to the count, and if the user selects the reset button, we have to set the count to the 0.

Finally, you have to assign the count to the value which is displayed.

if(styles.contains("decrease")){
  count--;
}
else if(styles.contains("increase")){
  count++;
}
else{
  count=0;
}
value.textContent=count;

In addition to that, you can change the color of the value when increasing and decreasing.

if(styles.contains("decrease")){
  count--;
}
else if(styles.contains("increase")){
  count++;
}
else{
  count=0;
}
if(count>0){
  value.style.color="green";
}
if(count<0){
  value.style.color="red";
}
if(count===0){
  value.style.color="#222";
}
value.textContent=count;

So, this is our final JavaScript code;

This is the end of our process of building the counter. Now you can open this project in your browser and enjoy playing with it.

This is a pretty simple project to try and you can learn some JavaScript concepts through this project. So why you are waiting!!! Try this now.

I hope my article is useful. Thank you for reading!!!