Learn by Doing: Tip Calculator
What we are building
We are going to build a form that takes a number and calculates the tip amount and returns the new amount with tip included.
What you need
- Text Editor (I prefer Visual Studio Code)
- Browser (Google Chrome)
Initial Page Creation
Add Input for bill amount
Add button to calculate tips
Alert message when button clicked
Alert message with tip totals
Display totals in a table
Initial styling with Bootstrap
Second pass styling with Bootstrap
More TODOs!
- Only display the percentages when the button is clicked
- Create a drop down to choose which percentage, rather than printing all of them.
- Add a slider where you can choose the percentage tip you want to give, then click calculate
- Have the slider update the totals on the screen as it’s moved left and right.