Exercise : Petit (by Stefanie Hatcher)

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 Petit

All required files are on Webster http://webster.cs.washington.edu/cse154/sections/9/, or you can download them as section8.zip. Breeds are located in the subdirectory breeds/ relative to the previous URL.

• Part 1: When the user selects "Dog" or "Cat", show a bulleted list of all breeds. Lists of breeds are stored on the server in files named dogs.txt and cats.txt.
• Part 2: When the user selects "Dog" or "Cat", show the image and info about the first breed. Each breed has an HTML and JPG file on the server; for example, Chow Chow has breeds/chow_chow.html and breeds/chow_chow.jpg.

Exercise Petit

• Part 3: When the user clicks "Next", advance to the next breed. Highlight the current breed (give its list item the class selected). If the user reaches the last breed and clicks Next, wrap around to the start.
• Other: If you finish all of the previous features, make it so that you can click any breed in the list to jump to info about that breed. Or make a "Previous" area (much like "Next") that allows the user to go back to the last breed.

Exercise Solution

You can view the solution javascript here.