JSFiddle - React, Tailwind, and code Playground

by thundercracker

HTML

<div id='timer'></div>

JavaScript

$(document).ready(function(){
    Timer = null;
    TotalSeconds = null;
    CreateTimer('timer', 90);});


function CreateTimer(TimerID, Time) {
    console.log(TotalSeconds);
        Timer = document.getElementById(TimerID);
        TotalSeconds = Time;
        console.log(TotalSeconds);
        UpdateTimer()
        setTimeout(function(){Tick();}, 1000);
}

function Tick() {

     if (TotalSeconds <= 0) 
     {
                alert("Time's up!")
                return;
     }

        TotalSeconds -= 1;
        UpdateTimer()
        window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
        Timer.innerHTML = TotalSeconds;
}

function UpdateTimer() {
        var Seconds = TotalSeconds;

        var Days = Math.floor(Seconds / 86400);
        Seconds -= Days * 86400;

        var Hours = Math.floor(Seconds / 3600);
        Seconds -= Hours * (3600);

        var Minutes = Math.floor(Seconds / 60);
        Seconds -= Minutes * (60);


        var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)

        Timer.innerHTML = TimeStr ;
}


function LeadingZero(Time) {

        return (Time < 10) ? "0" + Time : + Time;

}