jQuery/Google Finance Stock Ticker

index.html

<div class="stockTick"></div>

jQuery-Google-Finance-Stock-Ticker.markdown

jQuery/Google Finance Stock Ticker

Testing out a jQuery / Google Finance stock ticker

A Pen by Erick Cardoza on CodePen.

License.

script.js

var gstock = ["INDEXTSI:OSPTX", "PPY:000001"];
$(document).ready(function () {
    for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[i]+"&callback=?", function (response) {
            var stockInfo = response[0];
            var stockString = '<div class="stockWrapper">STOCK:';
            stockString += '<span class="stockSymbol"> ' + stockInfo.t + ' </span>';
            stockString += '<span class="stockPrice">' + stockInfo.l + '</span>';
            stockString += '<span class="stockChange">' + stockInfo.c + '</span>';
            stockString += '<span>at</span> <span class="stockTime">' + stockInfo.ltt + '</span>';
            stockString += '</div>';
            $('.stockTick').prepend(stockString);
        });
    }
});

style.less

.stockWrapper {
    display: block;
    padding: 20px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

.stockSymbol {
    font-weight: 600;
}

.stockPrice {
    font-weight: 600;
    color: red;
}

.stockChange {
    font-weight: 600;
    color: green;
}

.stockTime {
    font-weight: 600;
    color: grey;   
}