In this mini project, you will create a countdown timer using the JavaScript Date module. In the process, you’ll get to practice many of the JavaScript skills you have acquired over the course, including strings and operators, creating your own functions, interacting with HTML elements and forms, form validation, using Date object, and using the setInterval method of JavaScript.

Overview

Although we’ve provided guidance and instructions for the project, you’ll be writing all the code for this project. You are supposed to take end date and time input from the user and run a countdown timer based on the time difference.

Expected behavior

Your finished web page should look something like this:

Clicking on the ”Start timer” button should start a countdown timer for the date and time entered in the input fields. When the button is clicked, you should see something like this:

Once the timer expires, you should see a message saying “Expired”:

Your solution does not have to look exactly similar to this (functionality matters more), so do not worry if you’re not very well familiar with CSS styling. You can always take a look at our implementation, link to which is provided at the end of this tutorial.

General guidelines

You’ll need to use the setInterval() method for this project. It is very easy to understand and use. The syntax is:

setInterval(function_name, gap_in_milliseconds);

Here, function_name is the name of the function to be called, and gap_in_milliseconds is the number of milliseconds after which the function should be called.

For example, to call a function called timer after every 2 seconds (2000 milliseconds), we would write:

setInterval(timer, 2000);

This will call the function timer after every 2000 milliseconds.

Keep reading for more detailed instructions. If you feel confident, try to do the project without looking at the rest of the instructions (or use as little as needed). The solution is given at the end of this tutorial.

Step-by-step Guidelines

Step 1: Create the HTML

You don’t need to use a <form> element to add <input> elements, they work similarly outside of a <form> element as well. Set the type attribute to "date" and "time" for date and time input fields.

Create the button which executes a JavaScript function when clicked.

Step 2: Setup the timer

Get the values entered in the input elements inside a JavaScript function. Make sure the values are not empty.

Create a new Date object using these values and get the end time in milliseconds (time since January 1, 1970).

Set up an interval to call a function after every 1000 milliseconds or 1 second to update the displayed timer. You can use the setInterval method for this.

Step 3: Calculate the timer values

You’ll need to calculate the remaining number of days, hours, minutes and seconds to show on the countdown timer. This can be done using basic mathematical operations (since we already have the time difference). For example, if we have the number of milliseconds remaining before the timer expires, we can get the number of hours by using the formula:

// 24 hours * 60 minutes * 60 seconds * 1000 milliseconds in one day.
var hours = milliseconds-remaining / (1000 * 60 * 60);
// take the remainder of milliseconds to get the number of minutes and so on
milliseconds-remaining %= (1000 * 60 * 60);

Step 4: Update the timer values in HTML

The updated time values should be reflected in the HTML as well. So, whenever the time gets updated, the days, hours, minutes and seconds values should also be updated in the HTML. You can do so by updating the innerHTML of the respective elements.

Step 5: Apply styles to the elements

In our implementation, we have written some CSS code to make the timer look beautiful. Some of the styles are listed below. You can use the same or try something of your own!

• The font size of the strings (“days”, “hours”, “minutes” and “seconds”) that get displayed next to the timer values is 15 pixels.
• <input> elements: font-family: monospace; padding: 10px; border-radius: 5px;
• Body background is set to: linear-gradient(to right bottom, #f3b9a5, #e8a3c0);

These are only few of the styles we’ve used. You can look at the complete stylesheet at the solution link provided below.

Congratulations

Congratulations, you have completed your first JavaScript project. Keep it up!

Solution

The official solution for this project can be found here: Solution: Countdown timer.