Clock component

Clock component

by Alexey

HTML

<div id='clock' class='clock'>
  <span class='hour'>00</span>:<span class='min'>00</span>:<span class='sec'>00</span>
</div>
<input type="button" id = 'but' value='Start'>
<input type="button" id = 'stop' value='Stop'>

JavaScript

class Clock {
  constructor({
    elem
  }) {
    this.elem = elem
  }

  start() {
    this.tick();
    this._timerId = setInterval(() => this.tick(), 1000);
  }
  tick() {
    let date = new Date();
    this.elem.querySelector('.hour').innerHTML = ('0' + date.getHours()).slice(-2);
        this.elem.querySelector('.min').innerHTML = ('0' + date.getMinutes()).slice(-2);
            this.elem.querySelector('.sec').innerHTML = ('0' + date.getSeconds()).slice(-2);
  }
  stop() {
  clearInterval(this._timerId);
  console.log('stop');
  }
};

var pageClock = new Clock({
  elem: document.getElementById('clock')
});
var but = document.querySelector('#but');
var stop = document.querySelector('#stop');
but.addEventListener("click",function(){pageClock.start()});
stop.addEventListener("click",function(){pageClock.stop()});