DEV Community

Cover image for Vanilla JavaScript Countdown
Chris Bongers
Chris Bongers

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

Vanilla JavaScript Countdown

Yesterday we made a timer function in JavaScript. Today we are going to convert this in a countdown timer.
This means we have a starting time of two minutes and will countdown to zero when we stop the timer and alert the user.

HTML Structure

This is actually the same as yesterday, but we show the two minute mark up front.

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

CSS Setup

For the CSS we made no changes this can stay the same

.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

JavaScript Countdown

As for our JavaScript, we are still using the button to start the countdown and, for the sake of the exercise, keeping the same function name.

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

startTimer = () => {
  // Firs twe start by clearing the existing timer, in case of a restart
  clearInterval(timerInterval);
  // Then we set the variables
  var second = 0,
    minute = 2,
    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 =
      (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second);

    // We check if the second equals 0
    if (second == 0) {
      // If so, we remove a minute and reset our seconds to 60
      if (minute === 0) {
        // Full done
        clearInterval(timerInterval);
        alert('Time is up!');
      }
      minute--;
      second = 60;
    }
    second--;
  }, 1000);
};
Enter fullscreen mode Exit fullscreen mode

So much like the timer we have an interval function, but instead of adding we start with some values up front:

var second = 0,
  minute = 2;
Enter fullscreen mode Exit fullscreen mode

Then where we would normally plus this we now detract them:

minute--;
second--;
Enter fullscreen mode Exit fullscreen mode

And we implemented a check if we hit zero, we need to reset the seconds and if the minute is zero we need to stop the whole thing.

if (second == 0) {
  // If so, we remove a minute and reset our seconds to 60
  if (minute === 0) {
    // Fully done!
    clearInterval(timerInterval);
    alert('Time is up!');
  }
  minute--;
  second = 60;
}
Enter fullscreen mode Exit fullscreen mode

That's it; we now changed our timer into a countdown!

See it in action on this Codepen.

See the Pen Vanilla JavaScript Countdown 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)