Countdown Timer In HTML Javascript (In Seconds & To Date)

Need to create a countdown timer for your web app? Well, there’s no need to bloat your web app with complicated third-party libraries. Let Master Coffee walk you through 2 simple countdown timers, all made in pure HTML CSS Javascript – Let’s go!

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

VIDEO TUTORIAL

1) COUNTDOWN IN SECONDS

1A) DEMO

This demo is set to count down from 10 in an endless loop.

1B) THE HTML

1-seconds.html

<div class="countdown">10</div>

All we need for the HTML is a <div class="countdown"> container and the number of seconds to begin with.

1C) THE JAVASCRIPT

1-seconds.js

function countdown () {
  // (PART A) GET HTML & TIME REMAINING
  let wrapper = document.querySelector(".countdown"),
  remain = +wrapper.innerHTML - 1;
  wrapper.innerHTML = remain;

  // (PART B) NEXT CYCLE
  if (remain > 0) { setTimeout(countdown, 1000); }
  else { /* THE END - DO SOMETHING */ }
}
setTimeout(countdown, 1000);

The entire countdown mechanism is contained within function countdown ().

Get the remaining time, decrement it by 1 second, and update the HTML.
Loop until the remaining time hits 0.

2) COUNTDOWN TO DATE

2A) DEMO

This demo is set to count down to 2 days from now.

2B) THE HTML

2-date.html

<div class="countdown"></div>

Same as the previous example, we only need a <div class="countdown"> container, but it’s empty now.

2C) THE JAVASCRIPT

2-date.js

var countdown = {
  // (PART A) PROPERTIES
  remain : 0, // remaining time in seconds
  segments : {}, // html remaining time

  // (PART B) INITIALIZE
  init : () => {
    // (B1) NOW, TILL, REMAINING SECONDS
    let now = new Date(), till = new Date();
    till.setDate(till.getDate() + 2); // 2 days from now
    countdown.remain = Math.floor((till - now) / 1000);

    // (B2) ADD HTML TIME SEGMENTS
    let add = s => {
      let segment = document.createElement("div");
      segment.className = "segment";
      segment.innerHTML = `<div class="left"></div><div class="name">${s}</div>`;
      document.querySelector(".countdown").appendChild(segment);
      countdown.segments[s] = segment.querySelector(".left");
    };
    // 1 min = 60 sec | 1 hr = 3600 sec | 1 day = 86400 sec
    if (countdown.remain >= 86400) { add("day"); }
    if (countdown.remain >= 3600) { add("hr"); }
    if (countdown.remain >= 60) { add("min"); }
    add("sec");

    // (B3) TICKER DOWN
    setTimeout(countdown.ticker, 1000);
  },

  // (PART C) TICKER COUNTDOWN
  ticker : () => {
    // (C1) UPDATE REMAINING TIME
    countdown.remain--;
    if (countdown.remain <= 0) {
      for (let v of Object.values(countdown.segments)) { v.innerHTML = 0; }
      console.log("THE END - DO SOMETHING");
      return;
    }

    // (C2) REMAINING TIME
    let remain = { sec : countdown.remain };
    if (remain.sec >= 60) {
      remain.min = Math.floor(remain.sec / 60);
      remain.sec -= remain.min * 60;
    } else { remain.min = 0; }
    if (remain.min >= 60) {
      remain.hr = Math.floor(remain.min / 60);
      remain.min -= remain.hr * 60;
    } else { remain.hr = 0; }
    if (remain.hr >= 24) {
      remain.day = Math.floor(remain.hr / 24);
      remain.hr -= remain.day * 24;
    } else { remain.day = 0; }

    // (C3) UPDATE HTML TIME SEGMENTS
    for (let [k,v] of Object.entries(countdown.segments)) { v.innerHTML = remain[k]; }

    // (C4) NEXT CYCLE
    setTimeout(countdown.ticker, 1000);
  }
};

// (PART D) START
window.addEventListener("load", countdown.init);

This can be “scary” to some beginners, but it is easier to trace in this order:

All of the countdown mechanics are contained within var countdown = {}.

(B & D) On window load, we call countdown.init().
- (B1) For this example, we will countdown from now to 2 days from now – countdown.remain is the number of seconds remaining.
- (B2) Add the HTML “time remaining” segments accordingly – Days, hours, minutes, and seconds.
- (B3) Call countdown.ticker() every 1 second to countdown.
(C) Countdown mechanics.
- (C1) Decrement countdown.remain. Captain Obvious – If it hits 0, it’s the end.
- (C2) Calculate the remaining time in seconds, minutes, hours, and days.
- (C3) Update the HTML time remaining.
- (C4) Loop and call countdown.ticker() until it hits 0.

THE END – A COUPLE OF NOTES ON THE DATE

That’s all for this short tutorial and sharing. But before we end, here are a couple of notes on setting the date:

There are many ways to set a date in Javascript, such as new Date(2077, 02, 01, 12, 34, 56) and new Date("2077-03-12T12:34:56") – You can check the Date constructor documentation for more.
By default, new Date() is fixed to the timezone of the user’s device.
If you want an “accurate end date”, I will recommend fixing it to Date.UTC().