1. CSc 337
Lecture 15: Review

2. HTML and CSS Tracing
Draw a picture of how the following HTML/CSS code will look when the browser renders it on-screen. Assume that the HTML is wrapped in a valid full page with a head and body. Indicate a non-white background by shading lightly or by drawing diagonal lines like It is possible that some CSS rules shown will not apply to any elements.
div { border: 2px solid black;
padding: 1em; }
body > div { margin: auto; width: 50%; }
div #div, p { background-color: yellow;
text-decoration: underline; }
span div, span.div { border: 2px dashed black; }
div > div.div { float: left; }
#div, .span { clear: left; }
span#span { background-color: yellow; }
<div>
<span>1</span>
<div id="div">2 2</div>
</div>
<span class="div">3 3 3</span>
<div class="div"> </div>
<div id="span"> </div>
<div class="span"> </div>

3. CSS
Write the CSS code necessary to recreate the following appearance on-screen, exactly as shown. The page uses the same HTML code as in the previous problem. You are not allowed to modify the HTML.
<div>
<span>1</span>
<div id="div">2 2</div>
</div>
<span class="div">3 3 3</span>
<div class="div"> </div>
<div id="span"> </div>
<div class="span"> </div>
All text now uses a monospace font at the default size.
All borders shown are 2px thick and black in color.
The element with "2 2" now has a yellow background.
The elements with "3 3 3", " ", and " " are now each exactly one fourth (1/4) of the page width.
The element "2 2" now has bold text, and the element " " now has italic text.

4. JavaScript / DOM
Write the JavaScript code to add event behavior to the following web page. Assume that your code will be placed into a .js file that will be included in the page's header.
The page contains an area with five images of baby Geneva, and a "Favorites" area. Your code should arrange it so that when one of these five images is clicked, that image will be moved to the rightmost end of the favorites area. Also, when an image is moved, a bullet is added to the end of the actions list indicating this. The bullet's text should be, "Moved [image] to favorites." where [image] is equal to the src attribute of the image moved. (As you'll see in the output on the next page, even though the HTML's src attribute for each image is only a file name such as geneva1.jpg, when you access this information in your code, it will be a full URL. This is expected.) Nothing should happen when the user clicks on any other content on the page, such as text or other images such as the pacifier. Assume that the user won't click on an image that is already in the Favorites.
Move images by manipulating the order of elements in the DOM tree, not by manually setting x/y positions of elements. You may use Prototype's features if you like. You may not use innerHTML on this problem, nor change any HTML on the page; the only code you may add is JavaScript.
The following is the complete HTML code for the body of the page:

5. JavaScript / DOM (continued)
<h1>
<img class="geneva" src="geneva_head.jpg" alt="Geneva" /> Geneva Pics!
</h1>
<div id="pics">
<img src="pacifier.jpg" alt="pacifier" />
<img class="geneva" src="geneva1.jpg" alt="Geneva" />
<img class="geneva" src="geneva2.jpg" alt="Geneva" />
<img class="geneva" src="geneva3.jpg" alt="Geneva" />
<img class="geneva" src="geneva4.jpg" alt="Geneva" />
<img class="geneva" src="geneva5.jpg" alt="Geneva" />
</div>
<p>Click a picture to move it to the Favorites.</p>
<fieldset id="favorites" class="geneva">
<legend>Favorite photos:</legend>
</fieldset>
<ul id="actions"></ul>

6. JavaScript / DOM (continued)
The following is the page's initial appearance and appearance after clicking images #1 and #5:

7. JavaScript / DOM 2
Write the Javascript code to add behavior to the following HTML code. The page contains a text input box with id of foodname, and a drop-down list with an id of foodgroup. The user types a name of a food item into the foodname text box, such as apple or Cookie, selects a food group from the drop-down list, such as dairy or fruit, and then clicks the button with id of eat. When the eat button is clicked, any element on the page that matches all of the following criteria will be removed from the page:
The element is an img element that has a class of food.
The element's food group matches the group chosen in the foodgroup drop-down list. Food groups are represented as class attributes. This is in addition to the food class; recall that a class attribute can specify multiple classes separated by spaces. For example, a jug of milk would have the following element:
<img src="milkjug.jpg" class="food dairy" alt="milk" />
The food item's name is the same as the text in the foodname box. The food's name is stored as the image's alt attribute. For example, if the user types cookie, img elements with an alt of cookie will be removed. Your code should be case-insensitive; for example, coOKIe should match images with an alt of cookie.
The relevant HTML code for the page is the following. Your code should be general; it should not rely on the specific food images shown in the screenshot. You should also not rely on the exact ordering of the words in the class attribute.

8. JavaScript / DOM 2 (continued)
<div>
Name of Food: <input id="foodname" type="text" />
Food Group:
<select id="foodgroup">
<option>dairy</option>
<option>fats</option>
<option>fruit</option>
<option>meat</option>
<option>veggies</option>
</select>
<button id="eat">Eat!</button>
</div>
<p>
<img src="cookie.jpg" class="food fats" alt="cookie" />
<img src="apple.jpg" class="fruit yummy food" alt="apple" />
<img src="broc.jpg" class="food veggies" alt="broccoli" />
<img src="tomato.jpg" class="fruit food" alt="tomato" />
<img src="beefsteak.jpg" class="food meat" alt="steak" />
<img src="milkjug.jpg" class="food dairy" alt="milk" />
<img src="potatochips.jpg" class="fats food other" alt="chips" />
</p>

9. JavaScript / DOM 2 (continued)