Lab 3 - Pizza. Purpose. Assignment

Size: px

Start display at page:

Download "Lab 3 - Pizza. Purpose. Assignment"

Lucas Stone
5 years ago
Views:

1 Lab 3 - Pizza Purpose To assess your ability to apply the knowledge and skills developed in weeks 1 through 9. Emphasis will be placed on the following learning outcomes: 1. Create syntactically correct HTML documents containing a variety of user controls. 2. Demonstrate the ability to code event handlers using JavaScript. 3. Write JavaScript functions that are contained in JS files but interact with the controls in the HTML file via event handlers and creating dynamic HTML Assignment The Acme Pizza at Acme mall wants to streamline their ordering process. They want to put a few computer terminals in the mall for ordering pizza by the slice. They are requesting a web page that can be used to accept order for either take out or dine in. The HTML page will use HTML controls to facilitate user input. The web page has three main sections. They are Menu, Ordering Information and Check Out. The Menu section displays the Pizza and Beverage menus. The Ordering Information section receives user input. The Check Out section displays user inputs and total. See the sample screen shots. The required inputs are (underlined sections require user selection): Ordering Information o Pizza. Drop down menu. No default selected. The user must select one of the following. If a pizza is not selected, a popup alert appears to alert user. Cheese Pepperoni Sausage Hawaiian Supreme Veggie o Crust. Radio button. The user must to select one of the following: Thin Classic (default) o Quantity. The user must number of slices. If user did not enter quantity, a popup alert appears to alert user. o Beverage. Drop down menu. This is an optional input. User may select one of the following: Small Medium Large Extra large o Takeout or Dine in: Radio button. No default selected. User must also select one of the following: Takeout Dine in ITEC 136 Lab 1 Page 1 of 10

2 o There are three buttons in this section Add to Order. Clicking this button adds the order and optionally resets the fields. If user did not enter acceptable data, a popup error message appears. Start Over. Reset the data and web page to start over. Check Out. Clicking this button displays HTML tables containing the user selections and the total. It also optionally resets the fields. If user did not select takeout or dine in, a popup error message appears. The Menu section displays the pizza price per slice and beverage cost. The price per slice is: Cheese - $2.50 Pepperoni - $2.75 Sausage - $2.75 Hawaiian - $3.25 Supreme - $3.50 Veggie - $3.00 And the beverage cost is based on size. They are: Small - $1.00 Medium - $1.50 Large - $2.00 Extra Large - $2.50 The Ordering Information section gets the user input. If user did not select proper inputs when they click on the Add to Order button, a popup message error should display. Otherwise, the order is added. When user clicks on the Check Out button, the Check Out section displays user input in table form and subtotal, tax and total in table form as well. For simplicity, tax is only applicable if dine in and the tax rate is 7.25%. No tax for takeout order. See the sample screen shots. Action Items/Programming Requirements The solution must use and deliver both an HTML and at least one JS file. The JS file(s) must be referenced in the <head> tag of the HTML document using the <script> tag to load your function so it can be called later on. The solution should not use a <script> in the <body> of the HTML. The HTML page should use HTML controls, and call functions in the JS file(s) via event handlers The prompt() function should not be used to gather information from the user. The JS file may not contain any prompt() calls, nor document.write(), document.writeln() or any other code that puts text to the HTML page or interacts with the user. The functions in your JS file should build dynamic HTML in a div on the HTML page. Put the HTML and JS files in the same folder. Try to make your solution look similar to the screen shots. Put identifying information in your files: your name, assignment name/number term/class. Example for HTML:  ITEC 136 Lab 1 Page 2 of 10

3 Example for JS: /** YourName * Lab FA-ITEC 136 */ Review code against the documentation and style requirements Word document available on the course web site for the assignment. You will find that both documentation and style requirements are facilitated by the Aptana Integrated Development Environment (IDE). Must use the "use strict" directive. Screenshots from Firefox Browser: The form: Menu selection ITEC 136 Lab 1 Page 3 of 10

4 ITEC 136 Lab 1 Page 4 of 10

5 ITEC 136 Lab 1 Page 5 of 10

6 Popup error when input has not entered proper inputs when Add to Order button is clicked. ITEC 136 Lab 1 Page 6 of 10

7 Popup error when user did not select dine in or takeout when Check Out or Add to Order button is clicked. ITEC 136 Lab 1 Page 7 of 10

8 Sample check out: ITEC 136 Lab 1 Page 8 of 10

9 Helpful Hints The following hints may help you to solve the problem: Use the "util.js" file for building dynamic HTML in JavaScript. The functions in this file can help greatly in retrieving and setting the forms. For simplicity, you can use global variables to keep track of user input. For example, add these global variables to your JS file at the top prior to any function definitions. Use these arrays to hold and display user inputs when the user clicks on "Add to Order" button. // global variables var pizzas = []; var crusts = []; var quantities = []; var bevs = []; // pizzas selected // corresponding crust // corresponding quantities // optional beverage selected Use the parsefloat() function to convert a string into a floating point number. After the JavaScript below, receipttotal will hold a floating point value with decimal precision, ready to be used in math operations. var numberasstring = "6.023"; var receipttotal = parsefloat(numberasstring); Use the parseint() function to convert a string into an integer number. After the JavaScript below, totalpeople will hold a whole number value of 123, ready to be used in math operations. var totalpeopleasstring = "123"; var totalpeople = parseint(totalpeopleasstring); Use the.tofixed() method of any Number object (variable) to convert a number into a string with a fixed number of decimal places. For example: var mypi = ; document.writeln(mypi.tofixed(4)); // writes out Use Math.round() to round a number to the nearest integer. var wholenum = Math.round(20.49); // Returns 20 Use the isnan() function to determine if a value is a valid number or not. This function returns the Boolean value of true or false. For example, isnan(3.1415) will return false while isnan( Two ) will return true. ITEC 136 Lab 1 Page 9 of 10

10 Grading Criteria Quality of the solution: 0 50 points o Documentation (internal comments) (0 5 points) It is not uncommon for industry to impose a way of documenting software that is uniform across all programmers. Documentation standards are outlined in the same document referenced in the style bullet below. o Style (formatting, naming conventions and appearance of solution code) (0 5 points) As listed in the action items of the course web page lab assignment, ensure that your solution code meets the documentation and style guidelines for this course. The documentation and style requirements Word document titled "DocumentationAndStyleGuidelines.doc exists in the Resources folder on your course CD and as a link on the lab assignment page web page. Review your code against this document. I am looking for consistency also. For example, if you prefer to put your curly braces on the same line as the if statement rather than the next line, that is fine provided you are consistent throughout your code. o Correctness (how the program works under test) (0 40 points) The program should work, and be seen to work. The code should be robust. Note that grammar, spelling, and writing mechanics do not contribute to the total points for this assignment; however, improper grammar, poor spelling, or poor writing mechanics may result in significant point deductions. ITEC 136 Lab 1 Page 10 of 10

Lab 1. Purpose. Assignment. Action Items/Programming Requirements

Lab 1. Purpose. Assignment. Action Items/Programming Requirements Lab 1 Purpose To assess your ability to apply the knowledge and skills developed in weeks 1 through 4. Emphasis will be placed on the following learning outcomes: 1. Create and display simple syntactically