JSFiddle - React, Tailwind, and code Playground

by arpecop

HTML

<div class="feed">
    <h2>Loading...</h2>
</div>


Can't take all the credit... but i was able to add to the original script (just status messages).
<br>original script from prettyklicks.com

CSS

body{background:#111;color:#fff;font-size:12px;text-align:center;font-family:"Lucida Sans Unicode","Lucida Grande", sans-serif;}
.feed{text-align:left;width:300px;margin:5px auto;border:#555 1px solid;padding:10px;background:#222;-moz-border-radius:8px;-webkit-border-radius:8px;}
.feed ul{list-style:none;padding:0;margin:0;}
.feed ul li{list-style:none;padding:10px 0;margin:0;border-bottom:#555 1px solid;}
.feed ul li:last-child{border:0;}
.feed ul li:hover{color:#e6f2fa;}
.likes{font-size:8px;}
.date{font-size:10px;}
.name{font-size:18px;}
.pic{margin-right:10px;}

JavaScript

var url = "https://api.facebook.com/method/fql.query?query=SELECT+src_big+FROM+photo+WHERE+aid+IN+%28SELECT+aid+FROM+album+WHERE+owner%3D572383379%29+ORDER+BY+created+DESC+LIMIT+1%2C100&access_token=2227470867%7C2.NndgDkfs0o0fSasrlvGvNg__.3600.1296399600-572383379%7C2nn4lwBgxdBplFkjeJnrKTxu9Xc&format=json&callback=?";
$.getJSON(url, function(json) {
    console.log(json);
 
    $.each(json.data, function(i, fb) {
         
    });
    output += "</ul>";
    $('.feed').animate({
        opacity: 0
    }, 500, function() {
        $('.feed').html(output);
        $('.pic').attr("src", profile_pic);
        $('.name').html(profile);
    });

    $('.feed').animate({
        opacity: 1
    }, 500);

});