JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

CSS

.well{
    display:inline-block;
    margin:20px;
    min-width:200px;
    }
.well ul{
    margin:0;
    }
.well ul li{
    border-bottom: 1px dotted #CCC;
    }
.well ul a{
    float:right;
    padding-left:2px;
    }
.well ul span{
    padding-right:2px;
    }
.well ul span, .well ul a{
    position:relative;
    background:#f5f5f5;
    top:6px;
}
.well ul a{
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
.noclick{
    text-decoration:none;
    cursor:default;
    pointer-events:none;
    color:#555;
    }

JavaScript

var repoList = (function($) {

    var settings = {
        endpoint: 'https://api.github.com/',
        username: 'cibgraphics'
    },
        _format = function(data){
            var d = '<div class="house">', i;
            for(i in data){
                d += ('<div class="well"><ul>');
                d += ('<li><span>Name: </span><a href="#" class="noclick">'+data[i].name+'</a></li>');
                d += ('<li><span>Language: </span><a href="#" class="noclick">'+data[i].language+'</a></li>');
                d += ('<li><span>Homepage: </span><a href="'+data[i].homepage+'" target="_blank">View</a></li>');
                d += ('<li><span>Size: </span><a href="#" class="noclick">'+data[i].size+'kb</a></li>');
                d += ('<li><span>Github URL: </span><a href="'+data[i].http_url+'" target="_blank">View</a></li>');
                d += ('<li><span>Watchers: </span><a href="#"  class="noclick">'+data[i].watchers+'</a></li>');
                d += ('</ul></div>');
            }
            d+'</div>';
            $('body').html(d);
        },
        _fetch = function() {
            $.get(settings.endpoint + 'users/' + settings.username + '/repos', _format);
        };

    return {
        fetch: _fetch
    };

})(window.jQuery);

repoList.fetch();