In this article you will learn how to create Countdown Timer using HTML CSS and JavaScript. You can create this Javascript Countdown Timer very easily. Earlier I have shared many more types of digital clock, timer tutorials. If you want to know more about JavaScript then you can check out those tutorials.
Countdown Timer in JavaScript
Countdown timers are ubiquitous in applications ranging from cooking to project management to event scheduling. They provide a visual representation of the time remaining until a certain event occurs.
In this article, we’ll explore how to create a simple countdown timer using JavaScript, HTML, and CSS.
See the Pen countdown timer javascript by raj template (@raj-template) on CodePen.
As you can see this is a simple Countdown Timer design that I made with JavaScript. There are 4 boxes where you can see the data of day, hour, minute and second. Since this is a simple design, time cannot be input here.
Countdown Timer in HTML CSS JavaScript
If you want to make this Countdown Timer then you can follow the tutorial below. If you want the source code, you can use the download button below the article. Now let’s create this Countdown Timer using JavaScript.
1. HTML code for Countdown Timer
Let’s start by setting up the HTML structure for our countdown timer. Create a new HTML file and add the following code:
<div id="timer"></div>2. Design the Countdown Timer using CSS
Create a new file named styles.css and add the following CSS code:
/* Center aligns text and elements within the body */
body {
text-align: center;
padding: 100px 60px; /* Adds padding to the top and bottom of the body */
background: #90cbf3; /* Sets the background color of the body */
font-family: sans-serif; /* Specifies the font family for the text */
font-weight: lighter; /* Sets the font weight to lighter */
}
/* Styles for the countdown timer */
#timer {
font-size: 3em; /* Sets the font size of the timer text */
font-weight: 100; /* Sets the font weight to 100 */
color: white; /* Sets the text color to white */
padding: 20px; /* Adds padding around the timer */
width: 700px; /* Sets the width of the timer */
color: white; /* Sets the text color to white */
}
/* Styles for the individual timer elements (days, hours, minutes, seconds) */
#timer div {
display: inline-block; /* Displays timer elements inline */
min-width: 90px; /* Sets the minimum width of each timer element */
padding: 15px; /* Adds padding around each timer element */
background: #020b43; /* Sets the background color of each timer element */
border-radius: 10px; /* Rounds the corners of each timer element */
border: 2px solid #030d52; /* Sets the border of each timer element */
margin: 15px; /* Adds margin around each timer element */
}
/* Styles for the span element within each timer element */
#timer div span {
color: #ffffff; /* Sets the text color to white */
display: block; /* Displays the span element as a block */
margin-top: 15px; /* Adds margin to the top of the span element */
font-size: .35em; /* Sets the font size of the span element */
font-weight: 400; /* Sets the font weight to 400 */
}
3. JavaScript Code
Now, let’s implement the countdown timer functionality. Create a new file named script.js and add the following JavaScript code:
// This function calculates the time difference between a future date and the current date,
function updateTimer() {
// Define the future date and time to countdown to
future = Date.parse("jun 12, 2024 01:30:00");
// Get the current date and time
now = new Date();
// Calculate the difference between the future and current dates in milliseconds
diff = future - now;
// Calculate the number of days, hours, minutes, and seconds remaining
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));
mins = Math.floor(diff / (1000 * 60));
secs = Math.floor(diff / 1000);
// Extract days, hours, minutes, and seconds in the appropriate format
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
// Update the HTML content to display the countdown timer
document.getElementById("timer")
.innerHTML =
'<div>' + d + '<span>Days</span></div>' +
'<div>' + h + '<span>Hours</span></div>' +
'<div>' + m + '<span>Minutes</span></div>' +
'<div>' + s + '<span>Seconds</span></div>';
}
// Call the updateTimer function every second (1000 milliseconds)
setInterval('updateTimer()', 1000);
In this tutorial, we’ve built a simple countdown timer using JavaScript, HTML, and CSS. Experiment with different options and functionalities to create countdown timers tailored to your specific needs. Happy coding!