JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<ul class="instagram">
</ul>

CSS

ul.instagram {
  list-style: none;
}

ul.instagram li {
  float: left;
}

ul.instagram li img {
  height: 100px;
}

JavaScript

$(document).ready(function(){

    var username = "lemon_kazi";
    var max_num_items = 9;

    var jqxhr = $.ajax( "https://www.instagram.com/"+username+"/?__a=1" ).done(function() {
        //alert( "success" );
    }).fail(function() {
        //alert( "error" );
    }).always(function(data) {
        //alert( "complete" )
        items = data.graphql.user.edge_owner_to_timeline_media.edges;
        $.each(items, function(n, item) {
            if( (n+1) <= max_num_items )
            {
                var data_li = "<li><a target='_blank' href='https://www.instagram.com/p/"+item.node.shortcode+"'><img src='" + item.node.thumbnail_src + "'/></a></li>";
                $("ul.instagram").append(data_li);
            }
        });

    });

});