Exercise 1: Ajax Pets

Create an AJAX-powered gallery of pet images that allows you to switch between kitty and puppy images without reloading the page. You can view the finished product here.

You are provided with the following HTML file, ajaxpets.html:

You must write a JavaScript file ajaxpets.js which requests data from the ajaxpets.php script on webster with the parameter animal of value kitty or puppy, depending on which radio button is selected, and injects this into the #pictures div.

Exercise 1: Solution

Solution (JavaScript)

Exercise 2: Bootloader

Write a "Boot Loader" page that displays a randomly chosen fashionable boot when the "Load Boot" button is clicked. Start from this HTML skeleton. (sample solution)

Exercise 2: Bootloader Extras

Exercise 2: Solution

Solution (JavaScript)

Exercise 3: Chat-It

Given this HTML skeleton, write the necessary JavaScript code to make the page into a chat program. Read and submit chat messages by making Ajax requests to the provided (chatit.php) on Webster. (sample solution)

Exercise 3: Solution

Solution (JavaScript)

Exercise 4: Recipes

Given this HTML file, write an accompanying recipe.js that displays recipe information on the page with ajax. When a radio button is clicked make an ajax GET request to recipes.php with a parameter r that has the value of the radio button.

The results from recipes.php is in json format. You must parse the results and fill the #main div with with a h1 containing the title, an img tag with the recipe's image and a ul filled with the recipe's ingredients. Check out a working example here.

Exercise 4: Recipes

The result json from recipes.php has the following structure (and some extra stuff):

                                    
{
  "recipe": {
    "information": {
      "name": ...,
      "image": ...
    },
    "ingredients": {
      "item": [
        {
          "amount": ...,
          "text": ...
        },
        ...
        {
          "amount": ...,
          "prep": ...,
          "text": ...
        }
      ]
    },
    "directions": {
      "step": [
        ...,
        ...,
        ...
      ]
    }
  }
}
                        
                        

Exercise 4: Solution

Solution (JavaScript)

Exercise 5: Pet-It

Today we will write a page "Pet-It" that shows information about breeds of cats and dogs using Ajax. The HTML and CSS are already written; start from them:

Add the JavaScript event-handling and Ajax code. Click the following image to run our sample solution: (solution JS code petit.js)

Exercise 5: Pet-It

All required files are on Webster http://webster.cs.washington.edu/cse154/sections/9/petit. Breeds are located in the subdirectory breeds/ relative to the previous URL.

Exercise 5: Pet-It

Exercise 5: Solution

Solution (JavaScript)