JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<nav class="clock-type">
    <ul>
        <li><a href="/countdown">Countdown</a></li>
        <li><a href="/stopwatch">Stopwatch</a></li>
        <li><a href="/clock">Clock</a></li>
    </ul>
</nav>

<section class="countdown settings">
    Countdown
</section>
<section class="stopwatch settings selected-type">
    Stopwatch
</section>
<section class="clock settings">
    Clock
</section>
<section class="global-settings">
    Global
</section>

<button id="launcher">Launch</button>

CSS

section.settings {
    display: none;
}
section.settings.selected-type {
    display: block;
}

JavaScript

(function ($) {
    $.fn.clock = function (options) {
        var control,
            currentTime,
            clockEl = this,
            startTime,
            flasher;

        $.extend(options, {
            'positiveDigits' : 6,
            'fractionDigits' : 1,
            'separator' : ':',
            'initial' : 0,
            'tickTime' : 15
        });

        this.on('clock-start', function (event) {
            var initial = clockEl.data('clock-time');
            (function tick() {
                var current,
                    now = $.now();
                if (options.type === 'countdown') {
                    current = initial + startTime - now;
                    if (current <= 0) {
                        current = 0;
                        clockEl.data('clock-time', current);
                        return this.trigger('end');
                    }
                } else {
                    current = now - initial + startTime;
                }
                clockEl.data('clock-time', current);
                window.setTimeout(tick, options.tickTime);
            })();
        });
        this.on('clock-end', function (event) {
            clockEl.addClass('clock-flash');
        });
        this.on('clock-reset', function (event) {
            clockEl.removeClass('clock-flash');
        });
    };
}(jQuery));

(function ($) {
    $.extend({
        'newWindow' : function (options) {
            var booleanOptions = ['location', 'menubar', 'status',
                    'scrollbars', 'resizable', 'toolbar'],
                numericOptions = ['width', 'height', 'left', 'top'],
                optionStr = '',
                win;
            $.extend(options, {
                url : false,
                name : '_blank'
            });
            $.each(booleanOptions, function (index, value) {
                if (options.hasOwnProperty(index)) {
                    optionStr += index + '=';
                    if (value) {
        ...