JSFiddle - React, Tailwind, and code Playground

by jcutrell

HTML

<div id="links"></div>
<div id="post"></div>

CSS

body {
    font-family: sans-serif;
}
h2 {
    font-size: 1.8em;
    text-align: right;
}
#post {
    display: none;
}
#post.visible {
    display: block;
}
a {
    color: #666;
}
a:hover {
    color: #222244;
    cursor: pointer;
}

JavaScript

$.getJSON("https://api.github.com/users/jcutrell/gists", function(data){
    var html = "";
    console.log(data);
    $(data).each(function(i,el){
        html += "<h2><a data-id='"+el.id+"'>" + el.description + "</h2>";
    });
    $("#links").append(html);
    $("a").on("click", function(e){
        e.preventDefault();
        $.getJSON("https://api.github.com/gists/"+$(this).data("id"), function(data){
            var html = "<h2>" + data.description + "</h2>";
            html += (function(){
                var s = "<pre>";
                for (file in data.files){
                    s += data.files[file].content;
                }
                return s + "</pre>";
            })();
            $("#post").html(html).addClass("visible");
        });
    });
});