How to create a countdown timer in Javascript

When learning how to use Javascript, not everything will feel very easy at first. Especially true that is, when it comes to certain built-in methods or creating arrays from nodelists and how to create new functions. Working on my last project, I wanted to create a countdown timer in Javascript. With that, I was able to give my browser game a “game over” state and set things up for a reset of everything.

How to create a countdown timer in Javascript

In order to code a timer in Javascript, we first of all need to create an HTML element, which displays said timer on my website.

<h2 class="text-center timer"></h2>

Since I am using Bootstrap, I give my h2 tag the class text-center. Other than that, I am giving it the timer class, which I will utilize later on.

Now comes the actual Javascript to create the countdown timer:

var timer = document.querySelector(".timer"); //select timer in HTML

var counter = 100;

function timerStart() {
    var interval = setInterval(() => {
        timer.innerHTML = counter + " seconds left";
        if (counter < 1) {
            // the timer has reached zero or game Over
            timer.innerHTML = "0 seconds left";
            clearInterval(interval);
        } else {
            counter--;
        }
    }, 1000);
};

In the first line, I am creating a variable called “timer”, in which I select the previously created HTML element by its timer class.

Then, I created a counter variable, which will represent my seconds left. You could also declare this variable within the function scope, in my game I had to however utilize the global scope for it.

As you can see, next up is the timerStart() function. In order to create a timer, I needed an interval:

var interval = setInterval(() => { 

//here goes the function, which will be checked every 1000ms

}, 1000);

That did the trick.

For the content of my interval, I chose following code to be checked every 1000ms:

timer.innerHTML = counter + " seconds left";
if (counter < 1) {
        clearInterval(interval);
        timer.innerHTML = "0 seconds left"; 
        
} else {
        counter--; 
};

Here is where I am utilizing the previously created variable “timer”. The first thing I do is display the remaining time, which follows the value I assigned to counter.

Next I am using an if statement to execute as soon as the counter hits 0. First off, the clearInterval(interval) method stops the interval, this avoids the counter to reduce below 0. Just in case I reduced the number below 0(maybe by reducing counter by more than 1), I set the timer to display 0 seconds. With the else statement, I am reducing the counter by 1, whenever the counter is not below 1.

Please note, that this last code, will be executed every 1000ms, or every second, until the timer reaches below 1.

Conclusion

Timers and their executed code an be very confusing at times, especially taking into consideration, that said code will execute every time in the specified interval. Especially with variable.classList.toggle() it might create a bit of chaos, so be careful. However, Javascript intervals are really useful, when it comes to executing code repeatedly for a certain period of time. May it be a poison status in role playing games, or just a classical countdown timer for a workout.

Feel free to read more on timeouts or intervals on the official MDN documentation!