10 Small JavaScript Apps

Part 4 — Counter

In this post I will not focus on the HTML or CSS but rather just the JS. there are many ways to style and set this up but its the JS I want to focus on today.

Let’s take a quick look at the HTML as there is a little bit of setup to do there to understand what we will be working with in our JS.

Let’s just focus on the main section. The important stuff is the span with an Id of value and the div with three buttons in it. We will be using the Id and Class names in our JS.

Okay, JavaScript time…

Right now with a bunch of CSS styling this is what we have…

Looks nice but the css is not important at all for the functionality.

We need JS to make this thing actually work.

This is so simple you’re gonna love it, such a fun little exercise to show off some JS in a technical interview etc…

Okay so first off we need to set a variable with an initial count that we will change depending on what button is clicked, so for this we will use let.

let count = 0;

Simple!

Now we want to select the buttons and we can do this by selecting each one individually with a query selector or we can select them all using our span id and button class like this…

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

Cool right!?

you can check if this is working by just console logging the btns and you should see all three in the console.

Alright, now let's use a forEach method…

btns.forEach(function (btn) {

add an event listener…

btn.addEventListener("click", function (e) {

so now we know we have access to the current target and you can console log the e.currentTarget and you will see which button you clicked!

Sweet! we now know which button we are clicking, super helpful!

let’s get a little more specific by adding .classList to that and we will see all the classes that each element has. Notice that they all have the class btn.

lets assign the console log of e.currentTarget.classList to a variable

const styles = e.currentTarget.classList;

Great!

Okay, time for some if statements…

if(styles.contains(""))

Using our new variable of styles now we can add in decrease, increase etc…

So let’s start with our decrease

if (styles.contains("decrease")) {
  count--;
}

So if I click decrease subtract one each time…

} else if (styles.contains("increase")) {
  count++;
}

Then…

} else {
  count = 0;
}
value.textContent = count

So if I click decrease, subtract by one each time if I click increase add one each time and if I click reset, then bring the count back to zero.

Don’t forget to change the counter visually with value.textContent = count so that we can actually see the count changing.

Now that we have a working counter we could stop right there, but let’s just make it a little bit more visually appealing and say that when the number is less than 0 change the color to red, when the number is greater than 0 change the color to green and when the number is at 0 stay black.

This will need some more if statements…

if (count > 0) {
value.style.color = "green";
}
if (count < 0) {
value.style.color = "red";
}
if (count === 0) {
value.style.color = "#222";
}

Don’t forget that at the end of this we need to change that text content.

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 {
   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;
  });
});

This is basically the nuts and bolts right here. Not forgetting to set an initial variable of count at the top and then your query selectors.

I attached my codepen bellow so you can see it in action!!

Thanks for reading and I hope you enjoyed this post!

See ya soon!