FromHere.com rainbow countdown clock

markup.html

<center id="timer-container">
<div id="times-up">
   <div id="its-time">It's time!</div>
   <div id="its-okay">(it's okay)</div>
</div>
<div id="timer">
  <div id="days"></div>
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>
</center>

<h4 id="onepulse-link-container" style="display: none"><center><a href="https://www.facebook.com/onePULSEorg/videos/1342863069427522/">Click here to join us at 7 PM for the onePULSE Annual Remembrance Ceremony</a>&nbsp;&nbsp;<small>(<a href="https://www.facebook.com/onePULSEorg/videos/258859952050935/">en Español</a>)</small></center></h4>

script.html

<script>
  function updateTimer() {
    var endTime = new Date("June 12, 2020 21:00:00 EDT");
    var endTime = (Date.parse(endTime)) / 1000;
    var now = new Date();
    var now = (Date.parse(now) / 1000);
    var timeLeft = endTime - now;
    var container = document.getElementById("timer-container");
    if (!container) { return; }

    var timesUp = document.getElementById("times-up");
    var timer   = document.getElementById("timer");

    if (timeLeft < -120) {
      timesUp.style.display = "none";
      timer.style.display   = "none";
    } else if (timeLeft < -5) {
      timesUp.style.display = "block";
      timer.style.display   = "none";
    } else {
      if (timeLeft < 0) { timeLeft = 0; }
      var days = Math.floor(timeLeft / 86400);
      var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
      var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
      var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
      if (hours < "10") { hours = "0" + hours; }
      if (minutes < "10") { minutes = "0" + minutes; }
      if (seconds < "10") { seconds = "0" + seconds; }
      document.getElementById("days").innerHTML = days + "<span>Days</span>";
      document.getElementById("hours").innerHTML = hours + "<span>Hours</span>";
      document.getElementById("minutes").innerHTML = minutes + "<span>Minutes</span>";
      document.getElementById("seconds").innerHTML = seconds + "<span>Seconds</span>";
      timesUp.style.display = "none";
      timer.style.display   = "block";
    }
    
    var onePulseLinkContainer = document.getElementById("onepulse-link-container");
    if (timeLeft > 600 && onePulseLinkContainer) {
      onePulseLinkContainer.style.display = "block";
    }

    var backupStreamLinkContainer = document.getElementById("backup-stream-link-container");
    if (timeLeft > -9000 && timeLeft < 30 && backupStreamLinkContainer) {
      backupStreamLinkContainer.style.display = "block";
    }
  }

  if (window.addEventListener) {
    window.addEventListener('load', function() {
      if (document.getElementById("timer-container")) {
        updateTimer();
        setInterval(function() { updateTimer(); }, 1000); }
    });
  }
</script>

styles.html

<style>
  @import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace);
  #timer, #days, #hours, #minutes, #seconds, #times-up {
    font-family: 'Covered By Your Grace', cursive;
    display: inline-block;
    line-height: 1;
    padding: 0 10px;
    font-size: 250%;
  }
  @media only screen and (max-width: 768px) {
    #timer, #days, #hours, #minutes, #seconds, #times-up {
      font-size: 125%;
    }
  }
  #timer, #times-up {
    display: none;
    padding: 0;
  }
  #times-up #its-time {
    color: #f6da74;
    font-size: 120%;
  }
  #times-up #its-okay {
    color: #aaa;
    font-size: 50%;
  }
  #days {
    font-size: 300%;
    color: #db4844;
  }
  #days > span {
    color: #eee; 
  }
  #hours {
    font-size: 240%;
    color: #f07c22;
  }
  #hours > span {
    color: #eee; 
  }
  #minutes {
    font-size: 180%;
    color: #f6da74;
  }
  #minutes > span {
    color: #eee;
  }
  #seconds {
    font-size: 120%;
    color: #abcd58;
  }
  #seconds > span {
    color: #eee; 
  }
  #days > span,
  #hours > span,
  #minutes > span,
  #seconds > span {
    display: block;
    font-size: 20px;
  }
</style>