JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<div id="date"></div>
<div id="clock"></div>
<button id="startTimer">Start</button>

CSS

body {
  background-image: url(http://reginazen.webs.com/Blue-ZenKoan%20%281%29.jpg);
}

JavaScript

$(document).ready(function() {
    $("#date").html("<p>" + moment().format("dddd") + "</p>");
    
    var startTime;
    var gong = new Audio("http://callahanweb.xyz/_sounds/chinese-gong-daniel_simon.mp3");
    
    // Click button to start timer
    $("#startTimer").click(function() {
        // Save the time at start
        startTime = moment();
        gong.play();
        
        // Display clock immediately
        $("#clock").html("<h3>" + moment().format("h:mm:ss a") + "</h3>");
        
        // Update clock every second
        var ticker = setInterval(function() {
            var timeNow = moment();
            // check difference between time now and start time
            var timeDiff = timeNow.diff(startTime, "minutes");
            $("#clock").html("<h3>" + timeNow.format("h:mm:ss a") + "</h3>");
            
            
            // alert(timeDiff);
            
            if (timeDiff === 1) {
                gong.play();
                clearInterval(ticker);
                alert("Time up!");
            }
            
        }, 1000);
        
        // Replace start button with stop button
        $("button").replaceWith("<button id='stopTimer'>Stop</button>");
        $("#stopTimer").on("click", function() {
            clearInterval(ticker);
            alert("Timer stopped.");
        });
    });
});