A simple JavaScript countdown timer

clock.js

(function () {
  dayjs.extend(window.dayjs_plugin_duration);

  const launchDay = Date.parse("2022-06-10T21:00:00Z");

  const daysOutput = document.getElementById("countdown-days");
  const hoursOutput = document.getElementById("countdown-hours");
  const minutesOutput = document.getElementById("countdown-minutes");
  const secondsOutput = document.getElementById("countdown-seconds");

  let duration;

  setInterval(() => {
    duration = dayjs.duration(launchDay - Date.now());
    daysOutput.textContent = duration["$d"].days;
    hoursOutput.textContent =
      duration["$d"].hours > 9
        ? duration["$d"].hours
        : `0${duration["$d"].hours}`;
    minutesOutput.textContent =
      duration["$d"].minutes > 0
        ? duration["$d"].minutes
        : `0${duration["$d"].minutes}`;
    secondsOutput.textContent =
      duration["$d"].seconds > 9
        ? duration["$d"].seconds
        : `0${duration["$d"].seconds}`;
  }, 100);
})();

So kind of you to respond! Thank you again for posting it. So elegant!

@schalkneethling If you happen to be familiar with Alpine JS—based on Vue—do you have any ideas how to adapt this to Alpine?

This video got me started, but I'm struggling with how to integrate an anonymous function which responds to essentially an onload() event and not a click event.

Zero pressure, but if you happen to have any ideas on how to solve this, I would love to know!

Hey @ctessmer - I have not used Alpine, but if the primary problem is the anonymous function you can turn this into a named function. The primary reason this was written as is, is so that it will start as soon as the DOM is "ready" in a sense.

You could also do the following:

const startClock = () => {
  dayjs.extend(window.dayjs_plugin_duration);

  const launchDay = Date.parse("2022-06-10T21:00:00Z");

  const daysOutput = document.getElementById("countdown-days");
  const hoursOutput = document.getElementById("countdown-hours");
  const minutesOutput = document.getElementById("countdown-minutes");
  const secondsOutput = document.getElementById("countdown-seconds");

  let duration;

  setInterval(() => {
    duration = dayjs.duration(launchDay - Date.now());
    daysOutput.textContent = duration["$d"].days;
    hoursOutput.textContent =
      duration["$d"].hours > 9
        ? duration["$d"].hours
        : `0${duration["$d"].hours}`;
    minutesOutput.textContent =
      duration["$d"].minutes > 0
        ? duration["$d"].minutes
        : `0${duration["$d"].minutes}`;
    secondsOutput.textContent =
      duration["$d"].seconds > 9
        ? duration["$d"].seconds
        : `0${duration["$d"].seconds}`;
  }, 100);
};

Wherever you want to kick it off, you can call startClock(); - I hope this helps.