I am on a mission to practice as much JavaScript as I can by completing different projects. I decided on this project because it is relatively simple and straightforward. I am already familiar with making JavaScript calculations. To create the JavaScript tip calculator project I would just have to learn how to append those calculations onto an existing html element.

Brainstorming Process

Before diving right in I sat down and thought about the steps needed to implement the JavaScript tip calculator.

Steps

  • User enters in the dollar amount of bill
  • User selects percentage amount from dropdown
  • JavaScript tip calculator function multiplies the bill amount with the tip percentage to calculate tip amount
  • JavaScript tip calculator adds your bill amount to tip amount calculated in previous step
  • JavaScript tip calculator returns your bill amount, tip amount, and your total bill to the end user and by appending it to html

I determined that the user would need to enter in their dollar amount of the bill. I would then have them select the percentage from a dropdown to keep it more simple for me. I would also create a JavaScript tip calculator function that would grab the bill amount, tip percentage, multiply them to return the tip amount, and add the tip amount to the bill to get the total amount.

HTML

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.

I created a section that displays the bill amount, tip amount owed, and total bill that is owed. This section is hidden through the CSS, and will later be displayed through JavaScript.

Copy to Clipboard

CSS

Now let’s style the JavaScript tip calculator. I found a cool background image of a cafe to add to the javascript tip calculator. I also thought it would be cool to add a blurry see through background in the area where all the info is displayed. I then styled the font, and the hr divider in the CSS.

Copy to Clipboard

JavaScript

I created a JavaScript tip calculator function called calcTip. In the function I grab the tip amount value. I also grab the bill amount input value and set those both to variables so they can be used easily later. Then I find the bill card element and set it as a variable, which will be later used to display the billcard element which is currently hidden.

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.

Copy to Clipboard