JSFiddle - React, Tailwind, and code Playground

by ashraffayad

HTML

<button id="restart" class="btn">Restart</button>
<button id="pause" class="btn">Pause</button>
<button id="start" class="btn">Start</button>
<div id="progress">
  <div id="bar"></div>
</div>
<div id="info"></label>

CSS

#info { 
display:block; padding:10px; margin-top:10px; border: solid 1px #ddd; font-family:verdana, sans-serif; font-size:14px; color:#667686;
}
#progress {
  position:relative; margin-top:20px;
}
#bar {
  background:red; position:absolute; height:2px
}

JavaScript

/** * Created by Ashraf Fayad on 12/13/15. */

//Constructor
var Timer = function(cb, delay) {
  this.cb = cb;
  this.delay = delay;
  this.elapsed = 0;
  this.remaining = this.delay - self.elapsed;
};

var bar = document.getElementById('bar');
var info = document.getElementById('info');
var percent;

Timer.prototype = function() {
  var _start = function(x, y) {
      var self = this;
      if (self.elapsed < self.delay) {
        clearInterval(self.interval);
        self.interval = setInterval(function() {
          self.elapsed += 50;
          self.remaining = self.delay - self.elapsed;
          percent = Math.round(self.elapsed/self.delay * 100);
          bar.style.width = percent + '%';
          
          info.innerHTML = 'elapsed: ' + self.elapsed +  
                      '<br />remaining: ' + self.remaining +
                      '<br />delay: ' + self.delay +
                      '<br />percent: ' + percent + '%';
                      
          if (self.elapsed >= self.delay) {
            clearInterval(self.interval);
            self.cb();
          }
        }, 50);
      }
    },
    _pause = function() {
      var self = this;
      clearInterval(self.interval);
    },
    _restart = function() {
      var self = this;
      self.elapsed = 0;
      clearInterval(self.interval);
      self.start();
    };

  //public member definitions
  return {
    start: _start,
    pause: _pause,
    restart: _restart
  };
}();


// - - - - - - - - how to use this class

var restartBtn = document.getElementById('restart');
var pauseBtn = document.getElementById('pause');
var startBtn = document.getElementById('start');

var timer = new Timer(function() {
  info.innerHTML += ' <b>Done!</b>';
}, 2000);

restartBtn.addEventListener('click', function(e) {
  timer.restart();
});
pauseBtn.addEventListener('click', function(e) {
  timer.pause();
});
startBtn.addEventListener('click', function(e) {
  timer.start();
});