Have you ever seen the countdown timers to a specific date on a ‘Website Coming Soon’ page or a countdown to an upcoming event? You know the ones that update every second until it reaches the ‘deadline’. Well in this tutorial we are going to show you how to do this.

You can see a working version here on JSFIDDLE.

So here we go:

HTML

<xmp>
<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>
</xmp>

CSS

body {
  text-align: center;
  background: #169fe6;
  font-family: sans-serif;
  font-weight: 100;
}

h1 {
  color: #FFFFFF;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv {
  font-family: sans-serif;
  color: #FFFFFF;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv > div {
  padding: 10px;
  border-radius: 3px;
  background: #3f72a3;
  display: inline-block;
}

#clockdiv div > span {
  padding: 15px;
  border-radius: 3px;
  background: #FFFFFF;
  display: inline-block;
}

.smalltext {
  padding-top: 5px;
  font-size: 16px;
}

#clockdiv span {
   color: #1a1a1a;
}

JavaScript

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

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

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

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

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

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date('12/25/2016');
initializeClock('clockdiv', deadline);