Countdown Timer in JavaScript

In this post we are displaying the countdown timer in JavaScript based on the duration selected by User. User just has to select the duration from the dropdown and click on Go button to start the countdown.

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>
                    

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 = document.getElementsByClassName('goBtn');
let clearTimerBtn = document.getElementsByClassName('clearTimer');

let obj = new Timer(timer,goBtn,clearTimerBtn);

goBtn[0].addEventListener("click", function(){
  obj.startTimer();
});

clearTimerBtn[0].addEventListener("click", function(e){
  obj.clearTimer();
});

Note: Here in variable startTime and serverCurrrentTime I have used the JavaScript's date method which returns timezone of your browser, so instead you can also use the dates of your backend. Just replace JS dates with your BE dates.

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;
}

Demo: https://jsfiddle.net/KJO/aLj4bek1/43/