Simple Javascript Countdown

JS Countdown

by Bintang Anandhiya

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div class="timer">
  <div id="header">
    <h3>COUNTDOWN</h3>
  </div>
  <div class="timer--clock">
    <div class="minutes-group clock-display-grp">
      <div class="first number-grp">
        <div class="number-grp-wrp">
          <div class="num num-0">
            <p>0</p>
          </div>
          <div class="num num-1">
            <p>1</p>
          </div>
          <div class="num num-2">
            <p>2</p>
          </div>
          <div class="num num-3">
            <p>3</p>
          </div>
          <div class="num num-4">
            <p>4</p>
          </div>
          <div class="num num-5">
            <p>5</p>
          </div>
          <div class="num num-6">
            <p>6</p>
          </div>
          <div class="num num-7">
            <p>7</p>
          </div>
          <div class="num num-8">
            <p>8</p>
          </div>
          <div class="num num-9">
            <p>9</p>
          </div>
        </div>
      </div>
      <div class="second number-grp">
        <div class="number-grp-wrp">
          <div class="num num-0">
            <p>0</p>
          </div>
          <div class="num num-1">
            <p>1</p>
          </div>
          <div class="num num-2">
            <p>2</p>
          </div>
          <div class="num num-3">
            <p>3</p>
          </div>
          <div class="num num-4">
            <p>4</p>
          </div>
          <div class="num num-5">
            <p>5</p>
          </div>
          <div class="num num-6">
            <p>6</p>
          </div>
          <div class="num num-7">
            <p>7</p>
          </div>
          <div class="num num-8">
            <p>8</p>
          </div>
          <div class="num num-9">
            <p>9</p>
          </div>
        </div>
      </div>
    </div>
    <div class="clock-separator">
      <p>:</p>
    </div>
    <div class="seconds-group...

SCSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  background: #acacac;
  color: white;
}


/*=================
* TIMER
*=================*/

.timer {
  width: 550px;
  height: 248px;
  display: block;
  position: absolute;
  top: 45%;
  left: 50%;
  margin-left: -(550px / 2);
  margin-top: -(248px / 2);
  color: white;
  * {
    cursor: default;
  }
  h3 {
    width: 100%;
    font-size: 30px;
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 20px;
  }
  &--clock {
    width: 100%;
    position: relative;
    padding-left: 6px;
    margin-top: 22px;
    ;
    overflow: hidden;
    .clock-display-grp {
      width: 100%;
      position: relative;
      .number-grp {
        width: auto;
        display: block;
        height: 156px;
        float: left;
        overflow: hidden;
        .number-grp-wrp {
          width: 100%;
          position: relative;
          .num {
            width: 100%;
            position: relative;
            height: 160px;
            p {
              width: auto;
              display: table;
              font-size: 205px;
              line-height: 150px; //180
              font-weight: bold;
            }
          }
        }
      }
    }
    .clock-separator {
      width: auto;
      float: left;
      top: 10%;
      transform: translateY(-10%);
      -ms-transform: translateY(-10%);
      -webkit-transform: translateY(-10%);
      display: block;
      height: 156px;
      p {
        width: auto;
        display: table;
        font-size: 205px;
        line-height: 150px; //180
        font-weight: bold;
      }
    }
  }
  h4 {
    width: 100%;
    font-size: 12px;
    letter-spacing: 4px;
    text-align: center;
    padding-top: 25px;
    float: left;
    line-height: 2.5em;
    margin-bottom: 15px;
 ...

JavaScript

// Something lags here. No idea what. Timer count or animations?

TweenLite.defaultEase = Expo.easeOut;

initTimer("10:00"); // Set the time here

var reloadBtn = document.querySelector('.reload');
var timerEl = document.querySelector('.timer');

var audio = new Audio('http://soundbible.com/grab.php?id=1531&type=mp3');

function initTimer(t) {

  var self = this,
    timerEl = document.querySelector('.timer'),
    minutesGroupEl = timerEl.querySelector('.minutes-group'),
    secondsGroupEl = timerEl.querySelector('.seconds-group'),

    minutesGroup = {
      firstNum: minutesGroupEl.querySelector('.first'),
      secondNum: minutesGroupEl.querySelector('.second')
    },

    secondsGroup = {
      firstNum: secondsGroupEl.querySelector('.first'),
      secondNum: secondsGroupEl.querySelector('.second')
    };

  var time = {
    min: t.split(':')[0],
    sec: t.split(':')[1]
  };

  var timeNumbers;
  var lastTime = new Date(); // <======================
  function updateTimer() {

    var timestr;
    var date = new Date();

    date.setHours(0);
    date.setMinutes(time.min);
    date.setSeconds(time.sec);
	
    // get the elapsed time 
    var elapsedTime = Date.now() - lastTime;
    console.log(elapsedTime);
    
    // set the lastTime var to 'now' so we can calculate the
    // elapsed time between this event and the next event
    lastTime = Date.now();
    
    // instead of (date.valueOf() - 1000) you need to 
    // put in the time that actually has elapsed.
    var newDate = new Date(date.valueOf() - elapsedTime);
    var temp = newDate.toTimeString().split(" ");
    var tempsplit = temp[0].split(':');

    time.min = tempsplit[1];
    time.sec = tempsplit[2];

    timestr = time.min + time.sec;
    timeNumbers = timestr.split('');
    updateTimerDisplay(timeNumbers);

    if (timestr === '0000')
      countdownFinished();

    if (timestr != '0000')
      setTimeout(updateTimer, 1000);
		
  }

  function updateTimerDisplay(arr) {

   ...