JSFiddle - React, Tailwind, and code Playground

by Karthik Elumalai

HTML

<h1 id="res">00:00:00</h1>
<input type="button" value="start" id="btnstart" />
<input type="button" value="stop" id="btnstop"/>
<input type="button" value="clear" id="btnclear"/>

JavaScript

var startbutton = document.getElementById("btnstart");
var stopbutton = document.getElementById("btnstop");
var clearbutton = document.getElementById("btnclear");
var seconds=0,minutes=0,hours=0,currenttimervalue=0;

//start of button click logics

//call timer logic when startbutton clicks
startbutton.onclick = timerlogicintiator;

//stop the watch by using clearTimeout function
stopbutton.onclick = function()
                      { 
                        clearTimeout(currenttimervalue);

                      }
clearbutton.onclick = function()
{
      
document.getElementById("res").innerHTML = "00:00:00";
seconds=0,minutes=0,hours=0;
}

//end of button click logics

function CalculateTimerPartsAndDisplay()
{

  //increment logic
  seconds++;
  if(seconds>= 60) 
   {
     seconds = 0; minutes++;
    
     if(minutes>= 60) 
     {
       minutes =0 ; 
       hours++;
     } //end of if(minutes>= 60)

   } //end of if(seconds>= 60)


//display
document.getElementById("res").innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00")

 
}//end of function CalculateTimerPartsAndDisplay()


function timerlogicintiator()
{
   currenttimervalue = setInterval(CalculateTimerPartsAndDisplay, 1000);

}//end of function timerlogicintiator()


//initial call of timer logic
timerlogicintiator();