Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

NOTE ONLY USE : JAVA SCRIPT,HTML,CSS AND BOOTSTRAP 1. Create a web page and.js File: Name your webpage comp215MTPart2.html, and add the features and elements

NOTE ONLY USE : JAVA SCRIPT,HTML,CSS AND BOOTSTRAP

image text in transcribed

image text in transcribed

image text in transcribed

1. Create a web page and.js File: Name your webpage comp215MTPart2.html, and add the features and elements required below. Place the required JavaScript in an external script file named comp215MTPart2.js and link it to your webpage. Sample Form Layout (92) with Sample Data Shown Remote Meeting Kit Invoice Item Quantity Cost 1. USB Mouse at $45.00 1 45.00 470.00 129.00 189.00 833.00 2. 27" Monitor at $235.00 2 3. HD WebCam at $129.00 1 4. USB Headset w/ Mic at $189.00 v 1 Select Item Subtotal: USB Mouse at $45.00 USB Keyboard at $95.00 PST: 27" Monitor at $235.00 GST: HD WebCam at $129.00 USB Microphone at $25.00 Total: USB Headset w/ Mic at $189.00 49.98 41.65 924.63 Clear Form Calculate a. 2. Form: Add a Form to your web page similar to the sample above with buttons and textboxes all with suitable names. Use an h3 element to display the heading "Remote Meeting Kit Invoice" b. Use a table to layout your form - no other special form layout is required and your form need only be organized and clear and using correct html elements - your Form does not have to look identical to the sample. 3. Selectboxes: Place Four (4) Select elements with suitable IDs. Use clear, meaningful Identifier names. a. Each Select box should have its own identical set of options with the following option values and text: Option Value 0.00 45.00 95.00 225.00 Displayed Text Select Item USB Mouse at $45.00 USB Keyboard at $95.00 27" Monitor at $225.00 3. Selectboxes: Place Four (4) Select elements with suitable IDs. Use clear, meaningful Identifier names. a. Each Select box should have its own identical set of options with the following option values and text: Option Value 0.00 45.00 95.00 235.00 129.00 25.00 Displayed Text Select Item USB Mouse at $45.00 USB Keyboard at $95.00 27" Monitor at $235.00 HD WebCam at $129.00 USB Microphone at $25.00 USB Headset w/ Mic at $189.00 189.00 b. The value attribute of each Option holds the price of that item. 4. Textboxes: Place four (4) textboxes for item quantities and four (4) textboxes for item costs all with suitable IDs Use clear, meaningful Identifier names. 5. Clear Form Button: Place a button element (Input of type button) named with a suitable ID. a. Make the button face show the text "Clear Form" b. Add a click event attribute to the button to call the function ClearForm() when the button is clicked. 6. Calculate Button: Place a button element (Input of type button) with a suitable ID. a. Make the button face show the text "Calculate" b. Add a click event attribute to the button to call the function Calculate () when the button is clicked 7. ClearForm() Javascript function: Write a Javascript function named ClearForm() that will: a. Reset the form values to an initial state: textboxes should have empty values and select boxes should be 5. Clear Form Button: Place a button element (Input of type button) named with a suitable ID. a. Make the button face show the text "Clear Form" b. Add a click event attribute to the button to call the function ClearForm() when the button is clicked. 6. Calculate Button: Place a button element (Input of type button) with a suitable ID. Make the button face show the text "Calculate" b. Add a click event attribute to the button to call the function Calculate () when the button is clicked a. 7. ClearForm() Javascript function: Write a Javascript function named ClearForm() that will: a. Reset the form values to an initial state: textboxes should have empty values and select boxes should be set to show the first option (the "Select Item" option). 8. Calculate() Javascript function: Write a Javascript function named Calculate () that will: a. Calculate the cost of each item: multiply the value (price) of each item (from the value of each Selectbox's selected option) times the Quantity of that item b. Display the Cost of each item in its corresponding Cost textbox c. Add the cost of the item to the Subtotal and display this value in the Subtotal textbox d. Calculate the 6% PST (PST = Subtotal x 0.06 ) and display this value in the PST textbox Calculate the 5% GST (GST = Subtotal x 0.05 ) and display this value in the GST textbox f. Calculate the Total (Total = Subtotal + PST + GST) and display this value in the Total textbox e. 9. Other Details: a. The user should be able to select any combination of items (0 to 4 items) and may leave any item unselected. The calculations should work for any reasonable input quantity values No other input validation is required b. c. 1. Create a web page and.js File: Name your webpage comp215MTPart2.html, and add the features and elements required below. Place the required JavaScript in an external script file named comp215MTPart2.js and link it to your webpage. Sample Form Layout (92) with Sample Data Shown Remote Meeting Kit Invoice Item Quantity Cost 1. USB Mouse at $45.00 1 45.00 470.00 129.00 189.00 833.00 2. 27" Monitor at $235.00 2 3. HD WebCam at $129.00 1 4. USB Headset w/ Mic at $189.00 v 1 Select Item Subtotal: USB Mouse at $45.00 USB Keyboard at $95.00 PST: 27" Monitor at $235.00 GST: HD WebCam at $129.00 USB Microphone at $25.00 Total: USB Headset w/ Mic at $189.00 49.98 41.65 924.63 Clear Form Calculate a. 2. Form: Add a Form to your web page similar to the sample above with buttons and textboxes all with suitable names. Use an h3 element to display the heading "Remote Meeting Kit Invoice" b. Use a table to layout your form - no other special form layout is required and your form need only be organized and clear and using correct html elements - your Form does not have to look identical to the sample. 3. Selectboxes: Place Four (4) Select elements with suitable IDs. Use clear, meaningful Identifier names. a. Each Select box should have its own identical set of options with the following option values and text: Option Value 0.00 45.00 95.00 225.00 Displayed Text Select Item USB Mouse at $45.00 USB Keyboard at $95.00 27" Monitor at $225.00 3. Selectboxes: Place Four (4) Select elements with suitable IDs. Use clear, meaningful Identifier names. a. Each Select box should have its own identical set of options with the following option values and text: Option Value 0.00 45.00 95.00 235.00 129.00 25.00 Displayed Text Select Item USB Mouse at $45.00 USB Keyboard at $95.00 27" Monitor at $235.00 HD WebCam at $129.00 USB Microphone at $25.00 USB Headset w/ Mic at $189.00 189.00 b. The value attribute of each Option holds the price of that item. 4. Textboxes: Place four (4) textboxes for item quantities and four (4) textboxes for item costs all with suitable IDs Use clear, meaningful Identifier names. 5. Clear Form Button: Place a button element (Input of type button) named with a suitable ID. a. Make the button face show the text "Clear Form" b. Add a click event attribute to the button to call the function ClearForm() when the button is clicked. 6. Calculate Button: Place a button element (Input of type button) with a suitable ID. a. Make the button face show the text "Calculate" b. Add a click event attribute to the button to call the function Calculate () when the button is clicked 7. ClearForm() Javascript function: Write a Javascript function named ClearForm() that will: a. Reset the form values to an initial state: textboxes should have empty values and select boxes should be 5. Clear Form Button: Place a button element (Input of type button) named with a suitable ID. a. Make the button face show the text "Clear Form" b. Add a click event attribute to the button to call the function ClearForm() when the button is clicked. 6. Calculate Button: Place a button element (Input of type button) with a suitable ID. Make the button face show the text "Calculate" b. Add a click event attribute to the button to call the function Calculate () when the button is clicked a. 7. ClearForm() Javascript function: Write a Javascript function named ClearForm() that will: a. Reset the form values to an initial state: textboxes should have empty values and select boxes should be set to show the first option (the "Select Item" option). 8. Calculate() Javascript function: Write a Javascript function named Calculate () that will: a. Calculate the cost of each item: multiply the value (price) of each item (from the value of each Selectbox's selected option) times the Quantity of that item b. Display the Cost of each item in its corresponding Cost textbox c. Add the cost of the item to the Subtotal and display this value in the Subtotal textbox d. Calculate the 6% PST (PST = Subtotal x 0.06 ) and display this value in the PST textbox Calculate the 5% GST (GST = Subtotal x 0.05 ) and display this value in the GST textbox f. Calculate the Total (Total = Subtotal + PST + GST) and display this value in the Total textbox e. 9. Other Details: a. The user should be able to select any combination of items (0 to 4 items) and may leave any item unselected. The calculations should work for any reasonable input quantity values No other input validation is required b. c

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Oracle Database 19c DBA By Examples Installation And Administration

Authors: Ravinder Gupta

1st Edition

B09FC7TQJ6, 979-8469226970

More Books

Students also viewed these Databases questions

Question

Why do HCMSs exist? Do they change over time?

Answered: 1 week ago