Day 053: BTDT Tip Calculator & Bill Splitter - using parseFloat, toFixed & building it in order to make it work!

Yesterday, I took take a short break from the bootcamp for a day to let the information sink in a bit (see active and diffuse learning). So what better time than to do my next BUILD THE DAMN THING project. It is a handy tip calculator & bill splitter that I probably spent way more time on that I should have.

See the Pen Tip Calculator/Bill Splitter by 4nn (@4nn) on CodePen.

Some Things I Learned

I guess I already knew these things, but it was more so putting it into practice and getting to experience the joys of parsing strings to numbers to strings to numbers so the formula would work.

I initially thought this would be quick and easy since I banged out the formula in the console in less than 5 mins.

parseInt(), parseFloat(), .toFixed()

Of course the console just deals with the parameters as numbers. It is a different story when you are pulling values from the DOM, which would output those numbers into a string. You can't really do math with strings!

So I became intimately familiar with the parse functions to get those strings into numbers. (Good to know when I tackle the building a calculator project)

parseInt() parses the value into an integer. I used this in the beginning since I was testing with whole numbers.

parseFloat() parses the value into the floating point number (with all the decimals and such).

Once that was all set, I later used the .toFixed() method to get the numbers into 2 decimal places.

Voila! The math actually worked with the DOM in codepen!

So I go about to add in the conditionals and error messages and such, but the conditionals did not work because it was essentially asking if the preTipBill === NaN. Why did it keep coming up as NaN even though the math worked out previously? Enter frustrationland!

My husband probably noticed my annoyance after some time which was his cue to help (of which I didn't ask for his help, but recognize that I need to get better at knowing when to ask). So he identified that I was doing too many things at a time before calling the if statement. I was assigning the DOM values to the variable and then reassigning the variables to parseFloat().toFixed() and then setting the condition statement. It looked something like this:

 let preTipBill = document.getElementById("preTipBill").value;
 preTipBill = parseFloat(preTipBill).toFixed(2);
 let tipPercent = document.getElementById("tipPercent").value;
 let splitBetween = document.getElementById("splitBetween").value;
 splitBetween = parseFloat(splitBetween).toFixed(0);

 if (preTipBill === "" || tipPercent === "" || preTipBill.length === 0 || tipPercent.length === 0) {
  ...
 }

Of course that mess was then checking the if conditionals to preTipBill === NaN which is not what I want especially when trying to reassign blank splitBetween values to 1 if the user opts not to split the bill. Anyways, once he pointed that out, I got it right away. Like, RIGHT AWAY. Rookie mistake!

  let preTipBill = document.getElementById("preTipBill").value;
  let tipPercent = document.getElementById("tipPercent").value;
  let splitBetween = document.getElementById("splitBetween").value;

  if (preTipBill === "" || tipPercent === "" || preTipBill.length === 0 || tipPercent.length === 0) {
    document.getElementById("output").innerHTML = "Please input all required amounts!";
  } else {

    preTipBill = parseFloat(preTipBill).toFixed(2);
    splitBetween = parseFloat(splitBetween).toFixed(0);

I needed to reassign the values LATER, preferably once the condition is met. Just moving the reassignments fixed the whole thing. Sheesh!

In working through all the projects in the Angela Yu Web Dev Bootcamp, the location of the reassignments were sort of laid out for you when working through the projects and it made a ton of sense at the time, of course. But it really isn't until you've been frustrated and 😬 over it for an hour that it really sinks in. The ORDER of your code matters! I found this to be a very valuable lesson.

On a side note: it's my mom's birthday this Saturday and I'll definitely be pulling out this little calculator at the end of the meal!

Here's the User Story

• user inputs total initial bill
• user inputs desired tip amount
• user gets error message if initial bill and tip amounts are missing
• display the tip subtotal
• display the total amount
• user can opt to split the bill, input number of people to split it with
• display the per person initial bill
• display the per person tip and total
• if user does not split bill, only display the tip & final total
• have button calculate and clear all