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

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

<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

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 ().

1. Get the remaining time, decrement it by 1 second, and update the HTML.
2. 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

<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

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().

 

 

CHEAT SHEET