Building a simple countdown timer is easy with JavaScript's native timing events. You can read more about those in this article.
Building the countdown timer
Start by declaring an empty function called startCountdown
that takes seconds
as an argument:
function startCountdown(seconds) {
};
We want to keep track of the seconds that pass once the timer is started, so use let
to declare a variable called counter
and set it equal to seconds
:
function startCountdown(seconds) {
let counter = seconds;
}
Remember that it's best practice to save your timing event function to a variable. This makes it much easier to stop the timer later. Create a variable called interval
and set it equal to setInterval()
:
function startCountdown(seconds) {
let counter = seconds;
const interval = setInterval();
}
You can pass a function directly to setInterval
, so let's pass it an empty arrow function as the first argument. Also, we want the function to run every second, so pass 1000 as the second argument:
function startCountdown(seconds) {
let counter = seconds;
const interval = setInterval(() => {
}, 1000);
}
Now the function we passed to setInterval
will run every second. Every time it runs, we want to log the current value of counter
to the console before deincrementing it:
function startCountdown(seconds) {
let counter = seconds;
const interval = setInterval(() => {
console.log(counter);
counter--;
}, 1000);
}
Now if you run the function, you'll see that it works, but doesn't stop once counter
is less than 0:
startCountdown(5);
// Console Output //
// 5
// 4
// 3
// 2
// 1
// 0
// -1
// -2
To fix this, first write an if
statement that executes when counter
is less than 0:
function startCountdown(seconds) {
let counter = seconds;
const interval = setInterval(() => {
console.log(counter);
counter--;
if (counter < 0 ) {
}
}, 1000);
}
Then inside the if
statement, clear the interval
with clearInterval
and log an alarm sound string to the console:
function startCountdown(seconds) {
let counter = seconds;
const interval = setInterval(() => {
console.log(counter);
counter--;
if (counter < 0 ) {
clearInterval(interval);
console.log('Ding!');
}
}, 1000);
}
Execution
Now when you start the timer, you should see the following:
startCountdown(5);
// Console Output //
// 5
// 4
// 3
// 2
// 1
// 0
// Ding!