Vanilla JavaScript Timer

— 10 minute read

Today we'll be looking into making a timer in JavaScript; A timer can be used in many ways for several purposes. In my case, it is a game timer. It will start once the game starts and keeps track of how long it takes someone to solve something.

Let's dive into it and make our first JavaScript timer.

Check out this countdown in JavaScript!

HTML Structure permalink

<div class="container">
<div id="timer">00:00</div>
<button onclick="startTimer()">Start</button>
</div>

We add a container for centering purposes, inside we add our timer with the default of 00:00 so people can see what they are expecting. And then a button that will start the timer for now.

CSS Structure permalink

As for the CSS it's a pure visual game in this project, nothing magic going on.

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
background: #e9c46a;
}
#timer {
margin-bottom: 25px;
font-size: 3rem;
font-weight: bold;
color: #2a9d8f;
&.odd
{
color: #264653;
}
}
button {
border-radius: 5px;
display: inline-block;
border: none;
padding: 1rem 2rem;
margin: 0;
text-decoration: none;
background: #e76f51;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
&:hover
{
background: #f4a261;
}
}

The central part here is the container, which uses the flex centering technique.

JavaScript Timer permalink

Now on to the fun part, the JavaScript to making the timer work.

var timer = document.getElementById('timer');
var timerInterval;

We start our JavaScript by defining the timer element and our interval for the timer.

Next, we are going to define the button's function we called startTimer.

For this we are using the Arrow functions.

startTimer = () => {
// Firs twe start by clearing the existing timer, in case of a restart
clearInterval(timerInterval);
// Then we clear the variables
var second = 0,
minute = 0,
hour = 0,
odd = false;

// Next we set a interval every 1000 ms
timerInterval = setInterval(function() {
// check if we are odd or even and append class to timer
odd = !odd;
if (odd) {
timer.classList.add('odd');
} else {
timer.classList.remove('odd');
}

// We set the timer text to include a two digit representation
timer.innerHTML =
(hour ? hour + ':' : '') +
(minute < 10 ? '0' + minute : minute) +
':' +
(second < 10 ? '0' + second : second);

// Next we add a new second since one second is passed
second++;

// We check if the second equals 60 "one minute"
if (second == 60) {
// If so, we add a minute and reset our seconds to 0
minute++;
second = 0;
}

// If we hit 60 minutes "one hour" we reset the minutes and plus an hour
if (minute == 60) {
hour++;
minute = 0;
}
}, 1000);
};

I've written comments in between the code snippet to make clear what happens on each line.

The important part is we are use setInterval to recall the function every 1000ms. Inside this, we manually add seconds and minutes and update the innerHTML of our timer div.

I've also included a fun part which will change the color of our timer every second.

// check if we are odd or even and append class to timer
odd = !odd;
if (odd) {
timer.classList.add('odd');
} else {
timer.classList.remove('odd');
}

You can find my article about using the classList in JavaScript here.

As usual, you can find the demo timer on Codepen.

See the Pen Vanilla JavaScript Timer by Chris Bongers (@rebelchris) on CodePen.

Shorthand Explanation permalink

(EDIT) I got a comment asking what the following part does:

// We set the timer text to include a two digit representation
timer.innerHTML =
(hour ? hour + ':' : '') +
(minute < 10 ? '0' + minute : minute) +
':' +
(second < 10 ? '0' + second : second);

This is using the JavaScript shorthand properties and is basicly the same as doing the following:

var string = '';
if (hour) {
string += hour + ':';
}
if (minute < 10) {
// Number is 0-9 so we want to prefix with a zero
string += '0' + minute;
} else {
// Number is 10 or more so no prefix needed
string += minute;
}
if (second < 10) {
// Number is 0-9 so we want to prefix with a zero
string += ':0' + second;
} else {
// Number is 10 or more so no prefix needed
string += ':' + second;
}
timer.innerHTML = string;

As you can see the shorthand is just way quicker in writing this down.

You can find the demonstration of the non shorthand explanation in this Codepen.

See the Pen Timer Shorthand Explanation by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter