JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

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() - startTime.getTime();

        // calculate hours                
        hours = parseInt(timeElapsed / 1000 / 60 / 60) +...