# Hybrid JS Fetch Exercise
Start by watching the Last Fetch tutorial you will ever need (opens new window). Use this as a reference for completing this exercise with the Fetch API.
Using the pexels.com or pixabay.com or unsplash.com API, fetch a list of images from the API.
You will need to register for an API key with the API that you pick. Start by registering for an account with the API that you pick. Then you can visit these pages to get an API key. Unsplash and Shutterstock require you to create an "app" first to get a key.
- Pexels API page (opens new window)
- Pixabay API page (opens new window)
- Unsplash API Apps page (opens new window)
- Unsplash API documentation (opens new window)
Pass the appropriate API key to the API through the headers or querystring, as required, depending on the API that you pick.
Pass any other needed parameters, like search keywords, to the API with the fetch call.
The initial call to the API will return a JSON file that holds an array of objects. Each object contains details about an image.
Loop through the returned JSON data and for each image URL value make another fetch call. Use the blob() method on the Response object to get the image data. Then use the URL.createObjectURL()
method to turn the Blob into a URL that can be used for an image src attribute.
Remember to add an alt attribute for every image.
Add all the fetched images into <img> elements and add them to your webpage.
The page should have a header with a title, plus a form with an <input type="search"> and a search button.
Use a submit event listener as the trigger to start a fetch call and get the new set of image results.
document.getElementById('searchForm').addEventListener('submit', (ev) => {
ev.preventDefault();
});
2
3
If the search input value is left empty
Each set of search results should replace any images that are currently shown on the screen.
The images should be displayed as a grid.
Due Week 14