- User enters in the dollar amount of bill
- User selects percentage amount from dropdown
The first step is the HTML. I am using the Bootstrap starter template. I created a form to collect the bill information and the tip amount. I made sure the input type of this was a number so the user could not add in non numeric characters in the field and it would save me a step of having to validate the data. To further avoid having to validate data I set the input value minimum to 0. I also set the initial value at 100.00.
Next step is turning the tip amount value and bill amount value to numbers from strings, so I can calculate math on both of these (things will not go as expected if you add strings together).
I then grab the html elements that are currently blank and will house the calculated bill, tip, and total.
Next is the calculations. I calculate the total bill amount by multiplying the tip amount with the bill amount. I calculate the total bill by adding the total tip amount with the bill.
I then append the tip, bill and total values to the blank elements mentioned in the paragraph above the last one. I used .toFixed(2) on the values so they will show in a dollar amount.
Lastly, I set the bill card element to visible so you can now see the card that shows the amount owed.