JSFiddle - React, Tailwind, and code Playground

by SnehalKadwe

HTML

<script src="https://cdn.tailwindcss.com/3.0.0"></script>
<div class="border p-10 shadow w-full">
  <button onClick="startTimer()" class="border p-1 w-1/2 border mb-5 rounded bg-indigo-400 border-indigo-300">
    Start
  </button>
  <div class="flex flex-row">
    <div id="getClockInput" class="flex flex-row flex-wrap">
      <input class="border border-indigo-400 p-2 rounded m-2" type="number" value="" id="hrs" placeholder="enter hours">

      <input class="border border-indigo-400 p-2 rounded m-2" type="number" value="" id="min" placeholder="enter minutes">

      <input class="border border-indigo-400 p-2 rounded m-2" type="number" value="" id="sec" placeholder="enter seconds">
    </div>
    <div id="clock" class="w-100 h-12 bg-red-100 rounded-full border border-red-200 w-full p-2">
      <div class="flex flex-row"  id="timer">
        <!-- <div id="setHrs">
          1
        </div>
        <div> : </div>
        <div id="setMin">
          00
        </div>
        <div> : </div>
        <div id="setSec">
          00
        </div> -->
      </div>
    </div>
  </div>
</div>

JavaScript

function startSetTimer(duration, sec, display) {
    var timer = duration;
    var secondTimer = sec;
    setInterval(function () {
        var minutes = parseInt(timer / 60, 10)
        var seconds = parseInt(secondTimer);
				console.log(minutes, seconds);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
			
        
      	
        if(secondTimer > 0){
      		secondTimer -= 1;
        } else {
        if (--timer < 0) {
            timer = duration;
        }
        }
    }, 1000);
}

function startTimer() {

	const hour = document.querySelector('#hrs').value;
  const minutes = document.querySelector('#min').value;
  const seconds = document.querySelector('#sec').value;
  
    var Minutes = 60 * minutes,
    
        display = document.querySelector('#timer');
    startSetTimer(Minutes, seconds, display);
};