AJAX Using Fetch - Lab
Now that you know how to make AJAX calls using the Fetch API, time for a little practice making AJAX calls to a popular API - OMDb.
Create a new directory with the following file structure and name it
/omdb-lab /css style.css /js app.js index.html
Browse here to obtain an API Key used to access the OMDb API. Be sure to select the FREE account type, which includes 1,000 calls the API daily.
All layout and styling for this lab is of your choosing.
The overall requirement of this lab is to create a Single-Page App (SPA) that uses
fetch to consume the OMDb API and display the results.
Implement the following user stories:
As a Visitor (AAV), I want to see a form to search for a movie based upon its title.
AAV, when I submit a search, I want to see a list of movies matching my search.
AAV, for each movie in the search results list, I want to see its title, release year, and main actors.
AAV, if no movies match my search, I want to see a "No movies match the title of: ".
AAV, I want to see a "View Plot" button for each movie that when clicked displays the movie's plot directly beneath the movie in the search list.
Make the SPA look cool.
Read OMDb's documentation and experiment making calls using the "Examples" form in OMDb's docs. Open the Network tab of DevTools to observe and learn from the URL of the request being sent to the API.
awaitto make using
fetchmore concise and "synchronous".