TipTheWeb TipStream (YUI 3)

Render a TipTheWeb TipStream by fetching the data using JSOP and YQL

by ericf

HTML

<ul id="tipstream"></ul>

CSS

.tip {
    margin: 10px 0;
}

JavaScript

YUI().use('node', 'yql', 'datatype-number', 'gallery-markout', function(Y){
    
    Y.YQL('SELECT * from json WHERE url="http://tiptheweb.org/tipstream/3mtvsfracef58/?format=json"', function(r){
        
        if ( ! (r && r.query && r.query.results)) { return; }
        r = r.query.results.json;
        
        var tipStream = Y.Markout('#tipstream');
        
        Y.each(r.tips, function(t){
            var tip = tipStream.li({ className: 'tip' });
            tip.text(Y.DataType.Number.format(t.amountCents/100, { prefix: '$', decimalPlaces: 2 }), ' Tip for ');
            tip.a({ href: t.link, target: '_blank' }).text(t.title);
        });
        
    });
    
});