Counter app project for beginners

Intro

This is a beginner-level project. And I mean beginner, like if you're just learning how to use JavaScript selectors. If you've never written a line of javascript before, this is a good project to start with. I would simplify it as much as possible.

Goal

To build a basic counter app
User should be able to count with the click of the increase or decrease button

Difficulty

Beginner

Process

The HTML for this project is pretty basic. A card for the counter, the title, the number count and two buttons.

<body>
    <div class="counter-card">
        <h1>
            Counter App
        </h1>
        <div class="counter-base">
            <h2 class="count">0</h2>
            <div class="buttons">
                <button class="btn increment-button">+</button>
                <button class="btn decrement-button">-</button>
            </div>
        </div>
    </div>
</body>

I played around with the CSS a bit but I won't delve into that. You can find the CSS code file in the project repo (link at the bottom). Moving to JavaScript, the logic is to have two clickable buttons that would either increase or decrease the counter depending on which button is clicked.

So first you want to select the two buttons. I have decided to use the class selectors in this project and while it might make a difference in some cases, most times, this is just up to preference. Another thing you want to select is the count element because you would need to display whatever the current count value is on the UI. This code below basically says, "Create two variables named button and count, go into the HTML document and look for an element with a class of buttons and another with a class of count, then store them in the variables.

const button = document.querySelector(".buttons");
const count = document.querySelector(".count");

What we want next are two functions. One that would be called when the increase button is clicked, and another that would be called when the decrease button is clicked. So I created two arrow functions. You can do the same thing with the function declarations or expressions.

let counter = 0;

const incrementCounter = () => {
  counter++;
};
const decrementCounter = () => {
  counter--;
};

I also initiated the counter variable and set the initial value of the counter to zero because that's the value I want it to begin at. Notice I used the 'let' keyword because I do plan to change the value of that variable on each click. So in the end, the value of counter would be displayed in the count element.

So to explain the code, the two functions, incremementCounter and decrementCounter are two functions that I want to be called when the increase button or decrease button is called and I will put that later in an event handler, but what do these codes do? Just one thing, increase the counter value by 1 or decrease it by 1. That's all.

Lastly, we want the functions to be called when the button is clicked. So I put an event listener on the button element which I selected earlier in the code. An event listener allows you to listen for events that occur on a DOM element and then perform a certain action when that event happens. The event listener function takes two arguments; the event you're listening for, which could be a click, key down, hover, etc., and the function to be executed.

I'm going to write the function to handle the event but I'm going to write it outside of the event listener and then call it inside the event listener, just because it looks neater and more readable that way. In this case, we want the counter to increase or decrease when a button is clicked. We already put the code to do that in a function so we just want to call the appropriate function when the button is clicked.

const clickHandler = (event) => {
  const clicked = event.target;
  clicked.classList.contains("increment-button")
    ? incrementCounter()
    : decrementCounter();

  count.innerHTML = counter;
};

So in this code, I have given the event handler an appropriate name, clickHandler and I am passing the event argument which would be captured when the button is clicked. event.target gives us the specific HTML element that triggered the event and I'm storing that right away in a clicked variable because I have two buttons and I want to know which one exactly was clicked. Next is a ternary operator which is an ES6 feature. It is similar to the if...else statement. So I'm saying, "If the classList of the clicked button contains the class increment-button, execute the incrementCounter function, else, execute decrementCounter."

So that works. Another way to do this would be to put event listeners on each button but that would require writing more code as well as repeating some lines of code which you always want to avoid. The last thing to do now is attach the 'click' event listener to the button.

button && count
  ? button.addEventListener("click", clickHandler)
  : console.error("Could not find button or count element");

Here, I have put the event listener inside another ternary operator. The ternary operator is functioning as an error handler. The code would only run if button and count is true. If for any reason the button or count variables could not be initiated, it would instead return an error to the user that said elements could not be found. Otherwise, the code runs smoothly.

One thing to note is that while coding, I usually have a bunch of console logs to view the data I am working with but at this point, I have refactored the code and cleaned it all up.

I hope you had fun building this simple project with me! For the complete code, check out the project repo here.

Guess My Number Game