JSFiddle - React, Tailwind, and code Playground

Lists user Fiddles (new API). Using JSONP.

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<ul id="fiddle-list"></ul>

CSS

body {
    font-family: 'Yanone Kaffeesatz';
    color: #444444;
    margin: 10px;
}

a {
    color: #BF4C24;
    text-decoration: none;
    font-size: 22px;
}

ul {
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #dddddd;
    -webkit-column-width: 100%;
       -moz-column-gap: 20px;
       -moz-column-rule: 1px solid #dddddd;
       -moz-column-width: 100%;
            column-gap: 20px;
            column-rule: 1px solid #dddddd;
            column-width: 100%;
}

li {
    margin: 0;
    padding: 8px 0 8px 5px;
    border-bottom:  1px dotted #dddddd;
}
    li:hover { background: #efefef; }
    li:hover a { color: #444444; }

p {
    font-size: 16px;
    color: #444444;
    padding: 0 0;
}

span { color: #bababa; }

JavaScript

// Replace with your jsFiddle username
var Username = 'jenniferperrin'
    
var ListFiddles = new Class({
    initialize: function(user, limit){
        this.user = user;
        this.limit = limit || 5;

        this.itemHtml =
            '<p><a href="{url}" target="_blank">{title}</a> ' +
            '<span>- {framework}</span><br />{description}</p>';
        this.request();
    },

    request: function(){
        new Request.JSONP({
            url: 'http://jsfiddle.net/api/user/' + this.user + '/demo/list.json',
            onComplete: this.fetchFiddles.bind(this),
            callbackKey: 'jsoncallback',
            data: {
                limit: this.limit
            }
        }).send();
    },
        
    fetchFiddles: function(response){
        if (response.status === 'ok'){
            response.list.each(function(fiddle){

                new Element('li', {
                    html: this.itemHtml.substitute(fiddle)
                }).inject($('fiddle-list'));
            }, this);
        }
    }
});

new ListFiddles(Username, 9999);