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!