Vanilla JavaScript Countdown

— 8 minute read

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 permalink

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>

CSS Setup permalink

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;
}
}

JavaScript Countdown permalink

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);
};

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;

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

minute--;
second--;

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;
}

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! permalink

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