index.html

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

jQuery-Google-Finance-Stock-Ticker.markdown

jQuery/Google Finance Stock Ticker

Testing out a jQuery / Google Finance stock ticker

Forked from Erick Cardoza's Pen jQuery/Google Finance Stock Ticker.

Forked from Erick Cardoza's Pen jQuery/Google Finance Stock Ticker.

A Pen by Captain Anonymous 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:';
            var stockName = stockInfo.t;
            var syss =  stockInfo.c;
            stockString += '<div class="symbolname"> ' + 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').append(stockString);
            $('.symbolname').append(syss);
            $('.symbolreloco').append(stockName);
        });
    }
});

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;   
}