JSFiddle - React, Tailwind, and code Playground

by Mike Rispoli

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>

<!-- This div is required for the JS to inject into -->
<div id="images">
    <ul>
    </ul>
</div>

<h1>Status:</h1>

</body>

CSS

html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	h1 {
		font-size: 36px;
	}
    
    #images ul li img{
        width: 50%;
        height: auto;
    }
    }

JavaScript

// START CORE OLAPIC API WIDGET SCRIPT
		
$(document).ready(function() {	
	// Olapic Widget
	// Configure Olapic Widget
	var apiKey = '12e4758c373429e20ed13b2fdff4e1f71cf70144973870e83b5bba1704fd1148'; // this is tempdir: mike
	var result;
	var mediaEndpoint = 'https://photorankapi-a.akamaihd.net/customers/216224/media/recent';

	//+++++++++++++++++++++++++++++++++++++++++

    var apiCall = '?auth_token=' + apiKey;
    var request = mediaEndpoint + apiCall

    // Fire AJAX :)
    $.ajax({  
        type: "GET", // define type of HTTP request
        url: request, // define request URL from above
        dataType: "json", // define data type that we're going to be receiving
        success: function (e) {
            console.log(e);
        	$('h1').append('Data received. Remember, console.log is your best friend');
            
            console.log(e.data._embedded);
            // Go through each e.data._embedded data
            $.each( e.data._embedded, function( i, photoObj ) {
                $('#images ul').append('<li><img src="'+photoObj.images.normal+'" /></li>');
            });
            
        },  
		error: function(msg) {
			$('h1').append(msg.statusText).append(' - check console :)');
		}
     }); 
   
});

// END CORE OLAPIC API WIDGET SCRIPT