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. Add the JavaScript event-handling and Ajax code. (sample solution)

Exercise , Part 1

All required files are on Webster (see directory). Breeds are located in the subdirectory breeds/ .

• 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.xml and cats.xml. The XML data follows a format such as the following:

<breeds>
	<breed>Alaskan Malamute</breed>
	<breed>Beagle</breed>
	...
</breeds>

Exercise , continued

• 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;
    the file name is the lowercase dog breed with spaces replaced by underscores.
  • For example, Chow Chow has breeds/chow_chow.html and breeds/chow_chow.jpg.
• Part 3: When the user clicks "Next", advance to the next breed.
  • If you have time, 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.

Exercise Solution

You can view the solution javascript here.

If you finish the basic exercise, try adding more features to the page, such as:

• Jump to any breed: Make it so that you can click any breed in the list to jump to info about that breed.
• Previous button: Make a "Previous" area (much like "Next") that allows the user to go back to the last breed. Have it show a preview image of the previous breed that will be shown if you click it.