Due Date

• Thursday, August 20, 2009, 9:00 pm.

Objectives

• Create a simple HTML form.
• Use function(s) to manipulate the form elements.
• Generate output based on user input.

Instructions

Create a simple HTML page

Using a simple text editor (such as Notepad or Notepad++), create an HTML page. The content of this page will be an on-line pizza order form. Here is an example:

This sample form as one (1) text box (type="text"), one (1) select with three (3) options, six (6) checkboxes (type="checkbox"), and one (1) button.

Include in the HTML page some means for you (using JavaScript code) to display information back to the user. You could either set up a division with an id (using document.getElementById) or set up a named, read-only text area in the form.

Handle the base order

In response to the user clicking the Order Now button, summarize the order as it appears on the form.

1. Read the value the user typed into the text box. If it is non-numeric, display an error message and stop processing. Otherwise, convert the input value (a String) into a number. (Recall the parseInt function.)
2. Determine which pizza size the user selected.

3. Echo these values in the output area (div or textarea) you created. This output can be a single line, for example:

   You ordered 3 large pizzas.

   or

   You ordered 2 small pizzas.

You can test your application at this time.

Add support for toppings

Now add support for reporting the toppings. Check each topping to see if it is checked. If it is checked, report the topping. For simplicity, you may report the topping choices one per line for the core assignment. This will use 6 separate if statements.

For example:

with pepperoni
with mushrooms

Here is a sample output:

Here are some useful reminders:

• The checkbox has a property named checked, which is true if the checkbox is checked.
• New lines are created in the HTML division (<div> tag) using <br>, in the textarea (<textarea> tag) using \n.
• Do not use the if-else if form of the if statement. It is not what is needed for this functionality.

Please test your application.

This is the core assignment.

Extra-Credit Options

Here are some options for extra credit.

Order Size [0.2 points]
In the core assignment, the number of pizza was required to be numeric. For this option, make sure that the number of pizzas ordered is between one (1) and five (5), inclusive. If the user has ordered more than five (5) pizzas, process the order as usually, but add the following text at the end of the output:

We cannot accept orders this large over the Internet. Please call to verify your order.

If the user has ordered a non-positive number of pizzas, display an error message and set focus to the pizza quantity text box.

Toppings Report [0.5 points]
Update the order verification to list the toppings on a single line. In the core assignment, the toppings were listed one per line:

with pepperoni
with mushrooms

For this option, list the toppings on a single line. Include comma(s) and the word "and" to format the list of toppings. For example

with pepperoni and mushrooms

and, similarly,

with black olive, green pepper, sausage, and extra cheese

If no additional toppings are selected, report that fact:

with no additional toppings

Dynamic Ordering [0.5 points]
Update the output area as the user enters the order. That is, every user action in the form should update the order verification and charge.

Combo Pizzas [0.3 points]
Add two additional buttons to the pizza order form. These buttons represent combo pizzas, one for veggie and one for meat lover. If the user clicks on the veggie button, select the extra cheese vegetable toppings (mushrooms, green pepper, and black olives) and clear the meat toppings (pepperoni and sausage). If the user clicks the meat lovers button, select the extra cheese and meat toppings and clear the vegetable toppings. Notice both combos include extra cheese.

Array for the Checkboxes [0.5 points]
The processing in the core assignment for the toppings is very repetitive. In fact, it is six copies of virtually the same thing, only changing the name of the checkbox and the name of the topping. Replace this repetitive code with a loop. There are several ways to approach this. Here are some suggestions:

• Put the checkboxes into an Array object, so that you can access them from within the loop. You will need to have an Array to get the names of the toppings for printing. (If you think long and hard enough about this, you can use the same array.)
• Give each checkbox an ID which happens to be the same as the name of the topping it represents. Create an Array object that contains the names of the toppings. Use an array to loop through the Array of topping names, and then use document.getElementById to access each of the checkboxes.

Test your enhancements. Once again, the maximum extra credit points awarded for this assignment will be 1 full point.

E-mail Assignment File

Assignments will be submitted using e-mail.

• Subject line: CSC 110 Assignment
• Body, required contents:
  • Your full name
  • This assignment name and number:
    on-line pizza, six (6)
  • List any extra-credit options you want graded
• Attachment: The completed HTML file.
• Email to: djinguji@sccd.ctc.edu  

Schedule Page