Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator App by Iulian Cenușă using CSS Grid and Flexbox

@iulian-cenusa

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I manage to solve the most part of the challenge but I saw a few visual bugs on inputs and also I got sometimes NaN in values of tip amount and total per person. Hope someone could help me fix that. Also I will greatly appreciate your feedback on this.

Community feedback

@brianlfarmerllc

Posted

great job!

The bug I saw on the input was that the input got larger when you clicked on it. Was that what you were referring to? If so you could add this to the bill_container and the nr_people_container to keep the img and the input on the same line.

display: flex; justify-content: space-between; align-items: center;

For the nan maybe use a ternary operator in the case that it's a negative number in the input? I didn't look at the code for that but maybe something you could easily fix?

Marked as helpful

1

@iulian-cenusa

Posted

@brianlfarmerllc Hi !

Thank you for the suggestion ! It solved my problem. As for NaN bug, I manage to solve it in JS code.

Best regards, Iulian

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord