JSFiddle - React, Tailwind, and code Playground

by santhucool007

HTML

<div id="myTimer">
    <p id='timer'></p>
    <input type="button" value="stop"></input>
    <input type="button" value="start"></input>
    <input type="button" value="reset"></input>   
</div>

CSS

#timer {
   font-size: 50px;
}

JavaScript

$(document).ready(function(){
var startTime   = 10
var currentTime = 0
var myTimer
var myTimerSpeed = 1000 // 1 sec

$('#timer').css('color', 'black');
resetTimer()
$('input[value="start"]' ).on('click' , startTimer)
$('input[value="stop"]'  ).on('click' , stopTimer)
$('input[value="reset"]' ).on('click' , resetTimer)


function resetTimer(){
    stopTimer()
    currentTime = startTime
    $('#timer').html(currentTime)
}

function startTimer(){   
    if(currentTime<=0){
       resetTimer()
       startTimer()
    }else{
       myTimer = setInterval(timerTick,myTimerSpeed);
    }
}

function stopTimer(){
    clearInterval(myTimer)
}

function timerTick(){
    currentTime--
    $('#timer').html(currentTime)
    if(currentTime == 0){
        stopTimer()
        alert("time's Up")
    }
    if(currentTime <= 5){
        $('#timer').css('color', 'red');
    }
}
});