Answered step by step
Verified Expert Solution
Link Copied!

Question

00
1 Approved Answer

Question #2 Implement a web page (idnex.html) that generates a restaurant bill. Use numeric input boxes for tax rate percentage, the meal price, and the

image text in transcribed

image text in transcribed

Question #2 Implement a web page (idnex.html) that generates a restaurant bill. Use numeric input boxes for tax rate percentage, the meal price, and the tip percentage. After the "Calculate bill" button is clicked, if the input values are valid, display the bill below the button. The bill should show the meal price, the tax amount, the tip amount, and the total payment due. The screenshots below show how the page should behave. 1. You must use appropriate attributes for your elements, including attributes for input validation. The tax rate percentage element should accept a decimal number between 0 and 100, with a maximum of 2 digits to the right of the decimal point. The price element should accept a decimal number between 0 and 1000, with a maximum of 2 digits to the right of the decimal point. The tip percentage element should accept an integer between 0 and 200 2. Use JavaScript to check for input errors and to display one error message in an alert box. For each user input that is outside of the ranges described above, there should be a separate line in the error message. If there is invalid input, remove the previously displayed restaurant bill before displaying the error message alert box. 3. The code that displays the error message should not use hard-coded values for the valid ranges of the elements. Instead, retrieve those values by using the input> element min and max attributes. Implement CSS rules such that when an element has focus, the element background becomes 4. light green for valid input and light red for invalid input. 5. Use

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access with AI-Powered 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

Students also viewed these Databases questions