Skip to content
Submitted almost 4 years ago

Tip Calculator with Flexbox and JS

Lesley Wesley•385
@LesleyWesley
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey guys!

One question I had was that I noticed that if the total outputs are more than $100, it changes the size of the calculator. I was just wondering how you would fix this, whether you would use max-width or another method?

Other than that, I worked really hard on the JS for this project, and I'm pretty proud of getting it to work, but I'm open to any suggestions for how to improve!

Also, I wasn't sure how to initiate the calculations since there wasn't a submit button, but I ended up making everything happen after you press "Enter." I'm curious about how others approached this, though.

Code

Please log in to post a comment

Log in

Community feedback

  • hao pham•745
    @jerry-the-kid
    • Size you can set overflow-x : scroll with the fixed width.
    • Intead of pressed 'Enter'. You can addEventListener('input') (when you input number ) or addEventListener('focus') (' after input from when you focus to other thing ).
    Marked as helpful
  • Haybuka Paschal•670
    @Haybuka

    For the data collation, i am not sure how i wired mine, didnt really cross check before submitting, but you can wire it all to be a form, that way you can do a validation on submit which just checks the input fields and type

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