Tip Calculator Lab

56.1% 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.


  1. Create a number input element with id billAmount
  2. Create a numberinput field with id tipPercentage, the input value should within 1 and 99 you can configure it using the min and max attributes
  3. Create a button with id calculateTip to calculate the tip when clicked
  4. Create a pargraph tag with id tipAmount, this is where the calculated tip amount is visible
  5. Create a JavaScript click event listener of the calculateTip button that retrieves the values of the #billAmount and tipPercentage
  6. If any of the values are null or not within the specified range, you should return Invalid Input in the #tipAmount element
  7. 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