JSFiddle - React, Tailwind, and code Playground

by Steve Mann

HTML

<div style="padding:32px;">Stock Ticker :
    <input id="symb" type="textbox" value=""></input>
</div>
<button id="getupdate" name="getupdate" type="button">Get Updates!</button>
<div id="results"></div>

CSS

body {
    font-family:helvetica;
    font-size:14px;
}

JavaScript

jQuery(document).ready(function ($) {
    $('#getupdate').click(function () {
        var symbol = $('input[id=symb]').val();
        var url = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%3D%22' + symbol + '%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=';
        $.getJSON(url, function (data) {
            var items = [];
            $('#results').html('');
            $.each(data.query.results.quote, function (key, val) {
                items.push('<li id="' + key + '">' + val + '</li>');

            });
            $('<ul/>', {
                'class': 'table',
                html: items.join('')
            }).appendTo('#results');
        });
    });
});