aresnick/flickr.html

## flickr.html
<html>
<meta charset="utf-8">

<head>
    <style>
    /*This is where you can put your CSS*/

    #mySquare {
        width: 500px;
        height: 500px;
        background-color: lightgreen;
        background-size: cover;
        /* make it so that our background image is scaled up to at least cover our div */
    }
    </style>
</head>

<body>
    <!-- This is where you can put your HTML -->
    <div id='mySquare'></div>
    <script>
    // This is where you can put your JavaScript

    // Grab our square
    var square = document.getElementById('mySquare');


    var setBackgroundImage = function(element, url) {
        // set the background image to a url
        element.style.backgroundImage = 'url(' + url + ')';
    };

    var randomImageURL = function(flickrData) {
        // Get a random image's url from the data flickr gives us
        var randomInteger = Math.floor(Math.random() * flickrData.items.length);
        return flickrData.items[randomInteger].media.m; // You can figure out this formatting by looking at the dictionaries in https://api.flickr.com/services/feeds/photos_public.gne?format=json
    };

    // This is a specially named function which is called by our script request (below) to flickr. If you go to https://api.flickr.com/services/feeds/photos_public.gne?format=json in your browser, you'll notice that it returns a bunch of JavaScript, all passed to a function called jsonFlickrFeed.
    var jsonFlickrFeed = function(data) {
        // set the background image to a random image from flickr
        setBackgroundImage(square, randomImageURL(data));
    };
    </script>

    <script src='https://api.flickr.com/services/feeds/photos_public.gne?format=json'>
    // This is where the magic happens; This is a technique called JSONP, which you can read more about at http://en.wikipedia.org/wiki/JSONP
    </script>
</body>

</html>
	<html>
	<meta charset="utf-8">

	<head>
	<style>
	/This is where you can put your CSS/

	#mySquare {
	width: 500px;
	height: 500px;
	background-color: lightgreen;
	background-size: cover;
	/* make it so that our background image is scaled up to at least cover our div */
	}
	</style>
	</head>

	<body>
	<!-- This is where you can put your HTML -->
	<div id='mySquare'></div>
	<script>
	// This is where you can put your JavaScript

	// Grab our square
	var square = document.getElementById('mySquare');


	var setBackgroundImage = function(element, url) {
	// set the background image to a url
	element.style.backgroundImage = 'url(' + url + ')';
	};

	var randomImageURL = function(flickrData) {
	// Get a random image's url from the data flickr gives us
	var randomInteger = Math.floor(Math.random() * flickrData.items.length);
	return flickrData.items[randomInteger].media.m; // You can figure out this formatting by looking at the dictionaries in https://api.flickr.com/services/feeds/photos_public.gne?format=json
	};

	// This is a specially named function which is called by our script request (below) to flickr. If you go to https://api.flickr.com/services/feeds/photos_public.gne?format=json in your browser, you'll notice that it returns a bunch of JavaScript, all passed to a function called jsonFlickrFeed.
	var jsonFlickrFeed = function(data) {
	// set the background image to a random image from flickr
	setBackgroundImage(square, randomImageURL(data));
	};
	</script>

	<script src='https://api.flickr.com/services/feeds/photos_public.gne?format=json'>
	// This is where the magic happens; This is a technique called JSONP, which you can read more about at http://en.wikipedia.org/wiki/JSONP
	</script>
	</body>

	</html>