Exercise: Kitchen Calculator 1. Create the following Web Application Interface: Note: The options for the product type drop down list are defined with: \( \begin{aligned} \text { } \\ & \text { \text {--Select Your Product--}> \\ & \text { Base Cabinets}> \\ & \text { Wall Cabinets}> \\ & \text { \text { Counter Tops } \text { option }>\end{aligned} \) a. Write a JavaScript Function getTotalPrice() for the calculate button so that it calculates based on the following prices: b. Use the images in the kitchens folder on brightspace so that the correct image displays when the drop down list box is displayed. c. Use a div element and toggle the visibility of the text box for option 4. When counter tops are selected do not show this option. d. If empire standard is selected surround the interface with a blue border. Use different border colors or styles for Kitchen Elite and Gold Star Plus. 3. Styling: The sample form has only basic styling. Experiment with Bootstrap Form CSS classes to improve the layout of your form. 4. Form Validation Rules: Use HTML 5 and CSS form validation to apply the following rules: a. Make all the text fields "Required". The browser-based error message is good enough for this. b. The Linear footage must be between 3 to 50 feet. (Optional) Use JavaScript to provide a custom error message: "Linear footage must be between 3 to 50 feet". c. The number of Corner Units must be from 0 to 5. (Optional) Use JavaScript to provide a custom error message: "The number of Corner Units must be from 0 to 5 " d. Optional Display an error message if the product type drop down has not been set to one of the three options