Building A Simple Countdown Clock

README.md

Building A Simple Countdown Clock

Live example: http://codepen.io/abk955/pen/YwQmMJ

1. Creating the clock structure (in Jade)

• The countdown clock is supposed to display seconds, minutes, hours and days.
• All times are supposed to be displayed with both the amount of time and the time unit.

#clock
  .time
    .days 00
    .unit days
  .time
    .hours 00
    .unit hours
  .time
    .minutes 00
    .unit minutes
  .time
    .seconds 00
    .unit seconds

2. Creating the clock functionality (in JavaScript)

[1.] Get the DOM elements.

var clock = document.getElementById('clock')
  , days    = clock.querySelector('.days')
  , hours   = clock.querySelector('.hours')
  , minutes = clock.querySelector('.minutes')
  , seconds = clock.querySelector('.seconds')

[2.] Calculate the remaining time.

var date = new Date('Februar 17 2016 16:05 GMT+02:00')

function calcRemainingTime () {
  var ms = date - Date.now()
  return {
    seconds: format((ms / (1000)) % 60),
    minutes: format((ms / (1000 * 60)) % 60),
    hours:   format((ms / (1000 * 60 * 60)) % 24),
    days:    format((ms / (1000 * 60 * 60 * 24))),
  }
}

[3.] Format the remaining time so it can be displayed nicely.

/* (1) round down,
   (2) get the absolute value to make the countdown
       work with past dates and
   (3) add a trailing zero if only 1 digit is present */

function format (time) {
  return trailingZero(Math.floor(Math.abs(time)))
}

function trailingZero (time) {
  return time < 10 ? '0' + time : time
}

[4.] Update the DOM elements with the remaining time every second.

function updateClock () {
  var remaining = calcRemainingTime()
  days.innerHTML    = remaining.days
  hours.innerHTML   = remaining.hours
  minutes.innerHTML = remaining.minutes
  seconds.innerHTML = remaining.seconds
}

updateClock()
setInterval(updateClock, 1000)

2. Styling the clock (in SCSS)

[1.] Picking the colors, font sizes and style.

$body-color: #666;
$font-color: #fff;
$time-color: #333;

$time-size: 20px;
$unit-size: 12px;

@mixin font-style () {
  font-family: sans-serif;
  font-weight: 100;
  color: $font-color;
}

[2.] Styling the body.

body {
  text-align: center; /* to center the clock */
  background-color: $body-color;
}

[3.] Styling the clock.

#clock {
  display: inline-block;

  > .time {
    display: inline-block;
    padding: 8px;
    border-radius: 3px;  

    > .days, .hours, .minutes, .seconds {
      display: inline-block;
      padding: 10px;
      border-radius: 3px;
      background: $time-color;
      @include font-style();
      font-size: $time-size;     
    }

    > .unit {
      padding-top: 6px;
      @include font-style();
      font-size: $unit-size;
    }
  }
}