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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion.calendar/2.0.2/js/ion.calendar.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Timer</a></li>
  <li><a href="#">Session Details</a></li>
</ul>

<div id="date"></div>
<h3 id="showCal">
  <span class="fa fa-plus"></span> Show Calendar
</h3>
<h3 id="hideCal">
  <span class="fa fa-minus"></span> Hide Calendar
</h3>
<div id="calendar"></div>
<button id="startTimer">Start Timer</button>
<div id="clock"></div>

CSS

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

#calendar,
#hideCal {
  display: none;
}

.fa {
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
    $("#date").html("<p>" + moment().format("dddd") + "</p>");
    
    var sessionLengthMins = 25;
    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 === sessionLengthMins) {
                gong.play();
                clearInterval(ticker);
                alert("Time up!");
            }
            
        }, 1000);
        
        // Replace start button with stop button
        $("button#startTimer").replaceWith("<button id='stopTimer'>Stop Timer</button>");
        $("#stopTimer").on("click", function() {
            clearInterval(ticker);
            alert("Timer stopped.");
        });
    });
    
    // Initialize Calendar
    $("#calendar").ionCalendar({
        onClick: function(date) {
            alert(date);
            // TODO:
            // Send an AJAX request to nodejs route
            // nodejs queries the database
            // show modal with information about that day
            
            // create a new BS tab
            var newTab = $("<li><a href='#'>" + date + "</a></li>");
            $(".nav").append(newTab);
        }
    });
    
    // Show calendar on click
    $("#showCal").click(function() {
        $("#calendar").show();
      ...