JSFiddle - React, Tailwind, and code Playground

by pawangupta18

HTML

<div class="container">

<div id="time">

    <span class="digit" id="hr">00</span>

    <span class="txt">Hr</span>

    <span class="digit" id="min">00</span>

    <span class="txt">Min</span>

    <span class="digit" id="sec">00</span>

    <span class="txt">Sec</span>

    <span class="digit" id="count">00</span>

</div>

<div id="btn-container">

    <button class="btn" id="start" onclick="start()">Start</button>

    <button class="btn" id="stop" onclick="stop()">Stop</button>

    <button class="btn" id="reset" onclick="reset()">Reset</button>

</div>      

</div>

CSS

*{margin: 0px; padding: 0px; list-style: none; box-sizing: border-box;}

body{margin: 0px; padding: 0px; list-style: none; height: 100vh; background-color: #2c3e50;}    

.container{ width: 1270px; margin: 0 auto; color: #d7dfe4;}

.digit{font-size: 150px; font-weight: bold;}

.text{font-size: 40px; font-weight: bold;}

#btn-container{text-align: center; margin-top: 40px;}

.btn{ padding: 7px 35px; font-size: 15px;  margin: 0 10px; color: #fff; border: none; cursor: pointer;}    

#time {text-align: center;} 

#start{background-color: #1abc9c;}

#stop{background-color: #3498db;}

#reset{background-color: #e74c3c;}

JavaScript

var hr = 0;
var min = 0;
var sec = 0;
var count = 0;
var time = false;

function start(){
    time = true;
    stopwatch();
}   

function stop(){
    time = false;
}   

function reset(){
  time = false;  
    hr = 0;
    min = 0;
    sec = 0;
    count = 0;
    document.getElementById("hr").innerHTML = "00";
    document.getElementById("min").innerHTML = "00";
    document.getElementById("sec").innerHTML = "00";
    document.getElementById("count").innerHTML = "00";
}    

function stopwatch(){
if(time == true){
    count = count+1;
    if(count == 100){
        sec = sec+1;
        count = 0;
    }

if(sec == 60){
    min = min+1;
    sec = 0;
}    

if(min == 60){
    hr = hr+1;
    min = 0;
    sec = 0;
}    
    var hrstring = hr;
    var minstring = min;
    var secstring = sec;
    var countstring = count;
    if(hr < 10){
        hrstring = "0" + hrstring; 
    }
    if(min < 10){
        minstring = "0" + minstring; 
    }
    if(sec < 10){
        secstring = "0" + secstring; 
    }
    if(count < 10){
        countstring = "0" + countstring; 
    }

    document.getElementById("hr").innerHTML = hrstring;
    document.getElementById("min").innerHTML = minstring;
    document.getElementById("sec").innerHTML = secstring;
    document.getElementById("count").innerHTML = countstring;
    setTimeout ("stopwatch()", 10)
 }   
}