CS 437/637 Database-Backed Web Sites and Web Services

Homework Assignment 3
(200 points)

Assigned Date:

Due Date:

Educational Goal:

Become familiar with client-side HTML, CSS, and JavaScript web application development.

Requirements:

• Create an HTML file pizza.html, an external CSS file pizza.css, and an external JavaScript file pizza.js, for Spot's Pizza House. 
• (30 pts) The HTML document should display a Web page that allows the user to enter
  1. Account Type: Personal, Business, or Both.
  2. First Name and Last Name. First name or last name cannot exceed 20 characters respectively. Names must start and end with a letter (a-z or A-Z). 
  3. Street Address (including street name and number, state name, and zip code). State name must be Texas. Zip code must be 5 digits. Street number, of course, must be a number. 
  4. Location Type: Apartment, Business, Dormitory, Hotel, Hospital, School, Military Base, House, or Mobile Home.
  5. Pizza Toppings: Meat Toppings (Beef, Chicken, or Ham), or Vegetable Toppings (Banana Peppers, Red Onion, or Mushrooms)
  6. Quantity of pizzas. The quantity must be a positive integer.  
  Notice that all the information are required and a user can only order one topping for one pizza at one time.
• (30 pts) The CSS file should control the style of pizza.html by modifying a least 5 HTML elements.
• ( 10 pts) pizza.html must be Valid XHTML 1.0 Strict. To show your readers that you have taken the care to create an interoperable Web page, you should display this icon on the web pages. Here is the HTML you could use to add this icon to your Web page: 
  <p>
  <a href="http://validator.w3.org/check/referer"><img
  src="http://www.w3.org/Icons/valid-xhtml10"
  alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
  Once the W3C icon is clicked, W3C MarkUp Validation Service should valid your pages successfully.  
• (60 pts)  Must use regular expression in pizza.js to do client-side form data validation. Invalid form data cannot be used to generate receipt. 

  For invalid inputs, the error message should be printed right after each error input field. You must provide functional error message (that is, an error message indicates why it is wrong). For example, for wrong first name and ZIP, error message could be printed as follows:

  First Name: Name should start and end with a letter.
  ZIP: ZIP must be 5-digit.

• (60 pts) In addition, pizza.js should generate a receipt including acount type, name (first and last names), street address, location type, pizza topping, and quantity of pizzas. The receipt should be printed in the same page of pizza.html after the user submit his order.
• (10 pts) Overall web page design should follow web usability and should be attractive to end users. Please defend your design  with a brief summary.
• Turn in the paper copy and soft copy
  1. pizza.html source code
  2. pizza.css source code
  3. pizza.js source code
  4. the resulting web pages of various order transactions you have designed
  Paper copies should be bound firmly together in one pack. 5 points will be deducted for unbounded homework.
• Turn in the paper copies of your web pages including the CSS and HTML source code and screen snapshots of the resulting web page. Hard copies should be bound firmly together as one pack. 5 points will be deducted for unbounded homework.
• Submit the softcopy of the files through your UMassOnline account. Zip all the files including the cover page into one ZIP file. Name the ZIP file as hwk3_lastname_firstname.
• An invalid homework URL (You must provide URL in your cover page) results in 10 points deduction. 
• No hard copies or soft copies results in 0 points.