Tutorial

How To Build a Countdown Timer in JavaScript

Updated on October 21, 2020

JavaScript

joshtronic and Ceora Ford

How To Build a Countdown Timer in JavaScript

Introduction

Countdown timers can serve many purposes. They can communicate to a user how long they’ve been doing something or how much time until some event happens, like the launch of your new website. In the sales and marketing context, they can create a sense of urgency to encourage conversion.

In this tutorial, you will create a countdown timer in pure JavaScript.

Prerequisites

To complete this tutorial, you will need the following:

The latest version of Node installed on your machine. To install Node, follow the steps outlined in this How To Install Node.js tutorial.
A basic understanding of coding in JavaScript which you can find in this series called How to Code in JavaScript

Step 1 — Getting Started

Since you’ll be using JavaScript in it’s purest form, without any front-end libraries, there’s not much bootstrapping that has to be done.

Create an index.html file with the standard boilerplate HTML starter code:

index.html

<!DOCTYPE html>
<html>
  <body>

  </body>
</html>

Add a <div> within the <body>. The <div> should have an id set to "countdown":

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
  </body>
</html>

Later on, the JavaScript countdown timer’s output will be placed within this <div>. Below your <div>, include <script> tags. Your <script> tags will house your JavaScript code:

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>

    </script>
  </body>
</html>

With your HTML in place, you’re ready to move on to coding your countdown timer with JavaScript. In the next step, you’ll calculate the time remaining for the countdown.

Step 2 — Calculating the Time Remaining

Before calculating the time remaining, create a function called countdownTimer:

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>
      function countdownTimer() {
    
      }
    </script>
  </body>
</html>

To calculate the time remaining, you need to find the difference between the current time and the time that your countdown timer will expire. Within the countdownTimer function, create a constant variable called difference. In the code snippet below, difference will be set equal to the difference between New Year’s Day in 2021 and the current date:

index.html

function countdownTimer() {
  const difference = +new Date("2021-01-01") - +new Date();
}

new Date creates a date object. The + before the new Date is shorthand to tell JavaScript to cast the object as an integer, which gives you the object’s Unix timestamp represented as microseconds since the epoch.

Below the difference constant variable, create a variable called remaining. remaining will be set equal to a "Time's up!" message:

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";
}

When your time runs out and the countdown timer ends, the remaining message will be displayed.

The time remaining on your countdown timer is all set. The remaining time (the difference) is calculated in milliseconds. Now you need to format the time remaining into days, hours, minutes, and seconds.

Step 3 — Formatting to Days, Hours, Minutes, and Seconds

With the total number of milliseconds until the countdown time expires calculated, you need to convert the number of milliseconds to something more human readable. Before you do this, you will need to create an if statement:

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";
  
  if (difference > 0) {

  }
}

If difference is greater than 0 (if it’s not New Year’s day), the code to follow will be executed.

Now you can convert milliseconds to days, hours, minutes, and seconds. To do this, you will need to do some division, multiplication and use the modulus % operator.

Create an object with the constant variable name parts. The keys in the object should be days, hours, minutes, and seconds, and the corresponding values should match the equation you’ll need to convert milliseconds to the appropriate unit of time. The code snippet below will show these equations:

index.html

if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };
}

The Math.floor function is used to round the numbers down. With this in place, you are able to drop the remainder to get the whole number value for each unit of time.

The object full of the days, hours, minutes, and seconds remaining will need to be formatted into a string. To do that, reassign remaining and set it equal to an array of the keys in parts. Use the Object.keys method to do this:

index.html

if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };

  remaining = Object.keys(parts)
}

remaining is now set equal to an array of the keys in parts. Since remaining is now an array, you can use the .map() method. The .map() method will iterate over each item in remaining and allow you to perform a function on each item.

index.html


if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };

  remaining = Object.keys(parts).map(part => {

  })
}

You want to convert each item to a string. Each unit of time should follow this format: “X days.” part matches the unit of time. To grab the actual number, you will need to use bracket notation with the parts object. Create an if statement that checks if there is no number for the corresponding unit of time. If there is no number, add a return statement:

index.html

remaining = Object.keys(parts).map(part => {
  if (!parts[part]) return;
})

If there is no corresponding number, the .map() method will move on to the next unit of time and check again.

If there is a number, return the number along with the unit of time. Remember, it should follow the “X days” format:

index.html

remaining = Object.keys(parts).map(part => {
  if (!parts[part]) return;
  return `${parts[part]} ${part}`;
})

${parts[part]} will return the number while ${part} will return the unit of time. Now, remaining is an array of days, hours, minutes, and seconds. This array needs to be a string. Each item in remaining should be seperated by a space. Use the .join(" ") method to accomplish this:

index.html

remaining = Object.keys(parts).map(part => {
  return `${parts[part]} ${part}`;
}).join(" ");

Right now, your countdownTimer() function will look like this:

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }
}

The time remaining is now formatted into a string and units of time that are understandable. However, the time remaining will not display on your page yet. To accomplish this, you’ll need to use DOM manipulation.

Step 4 — Showing the Time Remaining on the Page

With the time parts assembled into a string, you can update your <div> to contain the value. To do this, you’ll need to use DOM Manipulation.

Within your countdownTimer() function and below your if statment, use the getElementById DOM selector to reference the <div> with an id of "countdown":

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }

  document.getElementById("countdown")
}

To alter the contents of this <div>, you will also need to use the .innerHTML property attached to document.getElementById("countdown"). Set this DOM selector equal to remaining:

index.html

document.getElementById("countdown").innerHTML = remaining;

Now, the countdownTimer() function is complete. Call the function for it to run:

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }

  document.getElementById("countdown").innerHTML = remaining;
}

countDownTimer();

Now your countdown time is ready to be displayed on your HTML page. You may notice that the time doesn’t update. There’s still more code to add to make sure that the countdown timer automatically updates.

Step 5 — Updating the Timer Automatically

Thus far, you’ve calculated the time difference between the current time and the time that your countdown expires. You’ve broken that time into hours, minutes, and seconds, and then updated the page with the time remaining. However, the timer will not currently update automatically.

Without additional logic to update the page periodically, the timer is stuck in place until the next time the page is loaded. Without an update, it’s hard to describe it as a timer.

This can be solved by using the setInterval method. Use the setInterval method and pass in countdownTimer and 1000 as its two arguments:

index.html

countdownTimer();
setInterval(countdownTimer, 1000);

Now, countdownTimer will run every second (or 1000ms) and update the timer’s display.

Conclusion

In this tutorial, you created a countdown timer using pure JavaScript. You used methods like .map() and setInterval. If you would like to gain a more in-depth knowledge of these methods, How To Use .map() to Iterate Through Array Items in JavaScript and Scheduling Tasks in JavaScript Using setTimeout and setInterval can be helpful.

With this project complete, a great next step is to add React to the mix. This How to Create a Countdown Timer with React Hooks tutorial is a great place to start.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors