You will create a JavaScript program - embedded on an HTML file - according to the...
Fantastic news! We've Found the answer you've been seeking!
Question:
Transcribed Image Text:
You will create a JavaScript program - embedded on an HTML file - according to the requirements listed on the next pages. Upload and submit a single html file (.html extension) containing the code required. PROBLEM DESCRIPTION A GUI (Graphical User Interface) is required to process pizzeria orders and produce accurate results. Radio buttons and text boxes will be used for input and output purposes. A button will be used for processing data. Another button will be employed to clear the text boxes and radio buttons. Create a webpage to implement the interface required using the JavaScript programming language. The illustration below displays the format of the GUI screen required (a template is provided to be used as a starting point to create the screen required). Note: Choose a background color and a text color of your preference. Pizzeria Orders Inputs Purchase Type: Number of Pics Number of Toppings Number of Drinks (Store orders only) Delivery Tip (Delivery orders only) Tip Amount (Delivery orders only) Store Delivery Yes No Contactless Delivery (Delivery orders only) Yes No Process Clear Outputs Total Price Sales Tax Tip Amount Final Cost Contactless Delivery Page 2 of 7 The rules about the logic required are the same as those for the initial version and are listed below: Two options are available for purchase. ●In store purchases: ■ $15.00 per pie ■ $0.50 per topping (per pie - assume all pies will have the same toppings) ●Delivery purchase: . ■ $15.00 per pie ■ $0.50 per topping (per pie - assume all pies will have the same toppings) ■ $3.00 delivery fee (Pre-tax) Fountain Drinks are also offered at $2 per cup in store only. This is optional. A Delivery Tip may be added for delivery only. This is optional and is added after tax. ⚫ Contactless Delivery may be selected for deliveries. Yes or no must be selected. Inputs: • Purchase Type: Text - Store or Delivery ⚫ Number of Pies: Numerical ⚫ Number of Toppings: Numerical ⚫ Number of Fountain Drinks: Numerical ⚫ Delivery Tip option: Yes or No ⚫ Delivery Tip Amount: Numerical ⚫ Contactless Delivery: Yes or No Outputs: • Total purchase price (pre-tax). • Sales Tax amount to be added to the bill (7% rounded up to the nearest cent). ⚫ Tip Amount ⚫ Final Cost of the bill (including the tax). ⚫ Contactless Delivery Page 3 of 7 Processing: • Process button: It will read the content of the text boxes. ■ Example of reading from text box: myVariable = myTextBoxID.value; • It loads the content of the text box whose ID is myTextBoxID into the variable myVariable. ■ Notice that the Process button does not need to "read" the radio buttons since the radio buttons take care of loading the appropriate value to the variables involved. It will process the data from the text boxes as well as the data from the radio buttons and generate the required totals. ■The code for the Process button should not include the prompt or alert functions ⚫ It will place the results on the appropriate output boxes. ■ Example of writing to a text box: myTextBoxID.value = myVariable; • It writes the content of the variable myVariable to the text box whose ID is myTextBoxID. Clear button: ⚫ It will reset all variables The numeric variables should be set 0 The string (text) variables should be set to the empty string. ⚫ All the text boxes should be loaded (written to) with the empty string to clear them of any content. ⚫ It will also clear all the radio buttons (see examples on the Additional Information section). Page 4 of 7 Examples related to radio buttons (these are examples, the name, id and onclick content should be related to your code): ⚫ Using radio buttons: <input type="radio" name="size" id="large" onclick="sizeData="L"> <input type="radio" name="size" id="small" onclick="sizeData="S""> • In the example above, the two associated radio buttons, load the appropriate value to the variable sizeData based on the user's selection. Clearing radio buttons: ⚫ The radio buttons in the previous example may be cleared by using the following syntax in a program: ⚫large.checked false; • small.checked = false; ⚫ Notice that the IDs of the radio buttons are used when clearing a radio button. Point Values Student name inserted as comment in the head section Screen format with radio buttons Screen format with text boxes Screen format with buttons Variable declarations 1 2 2 1 2 Variable initializations Process Button with appropriate code for reading input Process Button with appropriate code for writing output Clear Button clears text boxes and radio buttons Clear Button resets variables Program execution (produces results) Program execution (correct results) 1 2 2 1 1 2 3 References: • Recitation sessions • Lectures • Fluency textbook Chapter 18 • JavaScript Reference Guide • HTML color names: https://www.w3schools.com/colors/colors_names.asp Addendum When submitting assignments for CS170, we strongly encourage you to use HTML and JavaScript elements that were specifically taught in this course. Refer to the learning objectives listed above and to your notes from lectures and recitations. Going beyond the Page 6 of 7 scope of this course when developing and submitting your solutions will automatically result in your submission being FLAGGED as a possible Academic Integrity Violation. Your submission will then be forwarded to the instructor and/or the course coordinator who will decide whether further action should be taken. If there is ANY question of an academic integrity violation, a report will be filed with the University. The following concepts are among those that ARE NOT covered in this course. DO NOT include the following HTML/JavaScript/JQuery programming concepts/elements in your submissions to be graded as they are beyond the scope of this course. Inclusion of these elements will result in a grade of 0 for the assignment. Ovariables defined with const Ovariables defined with let JavaScript Objects such as: }; const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" JS arrays of objects Advanced HTML DOM Document and Element objects and their related properties and methods: DO NOT USE the elements described on the W3Schools page: https://www.w3schools.com/js/js_htmldom document.asp You are required to write your code using the methods specifically taught in your class and NOT to use these advanced concepts. Some of these concepts/methods include: getElementByld Method inner HTML property Advanced HTML DOM Events and Event Objects • HTML forms • Any calls using JQuery Page 7 of 7 SAMPLE TRACES THROUGH THE CORRECT ALGORITHM Sample 1 Sample 2 Sample 3 Delivery Delivery 1 1 21 1 0 1 Inputs: Purchase Type Numbers of Pies Number of Toppings Number of Fountain Drinks Store Delivery Tip Option Delivery Tip Amount Contactless Delivery Yes No 5 Yes No Option Outputs: Total Price $17.50 $34.00 $18.00 Sales Tax $1.23 $2.38 $1.26 Tip $5.00 $0.00 Final Cost $18.73 $41.38 $19.26 Contactless Delivery Yes No Additional Information: • Be sure to include a comment with your name and section in the <head> part of your HTML code program. • To simplify the comparison of text data entered by the user, it is often easier to convert this text to upper case using the notation below. Syntax example: textVariable textVariable.toUpperCase(); (See https://www.w3schools.com/jsref/jsref_toUpperCase.asp for additional example.) • Syntax example to round up a number to 2 decimals. Just add.toFixed(2) to the variable name containing the number. someNumber.toFixed(2) • You will use several variables in this program. • When loading a variable with a numeric value directly from a text box, it is advisable to use the Number function to ensure that the number loaded will be processed as a numeric value instead of a string. The following example illustrates the syntax: someNumber = Number(someNumber); Page 5 of 7 You will create a JavaScript program - embedded on an HTML file - according to the requirements listed on the next pages. Upload and submit a single html file (.html extension) containing the code required. PROBLEM DESCRIPTION A GUI (Graphical User Interface) is required to process pizzeria orders and produce accurate results. Radio buttons and text boxes will be used for input and output purposes. A button will be used for processing data. Another button will be employed to clear the text boxes and radio buttons. Create a webpage to implement the interface required using the JavaScript programming language. The illustration below displays the format of the GUI screen required (a template is provided to be used as a starting point to create the screen required). Note: Choose a background color and a text color of your preference. Pizzeria Orders Inputs Purchase Type: Number of Pics Number of Toppings Number of Drinks (Store orders only) Delivery Tip (Delivery orders only) Tip Amount (Delivery orders only) Store Delivery Yes No Contactless Delivery (Delivery orders only) Yes No Process Clear Outputs Total Price Sales Tax Tip Amount Final Cost Contactless Delivery Page 2 of 7 The rules about the logic required are the same as those for the initial version and are listed below: Two options are available for purchase. ●In store purchases: ■ $15.00 per pie ■ $0.50 per topping (per pie - assume all pies will have the same toppings) ●Delivery purchase: . ■ $15.00 per pie ■ $0.50 per topping (per pie - assume all pies will have the same toppings) ■ $3.00 delivery fee (Pre-tax) Fountain Drinks are also offered at $2 per cup in store only. This is optional. A Delivery Tip may be added for delivery only. This is optional and is added after tax. ⚫ Contactless Delivery may be selected for deliveries. Yes or no must be selected. Inputs: • Purchase Type: Text - Store or Delivery ⚫ Number of Pies: Numerical ⚫ Number of Toppings: Numerical ⚫ Number of Fountain Drinks: Numerical ⚫ Delivery Tip option: Yes or No ⚫ Delivery Tip Amount: Numerical ⚫ Contactless Delivery: Yes or No Outputs: • Total purchase price (pre-tax). • Sales Tax amount to be added to the bill (7% rounded up to the nearest cent). ⚫ Tip Amount ⚫ Final Cost of the bill (including the tax). ⚫ Contactless Delivery Page 3 of 7 Processing: • Process button: It will read the content of the text boxes. ■ Example of reading from text box: myVariable = myTextBoxID.value; • It loads the content of the text box whose ID is myTextBoxID into the variable myVariable. ■ Notice that the Process button does not need to "read" the radio buttons since the radio buttons take care of loading the appropriate value to the variables involved. It will process the data from the text boxes as well as the data from the radio buttons and generate the required totals. ■The code for the Process button should not include the prompt or alert functions ⚫ It will place the results on the appropriate output boxes. ■ Example of writing to a text box: myTextBoxID.value = myVariable; • It writes the content of the variable myVariable to the text box whose ID is myTextBoxID. Clear button: ⚫ It will reset all variables The numeric variables should be set 0 The string (text) variables should be set to the empty string. ⚫ All the text boxes should be loaded (written to) with the empty string to clear them of any content. ⚫ It will also clear all the radio buttons (see examples on the Additional Information section). Page 4 of 7 Examples related to radio buttons (these are examples, the name, id and onclick content should be related to your code): ⚫ Using radio buttons: <input type="radio" name="size" id="large" onclick="sizeData="L"> <input type="radio" name="size" id="small" onclick="sizeData="S""> • In the example above, the two associated radio buttons, load the appropriate value to the variable sizeData based on the user's selection. Clearing radio buttons: ⚫ The radio buttons in the previous example may be cleared by using the following syntax in a program: ⚫large.checked false; • small.checked = false; ⚫ Notice that the IDs of the radio buttons are used when clearing a radio button. Point Values Student name inserted as comment in the head section Screen format with radio buttons Screen format with text boxes Screen format with buttons Variable declarations 1 2 2 1 2 Variable initializations Process Button with appropriate code for reading input Process Button with appropriate code for writing output Clear Button clears text boxes and radio buttons Clear Button resets variables Program execution (produces results) Program execution (correct results) 1 2 2 1 1 2 3 References: • Recitation sessions • Lectures • Fluency textbook Chapter 18 • JavaScript Reference Guide • HTML color names: https://www.w3schools.com/colors/colors_names.asp Addendum When submitting assignments for CS170, we strongly encourage you to use HTML and JavaScript elements that were specifically taught in this course. Refer to the learning objectives listed above and to your notes from lectures and recitations. Going beyond the Page 6 of 7 scope of this course when developing and submitting your solutions will automatically result in your submission being FLAGGED as a possible Academic Integrity Violation. Your submission will then be forwarded to the instructor and/or the course coordinator who will decide whether further action should be taken. If there is ANY question of an academic integrity violation, a report will be filed with the University. The following concepts are among those that ARE NOT covered in this course. DO NOT include the following HTML/JavaScript/JQuery programming concepts/elements in your submissions to be graded as they are beyond the scope of this course. Inclusion of these elements will result in a grade of 0 for the assignment. Ovariables defined with const Ovariables defined with let JavaScript Objects such as: }; const person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" JS arrays of objects Advanced HTML DOM Document and Element objects and their related properties and methods: DO NOT USE the elements described on the W3Schools page: https://www.w3schools.com/js/js_htmldom document.asp You are required to write your code using the methods specifically taught in your class and NOT to use these advanced concepts. Some of these concepts/methods include: getElementByld Method inner HTML property Advanced HTML DOM Events and Event Objects • HTML forms • Any calls using JQuery Page 7 of 7 SAMPLE TRACES THROUGH THE CORRECT ALGORITHM Sample 1 Sample 2 Sample 3 Delivery Delivery 1 1 21 1 0 1 Inputs: Purchase Type Numbers of Pies Number of Toppings Number of Fountain Drinks Store Delivery Tip Option Delivery Tip Amount Contactless Delivery Yes No 5 Yes No Option Outputs: Total Price $17.50 $34.00 $18.00 Sales Tax $1.23 $2.38 $1.26 Tip $5.00 $0.00 Final Cost $18.73 $41.38 $19.26 Contactless Delivery Yes No Additional Information: • Be sure to include a comment with your name and section in the <head> part of your HTML code program. • To simplify the comparison of text data entered by the user, it is often easier to convert this text to upper case using the notation below. Syntax example: textVariable textVariable.toUpperCase(); (See https://www.w3schools.com/jsref/jsref_toUpperCase.asp for additional example.) • Syntax example to round up a number to 2 decimals. Just add.toFixed(2) to the variable name containing the number. someNumber.toFixed(2) • You will use several variables in this program. • When loading a variable with a numeric value directly from a text box, it is advisable to use the Number function to ensure that the number loaded will be processed as a numeric value instead of a string. The following example illustrates the syntax: someNumber = Number(someNumber); Page 5 of 7
Expert Answer:
Answer rating: 100% (QA)
Below is a HTML file with embedded JavaScript code to cr... View the full answer
Related Book For
Income Tax Fundamentals 2013
ISBN: 9781285586618
31st Edition
Authors: Gerald E. Whittenburg, Martha Altus Buller, Steven L Gill
Posted Date:
Students also viewed these programming questions
-
Calculate the new profit sharing ratio after the admission of Fischer. Assignment Ubisoft Entertainment is a partnership of exclusive game distributors who specialize in electronic arts and play...
-
The Laurenster Corporation is getting into the construction business. A list of activities and their optimistic, most likely, and pessimistic completion times are given in the following table for the...
-
The Gateway Arch in St. Louis, Missouri, is closely approximated by the inverted catenary y = 693.8597 - 68.7672 cosh 0.0100333x, -299.2239 x 299.2239. Use the integration capabilities of a...
-
How many times can you define a function?
-
Refer to the information in the previous exercise for the Cakebread Candy Company. Based on the information for the company, write a short report explaining the cause of the variances that you...
-
2. Craig likes to collect records. Last year he had 10 records in his collection. Now he has 14 records. What is the percent increase of his collection?
-
Aeration and sludge recirculation have been practiced for many years at municipal and industrial water treatment plants. Aeration is used primarily for the physical removal of gases or volatile...
-
A client owns a $1,000 10-year bond. The coupon rate is 6%. The client acquired the bond three years ago at a discount. What is known about the interest rates three years ago? A. The stated rate was...
-
The figure below shows a flow network on which an s-t flow has been computed. The capacity of each edge appears as a label next to the edge, and the numbers in boxes give the amount of flow sent on...
-
Gobi Corporation's electronics division reported an ROI of 9% for the current period. The division's return on sales for the period was 15%, and its operating revenue was $240,000. 1. The division's...
-
What does optimum pH tell you about Alkaline Phosphatase?
-
New employees at the Optimus Corporation, a medical equipment manufacturer, are assigned mentors who guide them through on-the-job training as well provide an orientation to the culture of the...
-
A 1000-ft tank contains 85 STB of crude oil and 20,000 SCF of gas, all at 120F. When equilibrium is established (i.e., when as much gas has dissolved in the oil as will), the pressure in the tank is...
-
Assume that you are an accountant who works for a Firm. Your boss has given you the assignment to find out from the legal department how to deal with a legal matter regarding a former client, Mike...
-
Gordon and Lisa estimate that they will need $1,875,000 in 40 years for their retirement years. If they can earn 8 percent annually on their funds, how much do they need to save annually?
-
Greg died on July 1, 2012, and left Lea, his wife, a $50,000 life insurance policy which she elects to receive at $5,000 per year plus interest for 10 years. In the current year, Lea receives $6,200....
-
In 2012, Lou has a salary of $54,000 from her job. She also has interest income of $1,700. Lou is single and has no dependents. During the year, Lou sold silver coins held as an investment for a...
-
While preparing Massie Miller's 2012 Schedule A, you review the following list of possible charitable deductions provided by Massie: Cash contribution to a family whose house burned...
-
Four moles of nitrogen and one mole of oxygen at \(P=1 \mathrm{~atm}\) and \(T=300 \mathrm{~K}\) are mixed together to form air at the same pressure and temperature. Calculate the entropy of mixing...
-
A mole of argon and a mole of helium are contained in vessels of equal volume. If argon is at \(300 \mathrm{~K}\), what should the temperature of helium be so that the two have the same entropy?
-
If the two gases considered in the mixing process of Section 1.5 were initially at different temperatures, say \(T_{1}\) and \(T_{2}\), what would the entropy of mixing be in that case? Would the...
Study smarter with the SolutionInn App