Answered step by step
Verified Expert Solution
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
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
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started