JSFiddle - React, Tailwind, and code Playground

by gounshin

HTML

<div>Time <span class="timer-view">00:00</span></div>
<button class="start">start!</button>
<button class="add">Add seconds</button>
<button class="reset">reset</button>

JavaScript

const timeView = document.querySelector('.timer-view');
const start = document.querySelector('.start');
const moreTime = document.querySelector('.add');
const reset = document.querySelector('.reset');

start.addEventListener('click', function(){
	Countdown(15);
});

moreTime.addEventListener('click', function(){
	AddTime(5);
});

reset.addEventListener('click', function(){
	timeView.textContent = '00:00';
  clearTimeout(stopTime);
});


function Countdown(seconds) {
  this.sec = seconds;
  this.mins = seconds > 60? seconds/60 : 0;
        
  tick();

  function tick() {
      if(this.sec > 60){
          this.current_minutes = mins-1;
      }
      this.sec--;
      timeView.textContent = (!this.mins? '00' : this.current_minutes.toString()) + ':' + (this.sec < 10 ? '0' : '') + String(this.sec);
      if( this.sec > 0 ) {
          stopTime = setTimeout(tick, 1000);
      } else {
          if(this.mins > 1){
              countdown(this.mins-1);           
          }
      }
  }
}

function AddTime(seconds){
	clearTimeout(stopTime);
	Countdown.call(this.sec, seconds);
	sec = this.sec + seconds;
}