Exercise : Pet-It (by Stefanie Hatcher)
Today we will write a page "Pet-It" that shows information about breeds
of cats and dogs using Ajax. The
and 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 : Pet-It
All required files are on Webster
http://webster.cs.washington.edu/cse154/sections/ajax/,
or you can download them as pet-it.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 : Pet-It
-
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 .
