JavaScript Countdown Timer

Source: https://codeburst.io/a-countdown-timer-in-pure-javascript-f3cdaae1a1a3

by Brett

HTML

<section class="countdown" aria-label="Countdown Timer">
  <span class="time days"><span id="days"></span> days</span>
  <span class="time hours"><span id="hours"></span> hours</span>
  <span class="time minutes"><span id="minutes"></span> minutes</span>
  <span class="time seconds"><span id="seconds"></span> seconds</span>
</section>

SCSS

.countdown {
  .time {
    margin-left: 1rem;
    color: #666;
    font-family: sans-serif;
    font-size: 1rem;
    & > span {
      color: #000;
      font-family: 'Caslon Graphique W01 Regular', serif;
      font-size: 2.4rem;
      font-weight: bold;
    }
  }
}

JavaScript

function countdown(endDate) {
  let days, hours, minutes, seconds;

  endDate = new Date(endDate).getTime();

  if (isNaN(endDate)) {
    return;
  }

  setInterval(calculate, 1000);

  function calculate() {
    let startDate = new Date();
    startDate = startDate.getTime();

    let timeRemaining = parseInt((endDate - startDate) / 1000);

    if (timeRemaining >= 0) {
      days = parseInt(timeRemaining / 86400);
      timeRemaining = (timeRemaining % 86400);

      hours = parseInt(timeRemaining / 3600);
      timeRemaining = (timeRemaining % 3600);

      minutes = parseInt(timeRemaining / 60);
      timeRemaining = (timeRemaining % 60);

      seconds = parseInt(timeRemaining);

      document.getElementById("days").innerHTML = parseInt(days, 10);
      document.getElementById("hours").innerHTML = ('0' + hours).slice(-2);
      document.getElementById("minutes").innerHTML = ('0' + minutes).slice(-2);
      document.getElementById("seconds").innerHTML = ('0' + seconds).slice(-2);
    } else {
      return;
    }
  }
}

(function() {
  countdown('04/01/2019 12:00:00 AM');
}());