JSFiddle - React, Tailwind, and code Playground

by michelejs

HTML

<a href="#" class="start">start</a>
<a href="#" class="stop">stop</a>
<a href="#" class="pause">pause</a>
<a href="#" class="reset">reset</a>

<div class="time"></div>

CSS

a{
    margin: 0 10px;
    color: gray;
}
.time{
    font-size: 50px;
    margin: 20px;
    font-family: monospace;
}

JavaScript

var startValue = 2000; //Number of milliseconds
var time = new Date(startValue);
var interv;


function done(){
    alert("Timer reached 00:00!");
}
$(function(){
    displayTime();
    $(".start").on("click", function(){
    interv = setInterval(function(){
        time = new Date(time - 1000);
        if(time<=0){
            done();
            clearInterval(interv);
        }
        displayTime();
    }, 1000);
    });
    $(".stop").on("click", function(){
        clearInterval(interv);
        time = new Date(startValue);
        displayTime();
    });
    $(".pause").on("click", function(){
        clearInterval(interv);
    });
    $(".reset").on("click", function(){
        time = new Date(startValue);
        displayTime();
    });
});

function displayTime(){
    $(".time").text(fillZeroes(time.getMinutes()) + ":" + fillZeroes(time.getSeconds()));
}

function fillZeroes(t){
    t = t+"";
    if(t.length==1)
        return "0" + t;
    else
        return t;
}