JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<div id="count"></div>
<button>Toggle Requests</button>
<ul id="requests"></li>

CSS

li {
    font-size:.8em;
    height:2em;
    overflow:hidden;
    border-bottom: 1px solid #555;
    margin-top:4px;
    padding-bottom:4px;
}

JavaScript

var running = true,
    $requests = $('#requests'),
    $count = $('#count'),
    total = 0,
    run = function() {
        $.getJSON( 'http://yuilibrary.com/gallery/api/random?callback=?', 
            function( data ) {
                $requests.html( '<li>' + data.modules[0].summary + "</li>" );
                $count.html( total++ );
                if ( running ) {
                    setTimeout( run, 20);
                }         
            
        });
    };

$('button').click( function() {
    if ( running ) {
        running = false;
    } else {
        running = true;
        run();
    }   
});

run();