Tip Calculator Project

Yes I know, tip calculator so creative :wink: But it was a good newbie project!

I’m working on the Javascript portion of FCC, and I realized while I’ve done Javascript Projects in Animate CC using their HTML5 Canvas file type, I’ve never actually built a vanilla javascript project. So I wanted to make my very first. I found a quick tutorial for a tip calculator that had very simple functionality. You input a price, picked a percentage, and hit calculate and it would generate a tip amount and total for you. I used this because FCC hadn’t shown me how to call to my html IDs yet LOL
But I wanted to make sure I understood it, and made a lot of changes and additions of my own, so other than completely restyling it, here are the changes/additions I made. (Some were suggestions from a friend)

  • I switched the tip % selection to radio buttons with a few more options.
  • I rounded the dollar amounts so it wouldn’t give absurd numbers like 32.555555 it would tell you dollar amounts like $32.55.
  • I made it auto-calculate when you are typing so you don’t have to hit okay
  • I made it so you can’t type negative values
  • I added a bill splitting option
  • I made it so you can’t add negative or decimal values to the bill splitting option

I think there were some other things, but please let me know what you think :slight_smile:

I like it! It has a very clean and fresh interface design-wise, and works well too (I especially like the auto-calculate functionality). One little bug I noticed was that, by using the arrow keys to control the bill amount, I was able to get a negative value. Other than that, I couldn’t find any way to “break” it. Well done :slightly_smiling_face:

1 Like

Drat! I’m back to the drawing board and revisiting that, I disabled the number spinners but I dont think it works across all browsers. I also tried adding a min/max in html to keep the numbers from hitting negative values.
I think I’m going to try creating a rule that pushes it back up if somebody takes it down too far :thinking:

I will conquer this bug!!!:muscle::muscle::muscle:

Thank you so much for taking the time to try it and let me know how it was working!

1 Like