JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

<div id="container">
    <div id="controls">
        <button id="start">start</button>
        <button id="stop">stop</button>
    </div>
    <div id="content">
    </div>
</div>

CSS

.right {
    text-align: right;
}
.left {
    text-align: left;
}
td {
    padding: 0 5px;
}

JavaScript

var Globals = {
    old_comments: [],
    loop: null
}

var Comments = {
    get: function(){    
        Globals.ajax_request = $.ajax({
            url: "http://www.reddit.com/comments/.json?limit=100",
            dataType: "jsonp",
            jsonp: "jsonp",
            success: function(data){
                Comments.display(Comments.findNew(data));
            },
            error: function(jXHR, textStatus, errorThrown) {
                if(textStatus !== 'abort'){
                    alert('Could not load feed. Is reddit down?');
                }
            }                
        });
    },
    
    findNew: function(data){
        var new_comments = [], comments = data.data.children;
        for(i in comments){
            if(Globals.old_comments.indexOf(comments[i].data.id) === -1){
                Globals.old_comments.push(comments[i].data.id);
            }else{
                new_comments.push(comments[i].data);
            }
        }
        return new_comments;
    },
    
    display: function(data){
        var counts = {}, sr;
        for(var i = 0; i < data.length; i++){
            var sr = data[i].subreddit;
            if(counts[sr] !== undefined){
                counts[sr] += 1;
            }else{
                counts[sr] = 1;
            }
        }

        var keys = [];
        for (var k in counts) {
                if (counts.hasOwnProperty(k)) {
                keys.push(k);
            }
        }
        keys.sort();

        var e = $(document.createElement('table'));
        for(var i in keys){
            var tr = $(document.createElement('tr'));
            var td = $(document.createElement('td')).addClass('right').text(keys[i]);
            tr.append(td);
            td = $(document.createElement('td')).addClass('right').text(counts[keys[i]]);
            tr.append(td);
            var line = '';
            for(var x = 0; x < counts[keys[i]]; x++){
                line += '-';
            }
            td =...