DEV Community 👩‍💻👨‍💻

Cover image for Vanilla JavaScript Timer
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Vanilla JavaScript Timer

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.

HTML Structure

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

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

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

JavaScript Timer

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

var timer = document.getElementById('timer');
var timerInterval;
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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');
}
Enter fullscreen mode Exit fullscreen mode

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

As usual, you can find a demo on this Codepen.

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

Thank you for reading, and let's connect!

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

Top comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now