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");



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




function CalculateTimerPartsAndDisplay()
{
var d = new Date();
//display
document.getElementById("res").innerHTML =  d.toLocaleTimeString();

}//end of function CalculateTimerPartsAndDisplay()


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

}//end of function timerlogicintiator()


//intial call of timer logic
timerlogicintiator();