What is a countdown timer?
A countdown timer is a clock running on any landing page with decreasing time on it. It points to a certain event that is either to come or going to end.
Suppose you have an eCommerce website and a product to sell and you offer a discount for a limited period of time, then your countdown time will indicate the time in which offer is going to expire.
The countdown timer can also indicate how much time left to some event.
Here is the final birthday countdown timer you are going to make.
Creating Project Structure
First, create a folder with name birthday-countdown. In this folder create 3 files:
- index.html: For writing HTML
- style.css: For writing CSS code for styling purpose
Second, download or copy birthday celebration image to this project folder which will be used for the background of the birthday countdown.
You create project folder will look like this:
Creating HTML for countdown
The HTML code for the countdown timer is quite simple. In head section it connects to the
<link> tag and in body section it connects to
script.js file using
The HTML code contains a
<div> element with class name 'countdown', it holds everything about the timer app.
Let's first see the complete HTML code for the countdown timer app.
The body tag in the above code contains an element with class
'countdown-timer' which holds all elements of the app.
- The first element in element with class
'countdown-timer'is the heading of the app which greets the user and state purpose.
- The second element is a list element where you list remaining days, remaining hours, remaining minutes and remaining seconds to the timer. The listing items contain
- The last element is a paragraph element with class name 'coming-year', which will be used to show coming birthday year in the background.
To create time you will need to work with Date object. It represents a single moment in the time.
Date object is specified as the number of milliseconds that have passed since midnight on January 1, 1970, UTC.
The following code show how to create a new
Date object that represents the current date and time:
Now let's see how to get milliseconds elapsed since a date and time.
We need this because we will use this to find difference between 2 different moments of time to get time remaining to some event (birthday).
Now we know how to get time elapsed since default date (january 1, 1970) but you can also pass a date and time in form of string to get time spend since some exact date and time.
Calculate difference between 2 moment of time
Using above method we can find time elapsed for 2 different time and can take difference moment of time.
Calculate the remaining time
While creating countdown time you will have to calculate remaining days, hours, minutes and seconds to display it on screen.
All this information will be deduced from a number of remaining milliseconds to the event.
The following example takes
450524354 milliseconds and calculates days, hours, minutes and seconds.
Convert milliseconds to integer seconds:
To convert milliseconds to seconds divide it by 1000. Now, this is second but has fractional value.
Math.floor to convert it to an integer.
Then use modulus operator (%) and take modulus at 60 to get seconds in range 0-60.
Convert milliseconds to minutes
To convert milliseconds to minutes divide it by 1000 * 60. Now, this is in minutes but has fractional value.
Math.floor to convert it to an integer.
Then use modulus operator (%) and take modulus at 60 to get minutes in range 0-60.
Similarly convert milliseconds to hours.
Similarly convert milliseconds to days.
The above code of the countdown app takes 2 input from the user using the
prompt date of birth and month of birth consecutively.
The date and month of birth are used to calculate if the birthday has gone this year or is in the same year.
Birthday is gone this year if following is true:
- if birth month is greater than current month
- if birth month is same but birth date is greater than current date
setInterval function repeatedly run the countdown function every 1000 milliseconds (1 second), which update remaining days, minutes, hours and seconds.
CSS Code for countdown timer app
Finally, use CSS to style the application to look fabulous.
Here is complete CSS code for the countdown timer and is discussed below.
First, set browsers default margin and padding to 0 by selection all using *.
Second, set background image which you downloaded above to the body and set
Third, use CSS flexbox to set the countdown app to the centre of the screen by selection class 'countdown-timer'.
<li> element inline-block this will make list element to position side by side.
Set other necessary CSS styles to make the app beautiful in your own way.
Finally use CSS media query to style elements for smaller device (max-width:768px).
Countdown timer full code
Here is complete code for birtday countdown timer embeded in single HTML file.