Skip to content
Submitted over 3 years ago

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

Iulian Cenușă•330
@iulian-cenusa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

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

  • Brian Farmer•210
    @brianlfarmerllcPosted over 3 years ago

    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 Cenușă•330
    @iulian-cenusaPosted over 3 years ago

    @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

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