How to Make CountDown Timer using JavaScript
Posted on March 5, 2021, 8 p.m. by Bishal ( 5779)
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will make a count down timer using JavaScript. Whether it's a launch of your new product, new feature or something else count down plays a very big role. Continue reading this blog to take a demo of the count down timer. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.
So, How we will make the countdown timer using JavaScript?
To make the countdown timer first we have to declare a variable countDownDate, the value of the variable should be the date and time of the event. For example, in this case I am taking the value as Jan 10, 2022 0:0:0 the code will look like:
var countDownDate = new Date("Jan 10, 2022 0:0:0");
to refresh the countdown timer each second we will wrap the rest of the code inside setInterval. The setInterval function repeats a given function on every given time interval (in miliseconds) in our case it will be 1000ms or 1 second. The variable countDownDate will return the time in miliseconds since 1970-01-01.
var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
// code here
}, 1000);
now we will get our current time using the date object. We will using getTime() with the date object. It will return the time in milisecond since 1970-01-01. We will use JavaScript variable now to store the data.
var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
}, 1000);
now we will subtract the current time from the time of the event and store it in a variable TimeLeft.
var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
}, 1000);
Now we will calculate the days, hours, mins, seconds left using the JavaScript Math.floor() function. The Math.floor() function returns the largest integer less than or equal to a given number.
var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
var days = Math.floor(TimeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((TimeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((TimeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((TimeLeft % (1000 * 60)) / 1000);
}, 1000);
Now, as we have got the date, hours, minute and second in JavaScript variables. We will use JavaScript .innerHTML to return the value in HTML.
Demo
Count Down To New Year 2021
Step by step guide to create a countdown timer using JavaScript:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Count Down timer using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
-
Create a file
script.js -
Link External JavaScript file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<script src="script.js"></script>
Now add the JavaScript code to the script.js file:
var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
var days = Math.floor(TimeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((TimeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((TimeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((TimeLeft % (1000 * 60)) / 1000);
document.getElementById("daysLeft").innerHTML = days + "d ";
document.getElementById("hoursLeft").innerHTML = + hours + "h ";
document.getElementById("minutesLeft").innerHTML = + minutes + "m ";
document.getElementById("secondsLeft").innerHTML = + seconds + "s";
}, 1000);
-
Create a file
style.css -
Link External CSS file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link href="style.css" rel="stylesheet">
Now add some CSS code to the style.css file:
.cwb-time {
text-align: center;
color: #FFCC70;
font-size: 40px;
letter-spacing: 7px;
}
.count {
display:flex;
flex-direction: row;
list-style: none;
width:90%;
height:40px;
margin: 0 auto;
justify-content: center;
}
.count li {
text-align: center;
}
@media (max-width: 750px) {
.count li {
display: flex;
}
}
Source Code
1) HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Count Down To New Year using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="cwb-time">
<h2>Count Down To New Year 2021 <h2>
<ul class="count">
<li><p id="daysLeft"></p></li>
<li><p id="hoursLeft"></p></li>
<li><p id="minutesLeft"></p></li>
<li><p id="secondsLeft"></p></li>
</ul>
</div>
</body>
</html>
2) CSS Code:
.cwb-time {
text-align: center;
color: #FFCC70;
font-size: 40px;
letter-spacing: 7px;
}
.count {
display:flex;
flex-direction: row;
list-style: none;
width:90%;
height:40px;
margin: 0 auto;
justify-content: center;
}
.count li {
text-align: center;
}
@media (max-width: 750px) {
.count li {
display: flex;
}
}
3) JavaScript Code:
var countDownDate = new Date("Jan 10, 2022 0:0:0");
var update = setInterval(function() {
var now = new Date().getTime();
var TimeLeft = countDownDate - now;
var days = Math.floor(TimeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((TimeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((TimeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((TimeLeft % (1000 * 60)) / 1000);
document.getElementById("daysLeft").innerHTML = days + "d ";
document.getElementById("hoursLeft").innerHTML = + hours + "h ";
document.getElementById("minutesLeft").innerHTML = + minutes + "m ";
document.getElementById("secondsLeft").innerHTML = + seconds + "s";
}, 1000);