```js
let days, hours, minutes, seconds;
```
Now we’re declaring several variables that we’ll need. These will be the units of time that will be calculated and displayed. Note: These were the specific units I needed; You can add/remove other units of time as needed for your purposes.
Here, I chained two methods to transform `endDate` into a usable format that we can perform operations on.
First:
```js
endDate = new Date(endDate)
```
converts our passed in `endDate` parameter into a JavaScript Date object.
Second:
```js
.getTime();
```
returns our newly converted JavaScript date into milliseconds…Specifically, [the number of milliseconds that have elapsed between 1 January 1970 00:00:00 UTC and the given date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime).
Great! Now our `endDate` is in milliseconds and ready to be used in calculations. Before we start calculating though, I added a simple validation check:
```js
if (isNaN(endDate)) {
return;
}
```
After our conversions, we want to make sure the resulting number is, in fact a number. If not, we end the show right here.
Ok, now we’re done setting up the basics, now we can start having fun.
```js
setInterval(calculate, 1000);
```
Since we are evaluating how much time is remaining every second, we’ll use `setInterval` to repeatedly execute some function we decide to give it. So in the code above, we pass in our calculate function as the first argument and `1000` as the second argument to denote one second (1000 ms = 1 second).
Now we can declare our `calculate` function…
```js
function calculate() {
let startDate = new Date().getTime();
```
…and then grab the exact date as of this moment, converted into milliseconds, and place it in variable called `startDate`.
Then we can determine the time remaining between the current date and our end date:
```js
let timeRemaining = parseInt((endDate - startDate) / 1000);
```
To do this, we subtract `startDate` from `endDate` to get the remaining milliseconds between the two. Then we divide by `1000` to get seconds, which will be an easier unit to work with for calculating our other units of time. We store this in a variable called `timeRemaining`.
Now we check to see that there is, in fact, still time remaining between the current date and our end date:
```js
if (timeRemaining >= 0) {
```
If there is, we move into this block and calculate the unit specific measurements of time we want to display. Let’s start with remaining days:
```js
days = parseInt(timeRemaining / 86400);
```
To calculate the days remaining, we divide our remaining time by `86400`, the number of seconds in a single day. This result is then parsed within the `parseInt()` function to ensure we work with whole numbers.
Before we continue calculating the other units, we need to subtract the days we’ve already calculated:
```js
timeRemaining = (timeRemaining % 86400);
```
Once we do this, we assign the remaining time to our `timeRemaining` variable.
We can now continue calculating the other units of time in the same manner:
```js
hours = parseInt(timeRemaining / 3600); // 3600 seconds in one hour
timeRemaining = (timeRemaining % 3600);
minutes = parseInt(timeRemaining / 60); // 60 seconds in one minute
timeRemaining = (timeRemaining % 60);
seconds = parseInt(timeRemaining);
```
Almost done! We’re now ready to update our DOM elements with our newly calculated units of time!
I made things easier for myself and created an element per unit of time I was going to display. For reference, check out my [GitHub repo](https://github.com/adriennetacke/maintenance-template) to see the page I built utilizing this countdown timer. In essence, my timer would be displayed in a `div` that looked like this:
```html
Day(s) Hour(s) Minute(s) Second(s)
In the context of my [maintenance page](https://github.com/adriennetacke/maintenance-template), I wanted this countdown timer to start on page load. So I decided to place my `countdown` function within an iife, or [immediately-invoked function expression](https://developer.mozilla.org/en-US/docs/Glossary/IIFE):
```js
(function () {
countdown('04/01/2018 05:00:00 PM');
}());
```
Our scheduled platform upgrade was slated to end on April 1st (no joke!) at 5PM, so this was the date I passed in.
This worked perfectly and was just what I needed. As promised, no external libraries or extra packages were used. JavaScript really is a wonderful language. :)
---
Thanks for reading! If you enjoyed it, please let me know in a comment below. Or even better, if you feel this article was thorough in a good way, please share it/tweet it to spread the knowledge and love. ♥️
For more from me, be sure to follow [my blog](https://blog.adrienne.io/)!
And to see what I'm currently up to, follow me on [Twitter](https://twitter.com/AdrienneTacke) && [Instagram](https://www.instagram.com/adriennetacke/)!