JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<div class="countup" id="countup1">
  <span class="days"></span>
  <span class="hours"></span>
  <span class="minutes"></span>
  <span class="seconds"></span>
</div>

JavaScript

function countUpFromUTCTimeStamp(countFrom, id) {
  countFrom = new Date(countFrom).getTime();
  var now = new Date(),
    countFrom = new Date(countFrom),
    timeDifference = (now - countFrom);

  var secondsInADay = 60 * 60 * 1000 * 24,
    secondsInAHour = 60 * 60 * 1000;

  days = Math.floor(timeDifference / (secondsInADay) * 1);
  hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
  mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
  secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

  var idEl = document.getElementById(id);
  if (days >= 1) idEl.getElementsByClassName('days')[0].innerHTML = `${days}d`;
  if (hours >= 1) idEl.getElementsByClassName('hours')[0].innerHTML = `${hours}h`;
  if (mins >= 1) idEl.getElementsByClassName('minutes')[0].innerHTML = `${mins}m`;
  if (secs >= 1) idEl.getElementsByClassName('seconds')[0].innerHTML = `${secs}s`;

  clearTimeout(countUpFromUTCTimeStamp.interval);
  countUpFromUTCTimeStamp.interval = setTimeout(function() {
    countUpFromUTCTimeStamp(countFrom, id);
  }, 1000);
}

countUpFromUTCTimeStamp("Thu, 24 Jun 2021 02:56:11 GMT", 'countup1');