Date object, and using the
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.
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.
You’ll need to use the
setInterval() method for this project. It is very easy to understand and use. The syntax is:
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:
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 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
"time" for date and time input fields.
Step 2: Setup the timer
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.
font-family: monospace; padding: 10px; border-radius: 5px;
backgroundis 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.
The official solution for this project can be found here: Solution: Countdown timer.