JSFiddle - React, Tailwind, and code Playground

by Dan Shahin

HTML

<script src="https://socketio.mtgox.com/socket.io/socket.io.js"></script>
<!doctype html>
<body>
    <div id="ticker">last <span class="last">&nbsp;</span> high <span class="high">&nbsp;</span> low<span class="low" />&nbsp;</span>avg<span class="avg" />&nbsp;</span>vol<span class="vol" />&nbsp;</span>
        <label>show</label>
        <input id="show" value='10' />
    </div>
    <div id="price">connecting...</div>&nbsp;
    <div id="history"></div>
</body>

CSS

body {
    min-width:650px;
    overflow-x:hidden;
    text-align: left;
}
#price {
    font-size: 14px;
    display:none;
}
#ticker {
    font-size: 14px;
    width:100%;
}
#ticker span.last {
    background-color: lightblue;
    font-size: 14px;
}
#ticker span.high {
    background-color: lightgreen;
    font-size: 14px;
}
#ticker span.low {
    background-color: pink;
    font-size: 14px;
}
#ticker span.avg {
    background-color: violet;
    font-size: 14px;
}
#ticker span.vol {
    background-color: gray;
    font-size: 14px;
}
.low {
    background-color: pink;
    font-size: 18px;
}
.high {
    background-color: lightgreen;
    font-size: 18px;
}
.neutral {
    background-color: gray;
    font-size: 18px;
}
#show {
    width:50px;
}

JavaScript

jQuery(document).ready(function ($) {
    var conn = io.connect('https://socketio.mtgox.com/mtgox'),
        price = null,
        diff = null,
        vol = null;

    conn.on('message', function (data) {
        // Handle incoming data object.
        if (data.ticker !== undefined) {
            var ticker = data.ticker,
                time = new Date(data.ticker.now / 1000),
                formattedTime = formatTime(time),

                high = ticker.high.display,
                low = ticker.low.display,
                avg = ticker.avg.display,
                last = ticker.last.display,
                vol = ticker.vol.display;

            // will display time in 10:30:23 format
            $('#ticker span.high').html(high);
            $('#ticker span.low').html(low);
            $('#ticker span.avg').html(avg);
            $('#ticker span.vol').html(vol);
            $('#ticker span.last').html(last);


        }
        if (data.depth !== undefined) {
            //console.log(data);
            var newPrice = data.depth.price,
                color = 'gray',
                className = 'neutral',
                time = new Date(data.depth.now / 1000),
                formattedTime = formatTime(time);


            //console.log(date.getHours());
            if (newPrice > price) {
                //color = 'lightgreen';
                className = 'high';
            } else if (newPrice < price) {
                //color = 'pink';
                className = 'low'
            } else {
                className = 'neutral'
            }
            diff = newPrice - price;
            price = newPrice;
            vol = data.depth.volume_int;

            $('#price')
                .html('BTC ' + formattedTime + ' price: $' + price + ' change:(' + diff + ')' + ' volume: ' + vol)
                .clone().addClass(className)
                .remove()
                .prependTo('#history')
                .css({
                'font-size': '14px'
  ...