A countdown timer is a digital timer displayed on a website that counts down to a specific event or deadline. It can be used to build excitement and anticipation for an upcoming event, such as a product launch, a sale, or a new website launch. It can also be used to create a sense of urgency for a limited-time offer or deadline, such as a flash sale or a registration deadline for an event. Countdown timers can be designed in various styles and can include animations, sound effects, and other visual elements to make them more engaging and eye-catching.
Let’s Get Started
Getting started with this project is very easy as we will not be relying on any external libraries, just pure JavaScript.
Create an HTML Page
This is just a basic HTML page without any JavaScript added to it. You are free to design it however you like.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown Timer</title>
</head>
<body>
</body>
</html>Let’s Add Some CSS Styling
Next, let’s add some CSS styles to give the timer a nice appearance:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown Timer</title>
<style>
#countdown {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.digit-container {
border: 2px solid black;
padding: 20px;
display: inline-block;
text-align: center;
font-family: sans-serif;
width: 80px;
border-radius: 15px;
margin: 0 10px;
}
.date-num {
font-size: 3rem;
}
.date-text {
font-size: 1rem;
}
.time-sep {
font-size: 3rem;
}
</style>
</head>
<body>
</body>
</html>This CSS adds some styles to the #countdown DIV, as well as some styles for the individual digit containers, the digit numbers, the text labels, and the time separators.
Add a Container for the Countdown Timer
The countdown timer will need a container so that it can be displayed. We are going to use a DIV container for this with the ID set to countdown as highlighted in line #41.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown Timer</title>
<style>
#countdown {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.digit-container {
border: 2px solid black;
padding: 20px;
display: inline-block;
text-align: center;
font-family: sans-serif;
width: 80px;
border-radius: 15px;
margin: 0 10px;
}
.date-num {
font-size: 3rem;
}
.date-text {
font-size: 1rem;
}
.time-sep {
font-size: 3rem;
}
</style>
</head>
<body>
<div id="countdown"></div>
</body>
</html>Add the JavaScript Code
Now that we have our basic HTML completed, it is now time to finish up our project by adding the remaining JavaScript code underneath our DIV container.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown Timer</title>
<style>
#countdown {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.digit-container {
border: 2px solid black;
padding: 20px;
display: inline-block;
text-align: center;
font-family: sans-serif;
width: 80px;
border-radius: 15px;
margin: 0 10px;
}
.date-num {
font-size: 3rem;
}
.date-text {
font-size: 1rem;
}
.time-sep {
font-size: 3rem;
}
</style>
</head>
<body>
<div id="countdown"></div>
<script type="text/javascript">
// Set the target date
var targetDate = new Date("April 30, 2023 23:59:59").getTime();
// Update the countdown timer every second
var x = setInterval(function() {
// Get the current date and time
var now = new Date().getTime();
// Calculate the distance between now and the target date
var distance = targetDate - now;
// Calculate the number of days, hours, minutes and seconds left
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the countdown timer with double digits
document.getElementById("countdown").innerHTML = "<div class='digit-container'><span class='date-num'>" + addZero(days) + "</span><br /><span class='date-text'>Days</span></div> <span class='time-sep'>:</span> <div class='digit-container'><span class='date-num'>" + addZero(hours) + "</span><br /><span class='date-text'>Hours</span></div> <span class='time-sep'>:</span> <div class='digit-container'><span class='date-num'>" + addZero(minutes) + "</span><br /><span class='date-text'>Minutes</span></div> <span class='time-sep'>:</span> <div class='digit-container'><span class='date-num'>" + addZero(seconds) + "</span><br /><span class='date-text'>Seconds</span></div>";
// If the countdown is over, display "EXPIRED"
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
// Function to add a leading zero to single-digit numbers
function addZero(num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
}
</script>
</body>
</html>Our Final Project
And that’s it! You have now added a countdown timer to your website using JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Countdown Timer</title>
<style>
#countdown {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.digit-container {
border: 2px solid black;
padding: 20px;
display: inline-block;
text-align: center;
font-family: sans-serif;
width: 80px;
border-radius: 15px;
margin: 0 10px;
}
.date-num {
font-size: 3rem;
}
.date-text {
font-size: 1rem;
}
.time-sep {
font-size: 3rem;
}
</style>
</head>
<body>
<div id="countdown"></div>
<script type="text/javascript">
// Set the target date
var targetDate = new Date("April 30, 2023 23:59:59").getTime();
// Update the countdown timer every second
var x = setInterval(function() {
// Get the current date and time
var now = new Date().getTime();
// Calculate the distance between now and the target date
var distance = targetDate - now;
// Calculate the number of days, hours, minutes and seconds left
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the countdown timer with double digits
document.getElementById("countdown").innerHTML = "<div class='digit-container'><span class='date-num'>" + addZero(days) + "</span><br /><span class='date-text'>Days</span></div> <span class='time-sep'>:</span> <div class='digit-container'><span class='date-num'>" + addZero(hours) + "</span><br /><span class='date-text'>Hours</span></div> <span class='time-sep'>:</span> <div class='digit-container'><span class='date-num'>" + addZero(minutes) + "</span><br /><span class='date-text'>Minutes</span></div> <span class='time-sep'>:</span> <div class='digit-container'><span class='date-num'>" + addZero(seconds) + "</span><br /><span class='date-text'>Seconds</span></div>";
// If the countdown is over, display "EXPIRED"
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
// Function to add a leading zero to single-digit numbers
function addZero(num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
}
</script>
</body>
</html>Now that we have our countdown timer working, we can customize it to fit our needs. Here are a few ways to modify:
Change the Target Date and Time
The first thing you might want to do is change the target date and time of the countdown. You can do this by modifying the targetDate variable in the JavaScript code. Just replace the date string with the desired date and time in the format “Month day, year hours:minutes:seconds“. For example, if you want to countdown to December 31st, 2023 at 11:59:59 PM, you can change the targetDate variable to:
var targetDate = new Date("December 31, 2023 23:59:59").getTime();Customize the Appearance
You can customize the appearance of the countdown timer by modifying the CSS styles. For example, you can change the font family, font size, and color of the countdown timer text. Here’s an example CSS code to change the font family to Arial, font size to 24px, and text color to red:
#countdown {
font-family: Arial;
font-size: 24px;
color: red;
}Add Sound Effects
You can add sound or animation effects to the countdown timer to make it more engaging. For example, you can add a sound effect when the countdown reaches zero. To add sound to your countdown timer, you can use the HTML5 Audio API to play a sound file at a specific time. Here’s an example of how you can modify the previous code to play a sound file when the countdown reaches zero:
First, add an audio element to your HTML code, like this:
<audio id="countdown-sound" src="path/to/soundfile.mp3"></audio>
Next, add the following code after the document.getElementById(“countdown”).innerHTML = “EXPIRED”; line within the JavaScript:
document.getElementById("countdown-sound").play();This code checks if the distance is less than zero, which means the countdown has ended, and stops the interval timer. It also changes the innerHTML of the countdown element to “EXPIRED”, and plays the sound file using the play() method on the audio element.
Note that the src attribute of the audio element should point to the location of your sound file.
