In this article, we will learn how to build a 30-second countdown timer with start, stop and reset functionality. Additionally, we will learn how to trigger an alarm sound when the timer stops at the 0th count.
We will discuss the solution for building the 30-second timer in 8 steps along with the required JavaScript, HTML, and CSS code in every step.
1. Create Container for Timer in HTML
First, we need to create a <div></div> container in the index.html file to display the current countdown of the timer. In the below code, “countdown” is the parent container and the child container “countdown-number” encloses the timer count value with 30 as the default value.
In order to add JavaScript functionalities to the app, we need to first add HTML elements allowing users to trigger the JS code on the webpage. Hence to support start, stop and reset functionality we are adding 3buttons with images representing each action.
Further, we can also add CSS code for the counter container, buttons, and background image. For the CSS code, refer “Final Solution code” section at the end of this article.
Once we have the HTML code in place, it is now time to add JS functionality by embedding the main.js file into the webpage. We will create a JavaScript variable to track the value of the current count in the timer.
// variable to store count
var remainingTime = 30;
// Variable to track whether timer is running or not
var isStopped = true;
4. Function to Start Countdown in JS
To implement start functionality in the countdown timer, first, we assign the selected DOM with the countdown HTML container to a variable. Next, we will create “startTimer” JS function which only executes if “isStopped” value is true, to avoid multiple setInterval() calls when the timer is already running.
To display the timer count, we need to assign “countContainer” innerHTML property with the count value, which ensures the inner HTML of the selected DOM element contains the timer count value.
By using setInterval() ensures renderTime() function is executed every 1 second. The renderTimer() function ensures that “remainingTime” variable is decremented and displayed on screen.
In the case of timeout, the setInterval() timer is cleared, and the “remainingTime” is reset to 30.
// Select Countdown container
const countContainer = document.getElementById("countdown-number");
// function to display time
const renderTime = () => {
// decement time
remainingTime -= 1;
// render count on the screen
countContainer.innerHTML = remainingTime;
// timeout on zero
if (remainingTime === 0) {
isStopped = true;
clearInterval(timer);
remainingTime = 30;
}
};
// Function to start Timer
const startTimer = () => {
if (isStopped) {
isStopped = false;
countContainer.innerHTML = remainingTime;
timer = setInterval(renderTime, 1000);
}
};
5. Function to Stop Countdown in JS
We define stopTimer() function which performs pause functionality for the timer by using clearInterval() on the timer variable which has the id of the timer triggered earlier by setInterval() call.
// Function to stop Timer
const stopTimer = () => {
isStopped = true;
if (timer) {
clearInterval(timer);
}
};
6. Function to Reset Countdown in JS
For the reset funtionality, in addition to clearInterval(), we need to reassign the “remainingTime” variable with the 30 default value and display it on screen using “countContainer.innerHTML”.
7. Assigning function as onclick() event for button
The countdown timer is non-functional for the user despite having implemented all JavaScript functionality along with HTML + CSS webpage.
In order to make timer operations, we need to allow users to trigger functionalities from the screen. We accomplish that by assigning the Button DOM element with the respective JavaScript function.
In the below code we assign the start button with startTimer(), reset button with resetTimer, and stop button with stopTime. Learn more about JavaScript events from javatpoint.com/javascript-events.
In the final step to make the countdown timer imitate a real timer, we will be adding an alarm sound on timeout.
First, we need to add a <audio></audio> HTML 5 tag to index.html, even though it doesn’t add anything on the screen, it enables javascript to embed an audio file.
<audio id="timeout_audio"></audio>
Once we have the HTML5 audio element, we need to load the audio file using JavaScript code. It is accomplished by selecting the audio HTML5 element using JS DOM selector before assigning the source URL of the audio file and loading it.
Next in renderTime() function, we play the audio file using play() on audio HTML5 element on timeout. Read more about HTML5 Audio tag from developer.mozilla.org/HTML/Element/audio.
// Select timeout Audio element
const timeoutAudio = document.getElementById("timeout_audio");
// Initialize timeout sound
timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
timeoutAudio.load();
// Update render Time with alarm audio on timeout
const renderTime = () => {
remainingTime -= 1;
countContainer.innerHTML = remainingTime;
// timeout on zero
if (remainingTime === 0) {
isStopped = true;
clearInterval(timer);
// Play audio on timeout
timeoutAudio.play();
remainingTime = 30;
}
};
