April 11, 2023

How to Create a Countdown Timer Using JavaScript

By Krishnaa JavaScript Questions 0 Comments

Creating a countdown timer using JavaScript is a common requirement for many web applications. A countdown timer is useful in situations where you need to display a time-limited offer or when you need to countdown to a specific event. In this tutorial, you’ll learn how to create a simple countdown timer using JavaScript.

Here are the steps to create a countdown timer using JavaScript:

Create an HTML element to display the timer.

Get the current date and time using the Date() constructor.
Set the target date and time for the countdown timer.
Calculate the difference between the target date and time and the current date and time.

Update the countdown timer every second using the setInterval() function.

Let’s get started.

Step 1: Create an HTML element to display the timer.

In this step, you need to create an HTML element where the countdown timer will be displayed. You can create a simple <div> element with an id attribute to uniquely identify the element. For example:

//Element where timer will be shown
<div id="countdown-timer"></div>

Step 2: Get the current date and time using the Date() constructor.

In this step, you need to get the current date and time using the Date() constructor. The Date() constructor creates a new Date object with the current date and time. You can use this object to perform various date and time operations. For example:

//Date Object for current date and time
let now = new Date();

Step 3: Set the target date and time for the countdown timer.

In this step, you need to set the target date and time for the countdown timer. You can set the target date and time using the Date() constructor or by parsing a string representation of the date and time. For example:

//Date Object for target date and time
let targetDate = new Date('2023-12-31T23:59:59');

Step 4: Calculate the difference between the target date and time and the current date and time.

In this step, you need to calculate the difference between the target date and time and the current date and time. You can calculate the difference using the getTime() method, which returns the number of milliseconds since January 1, 1970. For example:

//Getting time difference
let timeDiff = targetDate.getTime() - now.getTime();

Step 5: Update the countdown timer every second using the setInterval() function.

In this step, you need to update the countdown timer every second using the setInterval() function. The setInterval() function executes a function at a specified interval (in milliseconds). For example:

let timerInterval = setInterval(function() {
  let seconds = Math.floor(timeDiff / 1000);
  let minutes = Math.floor(seconds / 60);
  let hours = Math.floor(minutes / 60);
  let days = Math.floor(hours / 24);

  hours %= 24;
  minutes %= 60;
  seconds %= 60;

  document.getElementById('countdown-timer').innerHTML = days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds';

  if (timeDiff <= 0) {
    clearInterval(timerInterval);
    document.getElementById('countdown-timer').innerHTML = 'EXPIRED';
  }

  timeDiff -= 1000;
}, 1000);

In the code above, we use the Math.floor() function to calculate the number of days, hours, minutes, and seconds remaining. We then update the countdown timer display using the innerHTML property. Finally, we check if the countdown timer has expired and clear the interval if necessary.

And that’s it! You now have a simple countdown

Complete Javascript Code:

let now = new Date();

let targetDate = new Date('2023-12-31T23:59:59');

let timeDiff = targetDate.getTime() - now.getTime();

let timerInterval = setInterval(function() {
  let seconds = Math.floor(timeDiff / 1000);
  let minutes = Math.floor(seconds / 60);
  let hours = Math.floor(minutes / 60);
  let days = Math.floor(hours / 24);

  hours %= 24;
  minutes %= 60;
  seconds %= 60;

  document.getElementById('countdown-timer').innerHTML = days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds';

  if (timeDiff <= 0) {
    clearInterval(timerInterval);
    document.getElementById('countdown-timer').innerHTML = 'EXPIRED';
  }

  timeDiff -= 1000;
}, 1000);

You May Also Like: