JSFiddle - React, Tailwind, and code Playground

by guaccio2209

HTML

<div style="height: 700x; width: 100%;">
        <table style="border:solid; border-color:#666;" >
            
  <tr>

    <td style="border:solid; border-color:#DDD;">Symbol</td>
    <td style="border:solid; border-color:aqua;">Price</td>
    <td style="border:solid; border-color:yellow;">Change</td>
    <td style="border:solid; border-color:purple;">%</td>

</tr>

<tr>
<td id='dvStockTicker' style="border:solid; border-color:#DDD;"></td>            
<td id='dvStockTicker2' style="border:solid; border-color:aqua;" ></td>            
<td id='dvStockTicker3' style="border:solid; border-color:yellow;"></td>            
<td id='' style="border:solid; border-color:purple;"></td>            
          
            
            
</tr>
            
            
            </table>
        </div>

CSS

div.stockTicker
		{
			font-size: 18px;
			list-style-type: none;
			margin: 0;
			padding: 0;
			position: relative;
           
		}
		div.stockTicker span.quote
		{
			margin: 0;
			font-weight: bold;
			color: #009CCC;
			padding: 0 5px 0 10px;
             
		}
        
        .quote{ float: left;}
        .LastTradePriceOnly{ float: left;}
		.GreenText{color: Green;}
		.RedText{color: Red;}
		.up_green
		{
			background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/up.gif) no-repeat left center;
			padding-left: 10px;
			margin-right: 5px;
		}
		.down_red
		{
			background: url(http://www.codescratcher.com/wp-content/uploads/2014/11/down.gif) no-repeat left center;
			padding-left: 10px;
			margin-right: 5px;
		}

JavaScript

$(window).load(function () {
            StockPriceTicker();
            setInterval(function() {StockPriceTicker();} , 10000);
        });
        function StockPriceTicker() {
            var Symbol = "", CompName = "", Price = "", ChnageInPrice = "", PercentChnageInPrice = ""; 
            var CNames = "^FTSE,FTSEMIB.MI,^IXIC,^N225,^HSI,EURUSD=X";
            var flickerAPI = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + CNames + "%22)&env=store://datatables.org/alltableswithkeys";
            var StockTickerHTML = "";
                   
            
            var StockTickerXML = $.get(flickerAPI, function(xml) {
                $(xml).find("quote").each(function () {
                    Symbol = $(this).attr("symbol");
                    $(this).find("Name").each(function () {
                        CompName = $(this).text();
                    });
                    $(this).find("LastTradePriceOnly").each(function () {
                        Price = $(this).text();
                    });
                    $(this).find("Change").each(function () {
                        ChnageInPrice = $(this).text();
                    });
                    $(this).find("PercentChange").each(function () {
                        PercentChnageInPrice = $(this).text();
                    });
                    
                    var PriceClass = "GreenText", PriceIcon="up_green";
                    if(parseFloat(ChnageInPrice) < 0) { PriceClass = "RedText"; PriceIcon="down_red"; }
                    StockTickerHTML = StockTickerHTML + "<span class='" + PriceClass + "'>";
                    StockTickerHTML = StockTickerHTML + "<span class='quote'>" + CompName + " </span> ";
                    StockTickerHTML = StockTickerHTML + parseFloat(Price).toFixed(2) + " ";
                    StockTickerHTML = StockTickerHTML + "<span class='" + PriceIcon + "'></span>" +...