JSFiddle - React, Tailwind, and code Playground

by espyMur

HTML

<span id="sec"></span>
<br>

<button id="start">start</button>
<button id="pause">pause</button>
<button id="resume">resume</button>
<button id="stop">stop</button>
<button id="reset">reset</button>

JavaScript

let start = document.getElementById('start');
let stop = document.getElementById('stop');
let reset = document.getElementById('reset');
let resume = document.getElementById('resume');
let pause = document.getElementById('pause');
let seconds = document.getElementById('sec');
let Clock = {
  totalSeconds: 0,
  start: function () {
    var self = this;
    
    this.interval = setInterval(function () {
      self.totalSeconds += 1;

      $("#sec").text(parseInt(self.totalSeconds ));
    }, 1000);
  },

  pause: function () {
    clearInterval(this.interval);
    delete this.interval;
    console.log(this.totalSeconds);
  },

  resume: function () {
    if (!this.interval) this.start();
  },
  
  reset: function () {
    console.log("counter reset with "+ this.totalSeconds.toString());
    clearInterval(this.interval);
    delete this.interval;
    this.totalSeconds = 0
  },
};

/* start */
start.onclick = function() {
    Clock.start();
}


/* stop */
stop.onclick = function() {
    Clock.reset();
}

/* pause button */
pause.onclick = function() {
Clock.pause(); 
}


/* resume button */
resume.onclick = function() {
Clock.resume();
}