tutorialstonight logo

Javascript Countdown Timer

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.

In this tutorial, you will learn how to make a countdown timer with javascript. It will be a birthday countdown which will indicate how much time left to your next birthday.

Here is the final birthday countdown timer you are going to make.

javascript project with source code for beginner

Creating Project Structure

First, create a folder with name birthday-countdown. In this folder create 3 files:

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:

project structure birthday countdown

Creating HTML for countdown

The HTML code for the countdown timer is quite simple. In head section it connects to the style.css using <link> tag and in body section it connects to script.js file using <script> tag.

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.

Date object in javascript

Before we go through javascript code let us first understand a few javascript logic that will be used further in the section.

To create time you will need to work with Date object. It represents a single moment in the time.

The 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.

Use 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.

Use 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.


JavaScript Code for countdown timer app

Since we have covered the concept of date object used here, let's see complete javascript code for countdown timer.


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:


Then there is a javascript function which calculates remaining days, hours, minutes and seconds and injects the found data in the correct position in the HTML document using querySelector method.

Finally, the 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 background-size: cover.

Third, use CSS flexbox to set the countdown app to the centre of the screen by selection class 'countdown-timer'.

Fourth, set <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.