DEV Community

Cover image for Simple Countdown Timer using JavaScript
Foolish Developer
Foolish Developer

Posted on • Edited on

Simple Countdown Timer using JavaScript

#html #css #javascript #webdev

JavaScript countdown timers are used on a variety of e-commerce and under-construction websites to keep users up to date. We see on different types of e-commerce websites that a kind of countdown starts some time before the arrival of any product or offer.
In this article I have created a countdown timer using simple JavaScript code and shared it with you.

Creating such a project is much easier if you know how to create a digital clock. Here you can schedule a specific day or time in advance. Then, with the help of JavaScript code, subtracting the current time from that time, the subtraction is reduced every second.

As you can see in the picture above I have used the web page background # 90cbf3 here. The page contains four small boxes for days, hours, minutes and seconds, respectively. First of all you have to create an HTML and CSS file.

Step 1: Basic structure of Countdown Timer

Only one line of HTML programming code has been used. Then I designed the webpage using the css code below. With background # 90cbf3 you can use any other color you want.



<div id="timer"></div>
Enter fullscreen mode Exit fullscreen mode 


body {
    text-align: center;
    padding: 100px 60px;
    background: #90cbf3;
    font-family: sans-serif;
    font-weight: lighter;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Step 2: Activate it using JavaScript code

Now I have implemented this javascript countdown timer with the help of JavaScript. First of all, we have set a specific date with the help of Date.parse. that is, you have to determine for what time you want to run the countdown.



future = Date.parse("jun 12, 2022 01:30:00");
Enter fullscreen mode Exit fullscreen mode

Then using the new Date () method I have taken the current time from the device. In this case, let me tell you, the time to use here is not the time of any server. It is only the local time of your device.

Then I subtract the current time from the pre-determined time and store it in the diff (constant). As a result, I have got a total of how much time to countdown.



 now = new Date();
 diff = future - now;
Enter fullscreen mode Exit fullscreen mode

Now I have converted the total time of countdown to days, hours, minutes and seconds using JavaScript's Math.floor.

➤ We know that one second is equal to 1000 milliseconds, so we have divided the whole countdown time (diff) by 1000.
➤ Right now one minute is equal to 60 seconds so in this case we have divided by 1000 * 60.
➤ Since one hour is equal to 60 minutes, in this case we have divided by 1000 * 60 * 60.
➤ One day is equal to 24 hours so in this case it is divided by 1000 * 60 * 60 * 24.



 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);
Enter fullscreen mode Exit fullscreen mode 


 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;
Enter fullscreen mode Exit fullscreen mode

Above we have done all the work of calculation, now we will arrange it neatly in the web page. For this I have used innerhtml and in it I have beautifully arranged how it can be seen in the webpage. Here I have added text like day, hours, minutes, seconds etc. using span respectively.



 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';
Enter fullscreen mode Exit fullscreen mode

Lastly, I have instructed to update this calculation every 1000 milliseconds using setInterval. Since the countdown time is intermittent every second, this system needs to be updated every second.



setInterval('updateTimer()', 1000);
Enter fullscreen mode Exit fullscreen mode

Alt Text

Final JavaScript code 



function updateTimer() {
    future = Date.parse("jun 12, 2022 01:30:00");
 now = new Date();
 diff = future - now;

 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);

 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;

 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
Enter fullscreen mode Exit fullscreen mode

Step 3: Give the times the size of a box

Now I have designed it using some basic css code and arranged it beautifully in web pages. As you can see in the picture above there is a small box to hold each time. I created that box using the code below. In this case I have used the background-color of the box # 020b43.



#timer {
    font-size: 3em;
    font-weight: 100;
    color: white;
    padding: 20px;
    width: 700px;
    color: white;

}

#timer div {
    display: inline-block;
    min-width: 90px;
    padding: 15px;
    background: #020b43;
    border-radius: 10px;
    border: 2px solid #030d52;
    margin: 15px;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Step 4: Design the text

Now at the end of it all I will design the text that I added using the span in the JavaScript code. I have used the following css to determine the size, color, etc. of those texts.



#timer div span {
    color: #ffffff;
    display: block;
    margin-top: 15px;
    font-size: .35em;
    font-weight: 400;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Hopefully from this tutorial you have learned how to build a countdown timer using JavaScript code. Please let me know in the comments how you like this tutorial. If I have done anything wrong, please let me know in the comments.

Related Post:

  1. Simple Footer HTML CSS
  2. Stopwatch using JavaScript
  3. Javascript Age Calculator
  4. Boarding Schools in Hyderabad
  5. Automatic Image Slider in Html CSS

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Top comments (8)

Collapse
 
anubarak profile image
Robin Schambach • • Edited

What's the purpose of returning a function by your timer function instead of using 2 arguments?

As for your other changes I wanted to explain the very same things and couldn't agree more. However in my opinion your syntax to start the timer kinda looks ugla to be to be honest. The same goes for timestampDiff seems only harder to read.

Collapse
 
ashadnasim52 profile image
ashad nasim •

Great Aritcle, It is good to clear the timer of the interval using
clearInterval()
Full Code To clear interval in React

  let timerCount = null;

  useEffect(() => {
    timerCount = setInterval(() => {
      _countDown();
    }, 1000);
    return () => {
      clearInterval(timerCount);
    };
  }, []);
Enter fullscreen mode Exit fullscreen mode
 
anubarak profile image
Robin Schambach •

I see thank you for your detailed explanation. Maybe I should have asked my question in a different way 😅

I know that pattern but I don't like it that much.
The question should be more like "I don't get the advantage over calling one single method with multiple arguments" as it requires less memory in larger scales. When you have a loop or use this pattern in a recursion I think it's not worth it (of course in this case without something else it is trivial). If I really need such a case I prefer classes over that pattern as it's easier to read at the very first glance (when you have to dig through several hundred lines of code within a few seconds)

I guess it all depends on person preferences and what people are used too. Then again thanks for your code I bet it helps many people.

Collapse
 
sebasencr profile image
sebasencr • • Edited

Here's my take.
Simple, short, readable, and unpretentious:

const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;

setInterval(() => {
    let diff = Date.parse("Oct 31, 2023 20:00:00") - Date.now();
    const days = Math.floor(diff / DAY);
    diff -= days * DAY;
    const hours = Math.floor(diff / HOUR);
    diff -= hours * HOUR;
    const mins = Math.floor(diff / MINUTE);
    diff -= mins * MINUTE;
    const secs = Math.floor(diff / SECOND);
    document.querySelector("#timer").innerHTML = `
        <div>${days}<span>Days</span></div>
        <div>${hours}<span>Hours</span></div>
        <div>${mins}<span>Minutes</span></div>
        <div>${secs}<span>Seconds</span></div>`;
}, SECOND);
Enter fullscreen mode Exit fullscreen mode
 
sebasencr profile image
sebasencr • • Edited

As much as I love languages with currying such as Ocaml, Haskell and F#, using it as a default in a language like Javascript is just going to confuse most readers. To be honest, it gives the impression that the author simply enjoys writing idiosyncratic code (which is confirmed by your statement about classes and the fact that you created an array just to be able to use map).

Collapse
 
cyril174 profile image
Cyril Kariyawasam •

Thanks. Very helpful.

Collapse
 
code_mystery profile image
Foolish Developer •

Welcome 😀

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

cordlesswool profile image

How to use generics in pipe-and-combine

Wolfgang Rathgeb -

0verread profile image

How to solve Data Synchronization in Next.js

Jeet -

radchenko profile image

Your coding year in review

Vladislav Radchenko -

anthonymartin profile image

BREAKING: Intel CEO Resigns After Controversy

anthonymartin -