How to Create a countdown timer in JS | MyCodeHive

- A countdown timer typically prepares users for an upcoming event of service. adding this to your site make it look professional and give an attractive avenue for your users. so in this tutorial, am going to teach you how to make a countdown timer using simple html and js. Lets start shall we?

Step 1: Create your working environment.

Make a folder to keep your files for easy navigation.

Step 2: Create a file index.html

This will be the first page on your site and will house the countdown timer.

Step 3: Start the html.

Add the following code in to the index.html file in a text editor.

<html>

<head>

<title>Countdown Timer</title>

<script src="count.js" type="text/javascript"></script>

</head>

<body>

<center>

<h1>

My First countdown timer</h1>

<br /> Time till next Page Update ▼

<hr />

<div id="countdown1" style="font-size: 40px;">

375d 14h 59m 52s </div>

<hr />

</center>

</body>

</html>

Step 4: Add the JS

Here we add the JavaScript file which was linked in the html code above

Copy and paste the following codes into a new file count.js in the same directory as the index.html


 //count.js file
// Set the date we're counting down to
var countDownDate = new Date("DEC 02, 2017 00:00:00").getTime();

// Update the count down every 1 second
var countdownfunction = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    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);
    
    // Output the result in an element with id="demo"
    document.getElementById("countdown1").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(countdownfunction);
        document.getElementById("countdown1").innerHTML = "EXPIRED";
    }
}, 10);

Countdown timer in js | MyCodeHive

So we're done here. Follow the instructions and run the file in your browser.
You can also add all code in the same file using the <script><script> tag. Checkout the codes below.

<html>
<head>
<script>
//count.js file
// Set the date we're counting down to
var countDownDate = new Date("DEC 02, 2017 00:00:00").getTime();

// Update the count down every 1 second
var countdownfunction = setInterval(function() {

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now an the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
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);

// Output the result in an element with id="demo"
document.getElementById("countdown1").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";

// If the count down is over, write some text
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("countdown1").innerHTML = "EXPIRED";
}
}, 10);
</script>

<title>Countdown Timer</title>


<script src="count.js" type="text/javascript"></script>
</head>

<body>

<center>
<h1>
My First countdown timer</h1>
<br /> Time till next Page Update ▼
<hr />
<div id="countdown1" style="font-size: 40px;">
375d 14h 59m 52s </div>
<hr />
</center>
</body>

</html>
Thanks you for reading. checkout other articles here on MyCodeHive Happy Coding

MyCodeHive | Free Programming Tutorials and more!

Search This Blog