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 with Flexbox and JS

@LesleyWesley

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


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.

Community feedback

hao pham 745

@jerry-the-kid

Posted

  • 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

0

@LesleyWesley

Posted

@jerry-carry Okay, thank you! :)

1

@Haybuka

Posted

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

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