JSFiddle - React, Tailwind, and code Playground

by mattbaker

HTML

<script src="https://raw.github.com/mattbaker/Reactive.js/master/src/reactive.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<div>Current Time: <span id="time"></span></div>
<div>Day of the Week: <span id="day-of-week"></span></div>
<div>Is it Friday? <span id="is-friday"></span></div>

JavaScript

$(function() {
    var now = $R.state(new Date);
    setInterval(function () {now(new Date)}, 1);
    
    var day = $R(function (date) {
        var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
        return days[date.getDay()];
    }).bindTo(now);
    
    var clockDisplay = $R(function (now) {
        $("#time").text(now.toString());
    }).bindTo(now);
    
    var dayOfTheWeekText = $R(function (day) {
        $("#day-of-week").text(day)
    }).bindTo(day);
    
    var isItFridayText = $R(function (day) {
        $("#is-friday").text(day === 'Fri' ? "Yup!" : "Nope");
    }).bindTo(day);
});