Timer Component

by kthornbloom

HTML

<div id="mycountdown"></div>

<a href="#" id="update">Update Timer</a>

SCSS

.timer {
    display: inline-block;
    color: #fff;
    position: relative;
    top: -.15rem;
    vertical-align:middle;
    img {
        vertical-align: middle;
        display: inline-block;
        margin-right: 1rem;
    }
    span {
      display: inline-block;
      margin-left: 1rem;
    }
}

.timer-done {
    color: tomato;
}

.time-block {
    border: 1px solid #6d7077;
    border-radius: .1em;
    font-size: 1.5em;
    display: inline-block;
    width: 3em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    position: relative;
    vertical-align: middle;
}

.time-block-overflow {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

.time-block-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: top;
    font-weight: 100;
    transition: .15s top;
}

.time-block:after {
    content: '';
    color: #858A94;
    font-size: 11px;
    position: absolute;
    top:100%;
    left: 0;
    line-height:2em;
    width: 100%;
    text-align: center;
}

.time-block:nth-child(1):after {
    content: 'Day'
}

.time-block:nth-child(2):after {
    content: 'Hr'
}

.time-block:nth-child(3):after {
    content: 'Min'
}

.time-block:nth-child(4):after {
    content: 'Sec'
}

/*  DEMO CSS BE HERE */

body {
  background: #4F525C;
  color: #fff;
	font-family:sans-serif;
	text-transform:uppercase;
	padding:10px;
}

a:link, a:visited {
	color:inherit;
}

#mycountdown {
	margin-bottom:50px;
  font-size:1.5em;
}

JavaScript

// Initialize with element ID, Days, Hrs, Mins, Seconds
buildTimer('mycountdown', 1, 20, 5, 8);

// Example for changing it
$('#update').on('click', function() {
  // Stop previous timer
  clearTimeout(timer);
  // Start new one
  buildTimer('mycountdown', 100, 00, 10, 2);
});

function buildTimer(id, days, hours, minutes, seconds) {

  // Destroy!
  $('#' + id).empty();

  // Build HTML
  $('#' + id).append('<div class="time-block time-days"><div class="time-block-overflow"><div class="time-block-content">' + days + '</div></div></div>\
	<div class="time-block time-hours"><div class="time-block-overflow"><div class="time-block-content">' + hours + '</div></div></div>\
	<div class="time-block time-minutes"><div class="time-block-overflow"><div class="time-block-content">' + minutes + '</div></div></div>\
	<div class="time-block time-seconds"><div class="time-block-overflow"><div class="time-block-content">' + seconds + '</div></div></div>')

  // Call the function to calculate the next time values
  calculateTimer(id, days, hours, minutes, seconds);

  function calculateTimer(id, days, hours, minutes, seconds) {

    // Calc Time Values Each Second
    seconds--;
    if (seconds < 0) {
      seconds = 59;
      minutes--;
      if (minutes < 0) {
        hours--;
        minutes = 59;
        if (hours < 0) {
          days--;
          hours = 23;
          if (days < 0) {
            days = 0;
            hours = 0;
            minutes = 0;
            seconds = 0;
          }
        }
      }
    }

    // Get old values
    var newValues = [],
      currentValues = [],
      currentDays = $('#' + id).find('.time-days .time-block-content').html(),
      currentHours = $('#' + id).find('.time-hours .time-block-content').html(),
      currentMinutes = $('#' + id).find('.time-minutes .time-block-content').html(),
      currentSeconds = $('#' + id).find('.time-seconds .time-block-content').html();
    currentValues.push(currentDays, currentHours, currentMinutes,...