JSFiddle - React, Tailwind, and code Playground

by KJ

HTML

<select class="duration" id="duration" name="duration">
                        <option value="1">1 Min</option>
                        <option value="5">5 Min</option>
                        <option value="15">15 Min</option>
                        <option value="60">1 Hour</option>
                        <option value="240">4 Hours</option>
                        <option value="480">8 Hours</option>
                        <option value="1440">24 Hours</option>
                    </select>
                    
                    <button type="button" class="btn goBtn">
                      Go
                    </button>
                    
                    <div id="timer">
                      
                    </div>
                    
                    
                    <button type="button" class="btn clearTimer">
                      Clear Timer
                    </button>

CSS

.duration{
  padding:10px;
  border-radius:5px;
  width:200px;
}

.btn{
  padding:10px;
  cursor:pointer;
}

#timer{
  padding:5px;
  margin-top:30px;
  font-size:25px;  
  font-weight:bold;
}

#timer span{
  border:1px solid #E74335;
  padding:10px;
  background:#E74335;
  color:#fff;
  border-radius:5px;
}

.clearTimer{
  margin-top:30px;
}

JavaScript

class Timer{

  constructor(timerEle, goBtnEle, clearTimerEle){

    this.timerInterval=null;

    this.timer = timerEle; 
    this.goBtn = goBtnEle;
    this.clearTimerBtn = clearTimerEle;
    this.clearTimerBtn[0].style.display = 'none';
  }

  startTimer(){

    goBtn[0].disabled = true;
    clearTimerBtn[0].style.display = 'block';

    let startTime = new Date().getTime();
    let duration = document.getElementById('duration').value;  

  // multiply minutes by 60000 is to convert minutes to milliseconds.
    let endTime = new Date(startTime + duration * 60000).getTime();
    let serverCurrentTime = new Date();
    let self = this;
    this.timerInterval = setInterval(function () {

              let currentTime = new Date(serverCurrentTime.setSeconds(serverCurrentTime.getSeconds() + 1));
              let difference = endTime - currentTime;     // Find the diff between current time and end time
              let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
              let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
              let seconds = Math.floor((difference % (1000 * 60)) / 1000);

              hours = hours < 10 ? "0" + hours : hours;
              minutes = minutes < 10 ? "0" + minutes : minutes;
              seconds = seconds < 10 ? "0" + seconds : seconds;

              timer.innerHTML = `<span>${hours}</span>  :  <span>${minutes}</span>  : <span>${seconds}</span>`;

              if (difference < 0) {
                  clearInterval(self.timerInterval);
                  timer.innerHTML = "Time Expired";               
              }
          }, 1000);
  }

  clearTimer(){
    if(this.timerInterval !== null){
      goBtn[0].disabled = false;
      timer.innerHTML = "";
      clearInterval(this.timerInterval);
      this.timerInterval = null;
      this.clearTimerBtn[0].style.display = 'none';

    }  
  }
  
}

let timer = document.getElementById('timer');  
let goBtn =...