Tip Calculator Lab
Easy
25
1
63.6% Acceptance
In this lab, you will create a simple tip calculator. You will have to create an input field for the bill amount, an input field for the tip percentage, a button to calculate the tip, and a paragraph to display the calculated tip.
Steps
- Create a number input element with id
billAmount
- Create a numberinput field with id
tipPercentage
, the input value should within1
and99
you can configure it using themin
andmax
attributes - Create a button with id
calculateTip
to calculate the tip when clicked - Create a pargraph tag with id
tipAmount
, this is where the calculated tip amount is visible - Create a JavaScript click event listener of the
calculateTip
button that retrieves the values of the#billAmount
andtipPercentage
- If any of the values are null or not within the specified range, you should return
Invalid Input
in the#tipAmount
element - If the entered input is valid, then you should present the following formatted string as output
Tip Amount: ${tipAmount}
NOTE: The output strings are compared directly using string matching and regular expression, make sure that you limit the decimal points to 2 digits when calculating the tip amount