Responsive Tip calculator app with CSS grid and Flexbox and Javascript

Community feedback

• 

  andrean-sihombing•350

  @imandreansPosted 2 months ago

  Your solution is closed to the design. Your HTML, CSS, and javascript is well-written and readable. I love how you implement those functions in Javascript, and I learn a lot from your code.

  To improve the design, you may set the limit of the bill input to 0 and set your button reset to disabled when the tip amount and total value are zero.

  Thus, your code and solution is fascinating and I learn a lot. Keep designing!

  Marked as helpful

  0

  ---

  

  P

  Abdessalam Barka•430

  @barka-devPosted 2 months ago

  Thank you for your comment and feedback!

  0
• 

  Alberto Raúl José•610

  @alberto-rjPosted about 2 months ago

  Hi @barka-dev,

  Congras on your solution, but you could improve your tip calculation according to the following test cases:

  Test Cases:

  Case 1: Exact value

  • Input: bill = 100.00, tipPercent = 10, numberOfPeople = 4
  • Expectation:
    • totalAmountPerPerson: 2.50
    • totalPerPerson: 27.50

  Explanation:

  • Tip amount: 100 * 0.10 = 10
  • Total bill with tip: 100 + 10 = 110
  • Total per person: 110 / 4 = 27.50
  • Tip per person: 10 / 4 = 2.50

  Case 2: High tip

  • Input: bill = 200.00, tipPercent = 25, numberOfPeople = 2
  • Expectation:
    • totalAmountPerPerson: 25.00
    • totalPerPerson: 125.00

  Explanation:

  • Tip amount: 200 * 0.25 = 50
  • Total bill with tip: 200 + 50 = 250
  • Total per person: 250 / 2 = 125.00
  • Tip per person: 50 / 2 = 25.00

  Case 3: Division by one person

  • Input: bill = 50.00, tipPercent = 20, numberOfPeople = 1
  • Expectation:
    • totalAmountPerPerson: 10.00
    • totalPerPerson: 60.00

  Explanation:

  • Tip amount: 50 * 0.20 = 10
  • Total bill with tip: 50 + 10 = 60
  • Total per person: 60 / 1 = 60.00
  • Tip per person: 10 / 1 = 10.00

  Case 4: Low tip

  • Input: bill = 300.00, tipPercent = 5, numberOfPeople = 6
  • Expectation:
    • totalAmountPerPerson: 2.50
    • totalPerPerson: 52.50

  Explanation:

  • Tip amount: 300 * 0.05 = 15
  • Total bill with tip: 300 + 15 = 315
  • Total per person: 315 / 6 = 52.50
  • Tip per person: 15 / 6 = 2.50

  Case 5: Odd number of people

  • Input: bill = 142.55, tipPercent = 15, numberOfPeople = 5
  • Expectation:
    • totalAmountPerPerson: 4.28
    • totalPerPerson: 32.79

  Explanation:

  • Tip amount: 142.55 * 0.15 = 21.3825
  • Total bill with tip: 142.55 + 21.3825 = 163.9325
  • Total per person: 163.9325 / 5 = 32.7865 ≈ 32.79
  • Tip per person: 21.3825 / 5 = 4.2765 ≈ 4.28

  Case 6: No tip

  • Input: bill = 80.00, tipPercent = 0, numberOfPeople = 4
  • Expectation:
    • totalAmountPerPerson: 0.00
    • totalPerPerson: 20.00

  Explanation:

  • Tip amount: 80 * 0 = 0
  • Total bill with tip: 80 + 0 = 80
  • Total per person: 80 / 4 = 20.00
  • Tip per person: 0 / 4 = 0.00

  I hope I've helped you improve your tip calculation. Happy coding!

  0

  ---

  

  P

  Abdessalam Barka•430

  @barka-devPosted about 2 months ago

  Hi @alberto-rj, Thank you for your comment.

  I’m not entirely sure if I fully understood your point, but I wanted to clarify that all the cases you’ve listed have been taken into consideration, and the expected result is being achieved. However, if your suggestion is that each case should be handled separately as you mentioned, I believe that one formula can effectively cover all scenarios.

  But if I misunderstood, could you explain your idea a bit more? I just want to make sure I’m on the same page.

  Question: have you tested your cases on the live version ?

  0