koraytugay/flickrfetch.html

## flickrfetch.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' *.flickr.com *.staticflickr.com">
  <title>Page Title</title>
  <style>
    .photoContainer {
      margin: 10px
    }
  </style>
</head>
<body>
<div id="container" style="padding: 20px">
  <div id="loading">Loading..</div>
</div>
<script>
  const flickrHost = 'https://api.flickr.com/services/rest/'
  const method = 'flickr.people.getPublicPhotos';
  const userId = '32951986%40N05';
  const extras = 'url_q';
  const format = 'json'
  const apiKey = '96821c7dfcaab077324ce1a270c5a6f6';
  const noJsonCallback = "1"
  const flickrRest = `${flickrHost}?method=${method}&user_id=${userId}&extras=${extras}&format=${format}&nojsoncallback=${noJsonCallback}&api_key=${apiKey}`;

  window.onload = () => {
    searchFlickr().then(photoList => {
      document.getElementById("loading").hidden = true
      for (let photo of photoList) {
        const photoContainer = document.createElement("span");
        photoContainer.classList.add("photoContainer")
        let image = document.createElement("img");
        image.src = photo["url_q"];
        image.title = photo["title"];
        photoContainer.appendChild(image);
        document.getElementById("container").appendChild(photoContainer);
      }
    });
  }

  async function searchFlickr() {
    let response = await fetch(flickrRest);
    let data = await response.json();
    let {photos: {photo: photoList}} = data;
    return photoList;
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' .flickr.com .staticflickr.com">
	<title>Page Title</title>
	<style>
	.photoContainer {
	margin: 10px
	}
	</style>
	</head>
	<body>
	<div id="container" style="padding: 20px">
	<div id="loading">Loading..</div>
	</div>
	<script>
	const flickrHost = 'https://api.flickr.com/services/rest/'
	const method = 'flickr.people.getPublicPhotos';
	const userId = '32951986%40N05';
	const extras = 'url_q';
	const format = 'json'
	const apiKey = '96821c7dfcaab077324ce1a270c5a6f6';
	const noJsonCallback = "1"
	const flickrRest = `${flickrHost}?method=${method}&user_id=${userId}&extras=${extras}&format=${format}&nojsoncallback=${noJsonCallback}&api_key=${apiKey}`;

	window.onload = () => {
	searchFlickr().then(photoList => {
	document.getElementById("loading").hidden = true
	for (let photo of photoList) {
	const photoContainer = document.createElement("span");
	photoContainer.classList.add("photoContainer")
	let image = document.createElement("img");
	image.src = photo["url_q"];
	image.title = photo["title"];
	photoContainer.appendChild(image);
	document.getElementById("container").appendChild(photoContainer);
	}
	});
	}

	async function searchFlickr() {
	let response = await fetch(flickrRest);
	let data = await response.json();
	let {photos: {photo: photoList}} = data;
	return photoList;
	}
	</script>
	</body>
	</html>