JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<div id="countdown">
    <div id="minutes" style="float:left">00</div>
    <div style="float:left">:</div>
    <div id="seconds" style="float:left">00</div>
</div>
<div id="aftercount" style="display:none">Time has gone</div>

JavaScript

var sTime = new Date().getTime();
var countDown = 30;

function UpdateTime() {
    var cTime = new Date().getTime();
    var diff = cTime - sTime;
    var seconds = countDown - Math.floor(diff / 1000);
    if (seconds >= 0) {
        var minutes = Math.floor(seconds / 60);
        seconds -= minutes * 60;
        $("#minutes").text(minutes < 10 ? "0" + minutes : minutes);
        $("#seconds").text(seconds < 10 ? "0" + seconds : seconds);
    } else {
        $("#countdown").hide();
        $("#aftercount").show();
        clearInterval(counter);
    }
}
UpdateTime();
var counter = setInterval(UpdateTime, 500);