Exercise : Recipes (by Roy McElmurry)

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

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

<recipe>
	<information>
		<name></name>
		<image></image>
	</information>
	<ingredients>
		<item amount=""></item>
		...
	</ingredients>
	<directions>
		<step></step>
		...
	</directions>
</recipe>

Exercise Recipes

You can view the solution javascript here.