JSFiddle - React, Tailwind, and code Playground

by simucal

HTML

<script src="http://mustache.github.com/extras/mustache.js"></script>
<div id="content"></div>

CSS

.stock {
    margin-top: 10px;
}

JavaScript

var url = 'http://www.google.com/finance/info?infotype=infoquoteall&q=AAPL,CMG,F&callback=?';

var template =     
    '{{#quotes}}' +
    '<div class="stock">' +
        '<div class="name">{{name}}</div>' +
        '<div class="last">${{l}}</div>' +
    '</div>' +
    '{{/quotes}}';


var streamer = (function () {  
    
    return {
        init: function() {
            streamer.poll();
        },
        poll: function() {
            $.getJSON(url).always(function(data) {
                var quoteData = {quotes: data};
                streamer.renderQuotes(quoteData);
                setTimeout( streamer.poll, 5000 );
            });
        },       
        renderQuotes: function(quoteData) {
             var renderedQuotes = Mustache.to_html(template, quoteData); 
                $('#content').html(renderedQuotes);
                $('.last').animate({color:'red'}, 400)
                          .animate({color:'black'}, 1000);
        }   
    }    
}());

streamer.init();