JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<script src="//js.pusher.com/2.2/pusher.min.js"></script>
<div class="stock-ticker grow"> <span></span>
 <span></span>
 <span></span>
 <span></span>

</div>

CSS

.stock-ticker {
    height: 20px;
    position: relative;
}
.stock-ticker span {
    width: 3px;
    height: 100%;
    background-color: #aaa;
    margin-left: 1px;
    transition: all 0.4s;
    position: absolute;
    bottom: 0;
}

.stock-ticker span:nth-child(1) { left: 0; }
.stock-ticker span:nth-child(2) { left: 4px; }
.stock-ticker span:nth-child(3) { left: 8px; }
.stock-ticker span:nth-child(4) { left: 12px; }

.stock-ticker.fall span { background: red; }
.stock-ticker.fall span:nth-child(1) { height: 100%; }
.stock-ticker.fall span:nth-child(2) { height: 75%; }
.stock-ticker.fall span:nth-child(3) { height: 50%; }
.stock-ticker.fall span:nth-child(4) { height: 25%; }

.stock-ticker.grow span { background: green; }
.stock-ticker.grow span:nth-child(1) { height: 25%; }
.stock-ticker.grow span:nth-child(2) { height: 50%; }
.stock-ticker.grow span:nth-child(3) { height: 75%; }
.stock-ticker.grow span:nth-child(4) { height: 100%; }

JavaScript

Pusher.log = function (message) {
    if (window.console && window.console.log) {
        window.console.log(message);
    }
};

var pusher = new Pusher('0584ba3d5eecd5b31875');
var channel = pusher.subscribe('test_channel');
channel.bind('my_event', function (data) {
    
    console.log(data.change, data);
    
    $('.stock-ticker').removeClass('fall grow').addClass(function() {
        return data.change < 0 ? 'fall' : 'grow' 
    });
    
    /*if (data.change > 0) {
        $('.stock-ticker').addClass('fall').removeClass('grow');
    } else {
        
    }*/
});

/*setInterval(function() {
    $('.stock-ticker').toggleClass('grow fall');
}, 1000);*/