JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
<div id="stopwatch">
    <span id="hours"></span>:
    <span id="minutes"></span>:
    <span id="seconds"></span>::
    <span id="milliseconds"></span>
</div>
<div id="buttons" class="claro">
    <button id="start_stop_resume"></button>
    <button id="reset"></button>
</div>

CSS

body{
    font-family: "Arial", Helvetica, sans-serif;
}
#stopwatch, #buttons{
    text-align: center;
}
#stopwatch{    
    font-size: 150%;
}
.claro *{
    outline: none;
}

JavaScript

dojoConfig = {parseOnLoad: true};

resetStopwatch();

require(["dijit/form/ToggleButton", "dijit/form/Button", "dojo/dom", "dojo/dom-attr", "dojo/domReady!"], function(ToggleButton, Button, dom, domAttr){
    
    var timeUpdate;
    
    var toggleButton = new ToggleButton({
        showLabel: true,
        checked: false,
        label: "Start",
        onChange: function() {
            if (this.get('label') == "Start") {
                this.set('label', 'Stop');
                
                var milliseconds = seconds = minutes = hours = 0;
                
                timeUpdate = updateTime(domAttr, 0, 0, 0, 0);
            } 
            else if (this.get('label') == "Resume") {
                this.set('label', 'Stop');
                
                // fetch current time in the stopwatch
                prev_milliseconds = parseInt(domAttr.get("milliseconds", "innerHTML"));
                prev_seconds      = parseInt(domAttr.get("seconds", "innerHTML"));
                prev_minutes      = parseInt(domAttr.get("minutes", "innerHTML"));
                prev_hours        = parseInt(domAttr.get("hours", "innerHTML"));
                timeUpdate = updateTime(domAttr, prev_hours, prev_minutes, prev_seconds, prev_milliseconds);
                
            }
            else if (this.get('label') == "Stop"){
                this.set('label', 'Resume');
                clearInterval(timeUpdate);
            }
        }
    }, "start_stop_resume");
    
    var resetButton = new Button({
        label: "Reset",
        onClick: function(){
            toggleButton.set('label', "Start");
            clearInterval(timeUpdate);
            resetStopwatch();        
            resumeFlag = false;
        }
    }, "reset");
});

function updateTime(domAttr, prev_hours, prev_minutes, prev_seconds, prev_milliseconds){
    var startTime = new Date();
    timeUpdate = setInterval(function(){
        var timeElapsed = new Date().getTime() -...