CST161: Web Site Design

Project 9:  Red Ball Pizza "Online Ordering"


The "Online Ordering" page for Red Ball Pizza is shown below. Download the files from the previous link and complete the web document following the instructions for the assignment described below.

CST161 Project 9

Complete the following:

  1. Using an HTML editor, open the Project09.htm and Project09.css files from the download, enter your name and the project due date in the comment section of each file
  2. Go to the Project09.htm file in the editor and add a link to the Project09.css style sheet file in the document head
  3. Directly after the paragraph in the section element, insert a form element with the name and id "pizza" that has the action "http://www.redballpizza.com/cgi-bin/buildpizza" and uses the post method
  4. Create two fieldset elements:
    1. The first with the id "custInfo" and the legend text "Customer Information"
    2. The second with the id "buildPizza" and the legend text "Build Your Own Pizza"
  5. Within the "custInfo" fieldset:
    1. Create a label with the text "Name *" along with a text input box for the "custName" field; add the placeholder text "First and Last Name" and make the field required
    2. Create a textarea box for the "address" field along withthe label "Delivery Address *" and make the field required
    3. Create a label containing the text "Phone *" and a text input box for the "phone" field; add the placeholder text (nnn) nnn-nnnn and make the field required; the text of the input box should follow the regular expression pattern:
      ^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$
    4. Create a text input box for the "delTime" field with the label text "Delivery Time (leave blank for immediate delivery)" with the text in parentheses placed on a new line; add the placeholder text hh:mm AM/PM and specify the regular expression pattern:
      ^([0-9]|1[012]):[0-5][0-9]\s?((a|p)m|(A|P)M)$
  6. Within the "buildPizza" fieldset:
    1. Add the "sizes.png" file as an inline img and add the id "sizeImage" to the inline image
    2. Create a range slider for the "size" field along with the label text "Select Your Pizza Size (10, 12, or 14 inch) placing the text in parentheses on a new line; set the default value to 12, the minimum value to 10, the maximum to 12, and the step value to 2
    3. Create a select list for the "crust" field along with the label text "Choose Your Crust"; this select list should display the option text "Thin", "Thick", "Stuffed" and "Pan" with option values equal to the option text
    4. Create a number spinner for the "quantity" field with the label text "Quantity (call for quantities larger than 10 pizzas)" with the text in parentheses on a new line; the field has a default value of 1 and ranges from 1 to 10 with increments of 1 unit
    5. Create a textarea for the "instructions" field with the label text "Special Instructions"
    6. Within this "buildPizza" fieldset create two sub-fieldset elements:
      1. The first with the id "meat" and the legend text "Meat Toppings"
      2. The second with the id "vegetables" and the legend text "Vegetable Toppings"
    7. Within the "meat" sub-fieldset:
      1. Add a label with the text "Location" followed by four inline images for the "full.png", "left.png", "right.png", and "none.png" files with the alt text "full", "left", "right" and "none" respectively
      2. Create a group of four input radio buttons for the "pepperoni" field with the field values "full", "left", "right" and "none" respectively with the "none" option checked by default; nest the four radio buttons within a fieldset element belonging to the class "optionGroup"
      3. Repeat the previous Step (ii) for the remaining meat toppings, Ham, Pork, Sausage, and Chicken, naming the fields "ham", "pork", "sausage" and "chicken" respectively
    8. Repeat Step (g) above, sub-steps (i), (ii) and (iii) for the vegetable toppings within the "vegetables" fieldset, creating input radio button groups for Mushrooms, Green Peppers, Onions, Tomatoes and Jalapenos, and naming the fields "mushrooms", "greenPeppers", "onions", "tomatoes" and "jalapenos" respectively
    9. Directly after the "vegetables" fieldset, create two checkboxes:
      1. An input checkbox for the "doubleCheese" field with the label text "Add Double Cheese"
      2. An input checkbox for the "doubleSauce" field with the label text "Add Double Sauce"
  7. Directly after the "buildPizza" fieldset, create an input submit button with the button text "Next"
  8. Save the changes to the file and then return to the Project09.css stylesheet file
  9. Format the fieldset elements as follows:
    1. Display all fieldset elements with a background-color value of (255, 246, 205) and with a solid 1-pixel border and color value of (233, 69, 0)
    2. Set float for the fieldset elements on the left with a 1% margin
    3. Set the width of the "custInfo" fieldset to 35%, the width of the "buildPizza" fieldset to 60%, and the width of the "meat" and "vegetables" fieldset elements to 47% each
    4. Set the background-color of the "meat" and "vegetables" fieldset elements to a color value (237, 178, 74)
    5. Set the font-size of the field set legend elements to "0.9em"
  10. Display all label elements as block with a font-size of "0.8em"; float the label elements on the left only when the left margin is clear; set the width of the label to 40% of the containing element; set the top-margin and bottom-margin to 5 pixels and set the size of the left-padding space to 5 pixels
  11. Display all input elements and textarea elements as block set to float on the "left"; set the width to 50% with top-margin and bottom-margin of 5 pixels; set the height of the textarea elements to 100 pixels
  12. Display all inline img elements nested within a form as block set to float on the "left" with top-margin and bottom-margin of 5 pixels
  13. Set the width of the "delTime" input box to 150 pixels
  14. Set the left-margin of the "sizeImage" inline img to 40%; set the width of the size field range slider to 200 pixels; make the background of the "size" field range slider transparent
  15. Set to float the select list for the "crust" field on the left with a font-size of 0.8 em; set the top-margin and bottom-margin to 5 pixels and the width to 150 pixels
  16. Set the width of the spinner control for the "quantity" field to 40 pixels
  17. Set the width of fieldset elements that belong to the class "optionGroup" to 50%; remove the border from this fieldset and make the background transparent
  18. Set the width of input radio buttons to 30 pixels and the width of input checkboxes to 20 pixels
  19. Set the width of the input submit button to 150 pixels, set the float property to "none", and set the top-margin and bottom-margin to zero (0) pixels and the left-margin and right-margin to "auto"
  20. If an input element, select element, or textarea element receives the focus, set the background-color to the value (220, 255, 220)
  21. If an input element receives the focus and is valid, set the background-color to the value (220, 255, 220) displaying the background-image "okay.png" at the bottom-right corner with no tiling; size the background-image so that it is contained within the input box
  22. Repeat Step 21 above for input elements that receive the focus and are invalid, setting the background-color to the value (255, 232, 233) and the background-image to the file "warning.png"
  23. Save changes to the stylesheet and then open the Project09.htm file in several browsers, preferably browsers that have good support for HTML5 forms, to verify that the layout, design and functionality resemble that shown in the image above; test the form by confirming that it shows warnings for all invalid data values and for required fields that have no values