# Tip Calculator

Easy
51
69.4% Acceptance

In this lab, you'll be creating a simple React application - a Tip Calculator. This app will calculate the total bill amount based on the user's input for the bill amount and the desired tip percentage.

### Steps to Build the App

1. Create Input Elements:

• Bill Amount Input: Add an input field where users can enter the bill amount. Assign it the ID `#billAmount`.
• Tip Percentage Input: Add another input field for users to enter the tip percentage. This should have the ID `#tipPercent`.
2. Add a Calculate Button:

• Create a button that, when clicked, will trigger the calculation of the total bill. This button should have the ID `#calculateAmount`.
3. Implement the Calculation Logic:

• Write a function that calculates the total bill amount, including the tip. This is done by adding the tip amount to the original bill amount.
4. Display the Result:

• Show the total bill amount in a dedicated element on the page. This element should have the ID `#totalAmount`.
• Ensure that the displayed total is formatted to two decimal places.

### Testing Criteria

Your application will be tested based on the following:

• Correct implementation of input fields and button with specified IDs.
• Accurate calculation and proper display of the total bill amount, formatted to two decimal places.

## Challenges

### Challenge 1: Input Fields and Button Creation

• Objective: Create the required interface elements for the tip calculator.
• Tasks:
• Implement a numerical input field for the bill amount with the ID `#billAmount`.
• Implement a numerical input field for the tip percentage with the ID `#tipPercent`.
• Create a button to trigger the calculation with the ID `#calculateAmount`.
• Expectations: The input fields should accept only numerical values. These elements must be correctly implemented and identifiable by their respective IDs.

### Challenge 2: Calculation and Output Display

• Objective: Implement the logic to calculate and display the total bill amount.
• Tasks:
• Develop a function that calculates the total bill amount when the `#calculateAmount` button is clicked. This includes the original bill amount and the tip calculated as `totalAmount = billAmount + (billAmount * tipPercent / 100)`.
• Display the calculated total in an element with the ID `#totalAmount`. This amount should be formatted to two decimal places.
• Expectations: The calculation must be accurate, and the total amount should be displayed correctly, limited to two decimal places.