JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div id="content"></div>
<nav> <a href="#" id="prev">Prev</a> | <a href="#" id="next">Next</a> | <a href="#" id="reload">Reload</a>

</nav>

CSS

#content img {
    width:100%;
}
nav {
    position:fixed;
    top:0;
    background:#ccc;
}

JavaScript

subreddit = "funny";
base = "http://www.reddit.com/r/" + subreddit + "/new.json?sort=new";
counter = 0;
after = "";
before = "";


function start() {
    //console.log("F");
    $.getJSON(base, function (data) {
        window.after = data.data.after;
        getPosts(0, "after", "");
    });
}

function getPosts(count, type, id) {
    $("#content").html("");
    $.getJSON(base + "&count=" + count + "&" + type + "=" + id, function (data) {
       
        
        console.log(base + "&count=" + count + "&" + type + "=" + id);
        
        
        
        if (data.data.before !== null) {
            window.before = data.data.before;
        } else {
            window.before = "";
        }
        if (data.data.after !== null) {
            window.after = data.data.after;
        }
        
        data.data.children.forEach(function (i) {
            var item = i.data,
                title = item.title,
                domain = item.domain,
                url = item.url,
                extension = url.split(".").pop(),
                extensions = ["png", "gif", "jpg", "jpeg", "tif"],
                domains = ["dropbox.com"],
                protocol = $("<a>").prop("href", url).prop("protocol"),
                permalink = "http://reddit.com" + item.permalink;
            //$("#content").append(title + "<br />");
            if (extensions.indexOf(extension) !== -1 && domains.indexOf(domain) === -1 && protocol !== "https:") {
                $("#content").append("<div><img src='" + url + "' /><a target='_blank' href='" + permalink + "'>" + title + "</a></div><br />");
            }

        });
    });
}

function next() {
    var type = "after",
        count = (counter == 26) ? 25 : counter + 25,
        id = window.after;
    getPosts(count, type, id);
    counter = count;
}

function prev() {
    
    if (counter !== 0){

    if (counter.toString().substr(counter.toString().length - 1) % 5 === 0) {
        counter = counter + 1;
    }
    var type...