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.