API Lab

by vcchavez_uri

HTML

<!-- NO NEED TO EDIT HTML (unless you want to make the page look better) -->
<div id="keySetup">
  To start, please enter your API key for Unsplash:
  <input id="key"/> <input id="keySubmit" type="submit"/>
</div>

<div id="gallerySetup">
  Please enter a search term to populate the gallery:
  <input id="searchTerm"/> <input id="searchSubmit" type="submit"/>
  <div id="gallery"> <!-- images will go here --> </div>
</div>
<!-- NO NEED TO EDIT HTML (unless you want to make the page look better) -->

CSS

/* NO NEED TO EDIT CSS (unless you want to make the page look better) */

#gallerySetup {
  visibility: hidden;
}

img {
  max-width: 200px;
}

/* NO NEED TO EDIT CSS (unless you want to make the page look better) */

JavaScript

/*   DO NOT edit in between lines 1-24.  DO NOT edit edit in between lines 1-24. */

//add event listener for key submit button
document.getElementById("keySubmit").addEventListener("click", saveKey);
document.getElementById("keySubmit").addEventListener("click", hideKeySetup);

//add event listener for search term submit button
document.getElementById("searchSubmit").addEventListener("click", 
	function(){ getImages(document.getElementById("searchTerm").value) });

function saveKey() {
	//store api key in local storage
  localStorage["unsplash_key"] = document.getElementById("key").value;
}

function hideKeySetup() {
  //get rid of text and inputs
  document.getElementById("keySetup").remove();
  //show gallery text and inputs
  document.getElementById("gallerySetup").style.visibility = "visible";
}


/*   DO NOT edit anything ABOVE this comment.  DO NOT edit anything ABOVE this comment. */



/* COMPLETE the functions BELOW this comment.   COMPLETE the functions BELOW this comment.  */


/* TO DO */
function getImages(term) {
	var api_key = localStorage.getItem("unsplash_key");
  //do request for images using UNSPLASH API. Use the SEARCH PHOTOS endpoint, the api key, and the term, ask for 1 page and 15 photos per page
}

/* TO DO */
function displayImages(json) {
	//check in the response how many results you got 
  //iterate through the correct number of results and create a new image for each result-- use the small url as src and the alt_description as the alt
}