From 40e226d59a1792effd6b473c2664fd92c6bc65dc Mon Sep 17 00:00:00 2001 From: Pamela Fox Date: Wed, 22 Apr 2015 19:24:13 -0700 Subject: [PATCH] Adding API exercises in apis folder --- ajax/exercise_htmlapis.html | 43 ---------------------- ajax/exercise_jsapis.html | 47 ------------------------- ajax/exercise_youtubeapi.html | 47 ------------------------- {ajax => apis}/htmlapis_solution.html | 0 {ajax => apis}/htmlapis_starter.html | 0 {ajax => apis}/jsapis_solution.html | 0 {ajax => apis}/youtubeapi_solution.html | 0 7 files changed, 137 deletions(-) delete mode 100644 ajax/exercise_htmlapis.html delete mode 100644 ajax/exercise_jsapis.html delete mode 100644 ajax/exercise_youtubeapi.html rename {ajax => apis}/htmlapis_solution.html (100%) rename {ajax => apis}/htmlapis_starter.html (100%) rename {ajax => apis}/jsapis_solution.html (100%) rename {ajax => apis}/youtubeapi_solution.html (100%) diff --git a/ajax/exercise_htmlapis.html b/ajax/exercise_htmlapis.html deleted file mode 100644 index 3496a629..00000000 --- a/ajax/exercise_htmlapis.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - Exercise: HTML APIs - - - -
-

Exercise: HTML APIs

-

- -

In this exercise, you'll try out using several HTML APIs to add more dynamic content to the starter webpage. -

- -
    -
  1. Download the starter file and save them into a project folder. Open the webpage up in the browser and make sure it works. It should pull in video information via an AJAX request and display linked video thumbnails in a list.
    2. -
  2. Go to flagcounter.com and set up a hit counter for your website. Put the counter somewhere near the bottom of the page.
    3. -
  3. Go to the Google Charts API Docs and read about the Google-o-meter image chart API. Add a "rating" field to each video in the JSON, like out of 100. Generate a chart for each video that shows its rating. Display that chart when you click on the video. Try generating the chart URLs in the browser first, and only code it in JavaScript once you know what you want the URLs to look like.
    4. -
  4. Modify the generated Youtube iframe players so that they auto-play when clicked. Read the docs here.
    5. -
  5. Bonus: Create a bar chart that compares the ratings across all the videos, using the Google Bar Charts Image API.
    6. -
- -

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.

- - -

- - - - - - diff --git a/ajax/exercise_jsapis.html b/ajax/exercise_jsapis.html deleted file mode 100644 index 6b0a0aaf..00000000 --- a/ajax/exercise_jsapis.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - Exercise: JS Snippet APIs - - - -
-

Exercise: JS Snippet APIs

-

- -

In this exercise, you'll try out using several JS snippet APIs to bring more -functionality into the webpage.

- -

If you get strange security errors in the console on any step, try following - these instructions to run your files off of localhost instead of file:// -

- -
    -
  1. Download the starter file, or start with your own solution from the last exercise. Open the webpage up in the browser and make sure it works.
    2. -
  2. Go to the Google+ button docs and generate the code for a Google+ button with no annotation and a medium size. Insert that so it shows up next to the header of the webpage.
    3. -
  3. Go to the Tweet button docs and read about the Tweet button. Find the HTML/SCRIPT tag for adding it, and paste that into your webpage, at the bottom near the counter.
    4. -
  4. Modify the share URL or HTML according to the docs to specify hash tags and change it so that it doesn't show the counter.
    5. -
  5. Bonus: Using JavaScript, generate a Tweet button for each video, and display it when the video is clicked. The text for each tweet button should be the video title.
    6. -
- -

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.

- - -

- - - - - - diff --git a/ajax/exercise_youtubeapi.html b/ajax/exercise_youtubeapi.html deleted file mode 100644 index 7391c90d..00000000 --- a/ajax/exercise_youtubeapi.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - Exercise: Youtube JS API - - - -
-

Exercise: Youtube JS API

-

- -

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: -

- -
    -
  1. 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.
    2. -
  2. Go to the Youtube API docs and read through them. Look at the sample output and the example URLs for the API. Find a URL that will give you search results, and test that out in the browser. -
    3. -
  3. 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. Search for whatever you fancy, but limit the search to 5 results. -
    Tips: Remember that the JSON that the Youtube API returns will be different than 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, check how they store the ID, the author, and the rating. -
    4. -
  4. Bonus: Create your own playlist on Youtube of your favorite videos, and bring that into the page instead. -
    5. -
  5. Bonus: Add a search button to the page so that people can search for any query.
    6. -
- -

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.

- - -

- - - - - - diff --git a/ajax/htmlapis_solution.html b/apis/htmlapis_solution.html similarity index 100% rename from ajax/htmlapis_solution.html rename to apis/htmlapis_solution.html diff --git a/ajax/htmlapis_starter.html b/apis/htmlapis_starter.html similarity index 100% rename from ajax/htmlapis_starter.html rename to apis/htmlapis_starter.html diff --git a/ajax/jsapis_solution.html b/apis/jsapis_solution.html similarity index 100% rename from ajax/jsapis_solution.html rename to apis/jsapis_solution.html diff --git a/ajax/youtubeapi_solution.html b/apis/youtubeapi_solution.html similarity index 100% rename from ajax/youtubeapi_solution.html rename to apis/youtubeapi_solution.html