Simple Quotes Widget

by thetuneupguy

HTML

<body>
    <div id="titlebkgrnd"></div>
    <div id="titletext">Commodities</div>
    <div id="titleaccent"></div>
    <div id="blk-1" class="current">
    <table class="table"> </table>
</div>
</body>

CSS

#titlebkgrnd {
    background-color: #103346;
    height: 28px;
    width: 305px;
}
#titletext {
    color: #ffffff;
    font-size: 15pt;
    position: fixed;
    top: 11px;
    left: 18px;
}
#titleaccent {
    background-color: #C3A43F;
    height: 6px;
    width: 305px;
}
.my-new-list {
    font-size: 13pt;
}
#name{
    font-weight: bold;
}
.cells{
    padding-right: 12px;
}
.table{
    padding-top: 12px;
}

/* These two classes, .red & .green are used to change the font color of values
 * depending on the symbol that preceeds the value (+ or -)
 */
.red { color: red; }
.green { color: green; }

JavaScript

//This function makes the request to the Yahoo API for symbols GCF14.CMX, SIF14.CMX, PAH14.NYM, PLF14.NYM
//To create the link for the query, the YQL console was utilized
$(function () {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20yahoo.finance.quotes%20WHERE%20symbol%20in(%22GCF14.CMX%22%2C%22SIF14.CMX%22%2C%22PAH14.NYM%22%2C%22PLF14.NYM%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=').done(function (data) {
        console.log("data: ", data);
        console.log(data.query.results.quote);
        $.each(data.query.results.quote, function (key, obj) {
            var changeClass = '';
            var changeInPercentClass = '';
            var change = obj.Change;
            //var changeInput = Number(change.toString());
            var num = parseFloat(change);
            var str = num.toFixed(10);
            str = str.substring(0, str.length-8);
            var $tr = $('<tr/>', {
                'class': 'my-new-list'
            }).appendTo('#blk-1 table');
            $tr.append($('<td id="name" class="cells"/>').text(obj.Name.split(' ')[0] || "--"));
            $tr.append($('<td class="cells"/>').text(obj.AskRealtime || "--"));     
            (obj.Change.substr(0,1) === '+') ? changeClass = 'green' : changeClass = 'red';
            
            (obj.Change.substr(0,1) === '+') ? changeInPercentClass = 'green' : changeInPercentClass = 'red';
            
            $tr.append($('<td class="'+changeClass+'">').text(str || "--"));
            var re = /([+|-]\d\.\d\d\%)/gi;
            var rt = re.exec(obj.ChangePercentRealtime);
            $tr.append($('<td class="'+changeInPercentClass+'">').text( rt[0] || "--"));
        });
    });
});