Project II, The Pizza Palace

Make sure this is your own work . Due 11:59pm on August 10th. No extension. Points: 100. Check the Blackboard regularly for new announcement, grade updates, etc.

The situation

• You are making a Web site for The Pizza Palace.
• The Palace sells just one size of pizza for a basic cost of $11.95.
• The customer can get additional toppings.
• All the pizzas in an order must have the same number of toppings(restriction added for simplication).
• Toppings cost $0.90 per topping per pizza.
• There is also a 10% sales tax charged on the entire order.
• There is a $2.00 delivery fee for delivered orders

The site

The Pizza Palace should consist of 3 web pages: Home, Pizza, and Order.

You may refer to PizzaHut web site for some inspirations.

The Home page

• The page should have a heading and a paragraph of introducing the business .
• The page should have at least one image.
• You may add other information that you see fit

The Pizza page

• The page should have a heading and a paragraph explaining the page content.
• The page should include a price chart that contain the base price, price per topping, and delivery cost. Use table to organize.
• The page should include a list of several topping choices.
• The page should also include a pizza image. It should appear beside the list of toppings.
• When the customer moves the mouse over the name of a topping in the list, the image should change to one for that topping. Hint: use JavaScript swap picture function that we introduced in class.
• When the image is clicked, it should show a slide show of all available toppings with appropriate captions. Hint: use lightbox. Refer to Example 3.
• You may add other information that you see fit.

The Order page

• The page should have a heading and a paragraph explaining the page function.
• The page should include a form for ordering pizzas.
• Personalization
  • When the page is first loaded, a prompt box should appear, asking for the user's name.
  • This name should be incorporated into the page.
  • For example, it might read Custom Pizza Order for User's Name.
• The form should include
  • form controls (listed below) that let the user enter
    • the number of pizzas (use single-line input text box)
    • the number of toppings(use single-line input text box)
    • types of toppings (use textarea or use multiple selection list if you know how to process it.)
    • whether or not the order is for pick-up or delivery (use radio button).
    • a button, which reads "Finalize order".
    • a textarea for displays order.
    • a reset button
  • The JavaScript in the same page will process the form when Finalize order is clicked. The code should
    • Calculate the total cost, which includes 10% sale tax. For example, if the user ordered three pizzas, each with 2 toppings, to be picked up
      1. the price per pizza would be $13.75 (11.95 + 2* the unit price of toppings)
      2. the cost for would be $41.25 (number of pizzas * cost per pizza)
      3. the tax would be $4.13 (0.1* total pizza cost)
      4. the delivery fee would be $0 (no charge for pick-up)
      5. the final bill would be $45.38 (total pizza cost + tax)
    • The oder information should include: the number of pizzas, the number of types of toppings, pizza total, tax, delivery fee, and grand total cost.

• You may add "Send email" function, sending order information to customer or pizza shop or both(optional, for fun only.).

The page layout

• The site should have a "logo" image that displayed in every page.
• The site should have uniform navigation, footer, etc. uniformly displayed on all pages.
• For the footer section, include at least the time when the file is last modified with flastmod. Refer to SSI lecture notes, Example 1.
• The content that are same for all pages such as navigation, logo, footter, should be placed in independent files and included in pages. (Hint: use Server Side Include. Only the files with SSI needed to be named with .shtml extension.)

The external files

• The stylesheet should be in a separate .css file
• The event handler should be a function in a separate .js file. Here is another example.

Other requirements

• The page should be cleanly styled, and its appearance should be consistent in most browsers no matter what the user's default settings are. The overall design should be reasonably professional looking.
• The text should be informative and written in correct English.
• Validate your work when appropriate.
• Be sure to acknowledge image sources if they are not yours.

Submission requirements:

1. Create a subdirectory of your public_html directory on wyrd.hood.edu. Name it project2.
2. Publish the application (.html page, .shtml, images, .css file, and .js file.) to wyrd.hood.edu in that subdirectory.
3. Submit your project url to the Blackboard.