| Back to # 7 - Branching and Decisions | Table of Contents | # 7Review Questions |
1. Lets do something fun with a list box on our next web page. Design a list box named 'colorChoice' that allows the user to pick the background color of the web page from a drop-down menu. As soon as they select, change the 'document.bgColor' property of the web page to that color. One hint - don't make black one of your choices, since the text color will be black! Oh, invisible writing!
Pick your background color The HTML code for the list box looks like this:
<select name="colorChoice">
<option value="White" selected>White</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
</select>
|
First of all, write a function named 'changeColor(choice)' and place it into the <HEAD> section. 'changeColor'will accept the value of the select menu as its incoming parameter. What structure would be most appropriate to make a 4-way decision about the color? Hmm.. Look back at the Lesson 7 if you need to.
Next, add an event handler inside the <SELECT> tag to handle the 'onChange' event by calling the function 'changeColor()' you wrote. Be sure and send it the parameter (this.value).
Test your page in a browser.
2. Write a web page that will allow a user to order a pizza from Greedy Guido's Gastro Web Pizza shop. You will use a form with a button at the bottom labelled 'Show The Price'. You will need a JavaScript function to add the prices based on the size, the toppings and the type of crust. Remember that JavaScript will initially save all the values as string values so they must be converted to a number using 'parseFloat()' before you can do the math.
Use these values and rules for calculating the price.
| Base Cost | Per Topping Add | Crust | |
| Medium-Serves 2 | 5.00 | .75 | Original(no charge) - mult by 1.0 |
| Large-Serves 4 | 7.00 | 1.50 | Thick Crust(10% charge - multiply by 1.10 |
| Giant-Serves 8 | 11.00 | 4.00 | NewYorkCrust(15% Charge) - multiply by 1.15 |
Use a <SELECT> list for the size and the type of crust, since there are only set choices for each. Since users can add different numbers and combos of toppings, use check boxes for the toppings, letting them choose from six optional toppings (the last one is just for choc-a-holics).
Extra Cheese Black Olives Italian Sausage Mushrooms Anchovies Hot Fudge
Test your function several times to make sure it gives the correct price, or Greedy Guido may take you out of the picture. A medium with two toppings on New York Crust should come out to $7.25.
This should be rounded to the nearest penny right, so use this formula where p is the calculated price.
rounded value = parseInt(p*100 +.5)/100