Step-by-Step Guide to Creating a Dynamic Countdown Timer in JavaScript

Introduction:

Countdown timers can be a useful tool for creating a sense of urgency and excitement for an upcoming event or promotion. In this tutorial, we will show you how to create a dynamic countdown timer using JavaScript. You will learn how to calculate the time remaining until a specific date, and display the result in days, hours, minutes, and seconds. We will also show you how to handle the countdown expiration and display a message when the time is up.

Step 1: Set the countdown date

The first step is to set the date that you want the countdown timer to count down to. This can be any date in the future, and you can set it using the JavaScript Date object. Here is an example of how to set the countdown date to January 6th, 2023 at 3:37pm:

var countDownDate = new Date('Jan 6, 2023 15:37:25').getTime();

Step 2: Set the countdown interval

Next, we need to create a function that will be called at regular intervals to update the countdown timer. We can use the setInterval() function to do this. The setInterval() function takes two arguments: a callback function, and a time interval in milliseconds. In this example, we will call the updateCountdown() function every 1000 milliseconds (1 second):

var x = setInterval(function () {
  updateCountdown();
}, 1000);

Step 3: Calculate the time remaining

Inside the updateCountdown() function, we need to calculate the time remaining until the countdown date. We can do this by subtracting the current date and time (obtained using the JavaScript Date object) from the countdown date. We can then use this difference to calculate the time remaining in days, hours, minutes, and seconds.

Here is an example of how to do this:

// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and 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);

Step 4: Display the countdown timer

Now that we have calculated the time remaining, we can use this information to update the countdown timer display. We can use the innerText or innerHTML properties of an HTML element to set the text content of the element. In this example, we are using the innerText property to set the text content of an element with the id "app":

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

Step 5: Handle countdown expiration

Finally, we need to handle the case where the countdown date has passed. When the distance between the current date and the countdown date is less than zero

Complete Code :

// Set the date we're counting down to

var countDownDate = new Date('Jan 6, 2023 15:37:25').getTime();

// Update the count down every 1 second

var x = setInterval(function () {

  // Get today's date and time

  var now = new Date().getTime();

  // Find the distance between now and 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('app').innerText = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

  // If the count down is over, write some text

  if (distance < 0) {

    clearInterval(x);

    document.getElementById('app').innerHTML = 'EXPIRED';

  }

}, 1000);

Sample : https://stackblitz.com/edit/js-g14thv?file=index.js,index.html