In this exercise, you'll try to bring in Youtube video information using their JSON API. Go through these steps, and do as many as you can in the time we have:
Start with this file or start with your own solution from the last exercise. Open it up and make sure it's working as expected.
You need a Google Account to use the YouTube API. If you don't have one, create one or pair up with someone who does.
Follow the steps on this page to create a Browser API key. (You won't need OAuth for this project.) Copy and save the API key as a variable in your project to use with your API query later.
Go to the Search:list reference in the Youtube API docs and read through it. Use the Try it! function at the bottom of the page to build your own query and see the response. Search for whatever you fancy, but limit the search to 5 results. Copy the address from the Request box, add your API key, and test it in the browser.
The webpage currently brings in video information using the jQuery $.ajax function to bring in a local videos.json file into the page. Change that function so that it instead brings in the results of a Youtube API search from the Youtube servers and displays those results instead.
Tips: Remember that the JSON returned by the Youtube API will differ from the JSON format of videos.json. You should console.log inside your callback to see what the data looks like and make sure you're using it correctly. In particular, note that the video objects are stored in a container object called "items", and check how they store the ID, title, and author. (Rating is not available.)
Bonus: Create your own playlist on Youtube of your favorite videos, and bring that into the page instead.
Bonus: Add a search button to the page so that people can search for any query.
Make sure that you use your browser developer tools to make debugging easier
while working on this. Check for errors, and use console.log() to figure out
how far your code makes it, and what the values of your variables are along the way.