How to Create a Countdown Timer With Javascript
Tags: javascript, tutorial, devmeme, html
Published: 2022-09-01 20:02:12

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsqckryyxdjnnstk6rbi.gif)

###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:

```javascript

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


```javascript

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.

{% codepen https://codepen.io/Jaymeeu/pen/ExEzogr %}

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
```js
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.

{% codepen https://codepen.io/Jaymeeu/pen/qBogjaz %}

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 ](https://dev.to/jaymeeu/how-to-create-a-countdown-timer-in-reactjs-2khj)

Thanks for Reading 🌟🌟🌟

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

I'd love to connect with you on [Twitter](https://twitter.com/Abdulrasaq_Jay)

Happy coding!