JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-sham.js"></script>
<script src="http://flightjs.github.io/release/latest/flight.js"></script>
<div class="container">
    <div class="timer-widget">
        <div class="controls">
            <button class="btn-toggle">Start</button>
            <button class="btn-reset">Stop</button>
        </div>
        <div class="display frozen">0</div>
    </div>
</div>

CSS

/* Yep, poor CSS skills... */
body {
    margin: 0;
    padding: 0;
    font-family:"Lucida Console", Monaco, monospace;
    text-align: center;
}
.container {
    padding: 20px;
}
.timer-widget {
    display: inline-block;
    background-color: rgb(231, 236, 238);
    border: 1px solid black;
}
.timer-widget .controls {
    margin: 8px;
}
.timer-widget .controls button {
    font-family:"Lucida Console", Monaco, monospace;
    background-color: #BBB;
    border: 1px solid black;
    padding: 4px;
    width: 96px;
}
.timer-widget .display {
    margin: 8px;
    padding: 8px;
    background-color: lime;
    border: 1px solid black;
    border-top-width: 2px;
    text-align: center;
    font-size: 36px;
}
.timer-widget .display.frozen {
    opacity:0.4;
    filter:alpha(opacity=40);
}

JavaScript

// ==========================================
// Copyright 2014 Fábio Priamo
// Licensed under The MIT License
// http://opensource.org/licenses/MIT
//
// My first approach to @flight. This is a
// small app I cooked up in order to grasp
// some Twitter Flight basics.
// Beware the rought edges!
// @fhpriamo
// ==========================================

// ==========================================
// Timer Data Component
// ==========================================
var TimerData = flight.component(function () {
    
    this.defaultAttrs({
        secondsElapsed: 0,
        clockRunning: false
    });
    
    this.startClock = function () {
        var that = this;
        this.interval = window.setInterval(function () {
            that.tick();
        }, 1000);
        this.attr.clockRunning = true;
        this.trigger('dataClockStarted');
    };
    
    this.stopClock = function () {
        window.clearInterval(this.interval);
        this.attr.clockRunning = false;
        this.trigger('dataClockStopped');
    };
    
    this.tick = function () {
        this.attr.secondsElapsed += 1;
        this.trigger('dataTick', {
            secondsElapsed: this.attr.secondsElapsed
        });
    };
    
    this.toggleClock = function () {
        if (this.attr.clockRunning) {
            this.stopClock();
        } else {
            this.startClock();
        }
    };
    
    this.resetClock = function () {
        this.attr.secondsElapsed = 0;
        this.stopClock();
        this.trigger('dataClockReset', {
            secondsElapsed: this.attr.secondsElapsed
        });
    };
    
    this.after('initialize', function () {
        this.on(document, 'uiToggleRequested', this.toggleClock);
        this.on(document, 'uiResetRequested', this.resetClock);
    });
});

// ==========================================
// Display UI Component
// ==========================================
var DisplayUI = flight.component(function () {
    
    this.render =...