DEV Community

loading...
Cover image for Day 16: Live Back Timer on JS

Day 16: Live Back Timer on JS

dartcoder profile image Nikita ・2 min read

Hi there, today I made a reverse timer in JS that counts down to the end of my #100daysofcode challenge. The code is very simple:

function getTimeRemaining(endtime) {
  let t = Date.parse(endtime) - Date.parse(new Date());
  let seconds = Math.floor((t / 1000) % 60);
  let minutes = Math.floor((t / 1000 / 60) % 60);
  let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  let days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    days,
    hours,
    minutes,
    seconds,
  };
}

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);

  function updateClock() {
    let t = getTimeRemaining(endtime);

    clock.innerHTML = `
    <p style="font-size: 1.2em; font-weight: 400">
      ${t.days}d ${t.hours}h ${t.minutes}m ${t.seconds}s
    </p>
    `;

    if (t.total <= 0) {
      clearInterval(interval);
    }
  }

  updateClock();
  let interval = setInterval(updateClock, 1000);
}
deadline = "April 10 2021 00:00:00 GMT+0300";
initializeClock("countdown", deadline);
Enter fullscreen mode Exit fullscreen mode

getTimeRemaining uses JavaScript Date Object to evaluate, how much time is left on the date the endtime date and initializeClock function uses manipulates DOM to add these date to HTML. It has two arguments: id: the id of your HTML element that contains the timer and endtime: final date of timer.

Evening Update: Created list of latest blog posts using JS:

fetch("https://dev.to/api/articles?username=dartcoder").then(function (
  response
) {
  if (response.status !== 200) {
    console.log(`Error! Status Code: ${response.status}`);
  }

  response
    .json()
    .then(function (data) {
      let posts = [];
      data.slice(0, 5).forEach((item) => {
        posts.push({
          title: item.title,
          url: item.url,
          date: item.readable_publish_date,
        });
      });
      const postsSection = document.getElementById("posts");
      postsSection.innerHTML = `
    <p>
      <span style="color: #808080">${posts[0].date}</span> 
      <a href="${posts[0].url}">${posts[0].title}</a>
    </p>
    <p>
      <span style="color: #808080">${posts[1].date}</span> 
      <a href="${posts[1].url}">${posts[1].title}</a>
    </p>
    <p>
      <span style="color: #808080">${posts[2].date}</span> 
      <a href="${posts[2].url}">${posts[2].title}</a>
    </p>
    <p>
      <span style="color: #808080">${posts[3].date}</span> 
      <a href="${posts[3].url}">${posts[3].title}</a>
    </p>
    <p>
      <span style="color: #808080">${posts[4].date}</span> 
      <a href="${posts[4].url}">${posts[4].title}</a>
    </p>
    `;
    })
    .catch((error) => console.log(`Error:\n${error}`));
});
Enter fullscreen mode Exit fullscreen mode

P.S. Is there any way to do it shorter? Because I know only this way but it takes really much place.

Discussion (0)

pic
Editor guide