Movie Favorites

Video Walkthrough

Watch this video a couple times before getting started.

jQuery & AJAX

Installing jQuery on the Page

When setting up your page, be sure to include jQuery. You can reference it in the src of a <script> tag either locally (download and serve it yourself) or from a CDN, like I do here:

Making a Request and Handling the Response

Once jQuery is loaded, you can use it to make an HTTP request to OMDB, a free movie API. Here's an example of searching for the details of Aladdin:

For this example, though, that won't be enough. We don't always want to search for Aladdin. We want to search for whatever was clicked. There are two ways to accomplish that. You could simply set up different event handlers for each movie. Within each event handler you call $.get() with the respective URL.

Alternatively, you could have just one event handler. If you go this route, you'll need to leverage event.target and build the URL dynamically.

Getting Set Up

1. Go to IMDB
2. Search for a few of your favorite movies
3. Click on the poster, right click, save as
4. Save the movie posters in a folder in your FEWD project dedicated to this assignment
5. Note the IMDB ID of each movie in the URL (e.g., tt0816692)
6. AJAX requests will be made to OMDB, a free movie API (example: http://omdbapi.com/?i=tt0103639)