Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Go vegetarian

Here’s what Alexandra would like you to do.

We want a Go vegetarian button that automatically substitutes the vegetarian options on our web page menu.

Here’s how our substitutions work:

  • We offer no substitutes for our fish entrées, so we need those removed.

  • We offer giant portobello mushrooms as a vegetarian substitute for our hamburgers.

  • We offer tofu as a vegetarian substitute for all of our meat and egg dishes except hamburgers.

  • We’ll need a button that restores the menu to its original state.

P.S. If you can pull it off, we’d also like a leaf icon to show up next to the substituted vegetarian entrees.

I had the web designer email you the files for the current menu so you can get started.

Note

There’s no exercise for it this time around—because you’re probably already thinking it—but be sure to write down what the requirements are in your own words so you know what you’re building here.

Before we write any jQuery, let’s look at the HTML and CSS files the web designer sent us, and see if their style and structure are up to snuff.

DOM Tree Magnets

Dig into the current structure of the web menu by diagramming how the DOM sees it. Below, you’ll find all the element magnets you need to complete the tree. Using the HTML fragment for the menu on the right, complete the tree. Each magnet will fit where you see a hollow circle. We’ve done a few for you already.

image with no caption
image with no caption
image with no caption
DOM Tree Magnets Solution

It looks like all the ingredients are set up as child list items of the parent entrée list items. They aren’t really labeled very clearly or uniquely, now are they?

image with no caption
image with no caption

Brain Power

Regular web page structure (HTML) makes writing jQuery code much easier, but the ingredient elements we want to find aren’t labeled in a way that will make our jQuery code easier to write. How can we make our elements easier to select?

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint