Responsive Tip calculator app with CSS grid and Flexbox and Javascript

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!

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!