Tip Calculator made using vanilla JS

Community feedback

• 

  Jordon Young•120

  @jordon-youngPosted over 2 years ago

  This is very well done, and visually accurate. It's cool to see how you handled the custom tip field because it's so different from how I solved the same problem.

  Responsive Notes

  • Everything flows well until width < 375px. If you set a min-width on your body or card, in most browsers it will scale or zoom instead of breaking the layout. In Firefox responsive view it doesn't automatically zoom, but it does in Chrome and Edge. In any case, that should keep the layout intact.
  • The calculated result text on mobile needs to be smaller to match the design, but also it fits better

  Functional Notes

  • I think it would be convenient if the totals are calculated when the custom tip field is clicked. When the user clicks a predefined tip %, the totals calculate. If the user then clicks on the custom tip already containing a value, nothing happens until the value is modified.

  Nice job getting your HTML issues down to zero! I have a lot of warnings to sort through 🙃

  Marked as helpful

  1

  ---

  

  Adarsh•1,640

  @adram3l3chPosted over 2 years ago

  Hi, @jordon-young. Thank you for your valuable time. I will update the code accordingly :)

  I think it would be convenient if the totals are calculated when the custom tip field is clicked. When the user clicks a predefined tip %, the totals calculate. If the user then clicks on the custom tip already containing a value, nothing happens until the value is modified.

  I didnt get it

  0

  

  Jordon Young•120

  @jordon-youngPosted over 2 years ago

  @adram3l3ch No problem!

  Let me try to explain another way. Here are steps you can do, and watch the calculated amounts after each action.

  1. Enter '100' in Bill input. Notice $100 appears in the total output. That's expected.
  2. Enter '30' as a custom tip. The totals are updated appropriately.
  3. Select the 10% tip button. Notice the tip amount and total amount are updated. This also makes sense.
  4. Click the custom tip field. Important Notice that 30% is still in the custom tip field, but the calculated tip and total are still based on a 10% tip. This only changes if the custom tip value is modified.

  All I was suggesting was that if there is a valid value in the custom tip field, clicking on it should trigger a recalculation with that amount so the user doesn't need to modify the value to recalculate. Hopefully that makes sense now, but if you disagree that's fine too!

  Marked as helpful

  1

  

  Adarsh•1,640

  @adram3l3chPosted over 2 years ago

  @jordon-young Got it 🙌. Am I supposed to empty the custom tip field when the user select a predefined tip ? Or should I keep the custom value and recalculate on focus ?

  0

  

  Jordon Young•120

  @jordon-youngPosted over 2 years ago

  @adram3l3ch that’s up to you! I prefer to keep what the user entered. I think mine recalculates automatically if valid, and switches to show Error in the output if it switches back to custom and the value is invalid. I figured the reset button is the only thing that should clear any of the fields.

  I think I used something like element.checkValidity() and checked each error state if invalid to provide an appropriate error message.

  Marked as helpful

  1