Countdown

by Sascha

HTML

<div class="tg-days">

</div>
<div class="tg-hours">

</div>
<div class="tg-minutes">

</div>
<div class="tg-seconds">

</div>

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#tg-days {
  background: red; 
  width: 50px;
  height: 20px;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function matchCounter() {
  var launch = new Date(2019, 4, 10, 8, 0);
  var days = $('.tg-days');
  var hours = $('.tg-hours');
  var minutes = $('.tg-minutes');
  var seconds = $('.tg-seconds');
console.log(launch);

  function setDate() {
    var now = new Date();
      console.log("I am in \"quotes\"");
    if (launch < now) {
      days.html('<h3>0</h3><h4>Day</h4>');
      hours.html('<h3>0</h3><h4>Hour</h4>');
      minutes.html('<h3>0</h3><h4>Minute</h4>');
      seconds.html('<h3>0</h3><h4>Second</h4>');
    } else {
      var s = -now.getTimezoneOffset() * 60 + (launch.getTime() - now.getTime()) / 1000;
      var d = Math.floor(s / 86400);
      days.html('<h3>' + d + '</h3><h4>Day' + (d > 1 ? 's' : ''), '</h4>');
      s -= d * 86400;
      var h = Math.floor(s / 3600);
      hours.html('<h3>' + h + '</h3><h4>Hour' + (h > 1 ? 's' : ''), '</h4>');
      s -= h * 3600;
      var m = Math.floor(s / 60);
      minutes.html('<h3>' + m + '</h3><h4>Minute' + (m > 1 ? 's' : ''), '</h4>');
      s = Math.floor(s - m * 60);
      seconds.html('<h3>' + s + '</h3><h4>Second' + (s > 1 ? 's' : ''), '</h4>');
      setTimeout(setDate, 1000);
    }
  }

  setDate();
}
matchCounter();