JSFiddle - React, Tailwind, and code Playground

by krosaen

HTML

<html lang="en"> 
<head>
   <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<h1>Unnofficial Olympics feed demo</h1>
<a id="prev-day" class="btn" href="#">previous day</a>
<span data-bind="text: displayDate"></span>
<a id="next-day" class="btn" href="#">next day</a>
    
<!-- ko if: loading -->
    <p>loading ...</p>
<!-- /ko -->
<ul data-bind="foreach: events, visible: !loading()">
    <li>
        <span data-bind="text: discName"></span>
        <ul data-bind="foreach: $data.items">
            <li>
                <span data-bind="text: eventName"></span>
                <span data-bind="text: phaseName"></span>
                <a target="_blank" data-bind="text: $root.displayUTC(startTimeUTC), attr: {href: $root.nbcify(link)}"></a>                
            </li>
        </ul>
    </li>
</ul>

  <script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js" type="text/javascript"></script>

</body>

</html>

JavaScript

var baseurl = "http://www.staging2012.nbcolympics.com/mobilefeeds/cms/schedules/date=";

    
var displayDayOfWeek = function(day) {
    return ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"][day];
};
var pad2 = function(number) {   
    return (number < 10 ? '0' : '') + number
};
var apiUrlForDate = function(date) {
    var y = date.getFullYear(),
        m = date.getMonth() + 1,
        md = date.getDate(),
        apiUrl = baseurl + y + "-" + pad2(m) + "-" + pad2(md) + ".json";
    return apiUrl;
};

// take a json feed that doesn't support jsonp / cross domain access control 
// and proxy it through YQL to make it so
// thank you http://stackoverflow.com/questions/8537601/is-there-a-free-json-to-jsonp-proxy-server
var xdomainify = function(url, callback) {
    $.getJSON("http://query.yahooapis.com/v1/public/yql", {
        q: "select * from json where url=\"" + url + "\"",
        format: "json"
    }, function(data) {
        if (data.query.results) {
            callback(data.query.results.json.json);
        } else { 
            console.log("no results for " + url);
        }
    });
}

var viewModel = (function() {
    var self = {};
    self.currentDate = ko.observable(new Date());
    self.loading = ko.observable(true);
    self.events = ko.observable([]);
    
    self.displayDate = ko.computed(function() {
        var d = self.currentDate(),
            weekday = displayDayOfWeek(d.getDay()),
            m = d.getMonth() + 1,
            md = d.getDate(),
            display = weekday + " " + m + "-" + md;
        return display;
    });
    
    self.nbcify = function(url) {
        return "http://www.nbcolympics.com" + url;
    };
    
    // format is 20120729080000
    self.displayUTC = function(apiutc) {         
        var y = parseInt(apiutc.substr(0, 4), 10),
            m = parseInt(apiutc.substr(4, 2), 10),
            day = parseInt(apiutc.substr(6, 2), 10),
            h = parseInt(apiutc.substr(8, 2), 10),
            minute =...