Introduction

Count down timer is an essential feature to have in a webpage that requires an action from the user within a certain period. It is often used to increase user engagement in a webpage. It is popularly used in web pages such as sales pages, opt-in pages, event pages, and a lot more.

This article will explain how I created a custom countdown timer with HTML, CSS, and JavaScript so you will be able to create yours.

How Does the Count Down Timer Work

Before we dive in, let's understand how the countdown timer works. It simply shows the time left from now to a specified later time; to get this, we need to subtract the time now from the later time.

As previously mentioned, we must subtract the current time from a future time to calculate the remaining time. Fortunately, we can use the JavaScript "Date()" method for this.

Let's see a simple example of subtracting two dates:

let first_date = new Date('10/18/2022') 
let second_date = new Date('09/18/2022')

console.log(first_date - second_date)
//2592000000

let date_today = new Date() //today's date

console.log(first_date - date_today)
//5140586280

From the above, we can get the difference in the dates in milliseconds.

Now is the time to convert the milliseconds to equivalent days, hours, minutes, and seconds.

From our basic conversion:
1 day = 1000 x 60 x 60 x 24 milliseconds
1 hour = 1000 x 60 x 60 milliseconds
1 minute = 1000 x 60 milliseconds
1 second = 1000 milliseconds

const dateTill = new Date('10/18/2022')
//end date
const dateFrom = new Date();
//start date (today)

const diff = dateTill - dateFrom
//difference in dates

day_to_miliseconds = 1000 * 60 * 60 * 24
// 1 day equivalent in milliseconds
hour_to_miliseconds = 1000 * 60 * 60
// 1 hour equivalent in milliseconds
minute_to_miliseconds = 1000 * 60
// 1 minute equivalent in milliseconds
second_to_miliseconds = 1000
// 1 second equivalent in milliseconds

let days = Math.floor(diff / day_to_miliseconds );
// number of days from the difference in dates
let hours = Math.floor((diff % day_to_miliseconds) / hour_to_miliseconds);
// number of hours from the remaining time after removing days 
let minutes = Math.floor((diff % hour_to_miliseconds) / minute_to_miliseconds);
// number of minutes from the remaining time after removing hours
let seconds = Math.floor((diff % minute_to_miliseconds) / second_to_miliseconds);
// number of hours from the remaining time after removing seconds

console.log(days, hours, minutes, seconds)
// expected result

Cool, right?
Now that we have understood how to get our data, let's design the beautiful countdown timer with HTML and CSS.

With the above design implemented, we will use a JavaScript setInterval() method to implement the countdown functionality.

How does the setInterval() method works.

The setInterval() method is use to execution a function at interval (e.g, every 1 minute, every 5 minute e.t.c) until clearInterval() method is called.

Syntax

setInterval(() => function(), time);

• function() represent function to run every time
• time represents the interval at which we should recall the function in milliseconds.
• We will also use the clearInterval() method to stop our setInterval() method once the specified end date is reached.

For the countdown timer, we will write a function that will run every 1 second (1000 milliseconds).
Let's look at the below code carefully.

And that is all. You have a super cool custom countdown timer.

Note: The countdown timer will not show up if you are reading this article on or after 18th October 2022. You should know why? This is because "10/18/2022" is our end date. Feel free to change the end date to a later date after today and see the magic.

Wrapping up

The countdown timer is an important feature in some web pages, such as sales pages, opt-in pages, and many other use-cases. In this article, I explained how to use the javascript setInterval() and clearInterval() methods to create a countdown timer in a few simple steps.

You can also check out my article on How to Create a Countdown Timer In ReactJS

Thanks for Reading 🌟🌟🌟

If you have any questions, kindly drop them in the comment section.

I'd love to connect with you on Twitter

Happy coding!