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.
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.
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
Now that we have understood how to get our data, let's design the beautiful countdown timer with HTML and CSS.
setInterval() method to implement the countdown functionality.
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.
setInterval(() => function(), time);
function()represent function to run every time
timerepresents 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 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.
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