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

@memoye

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


Please review my code, I'd like feedback on how I used useReducer and context API. Is there a better way I should have done it? Also, is my logic for calculating tips optimal, are there best practices I should have followed? Also look at the behavior of my inputs. Are they user-friendly.

I'd like as much feedback as I can get please.

Community feedback

@Ayoubrabiae

Posted

Hi Brown,

I've reviewed your code and the preview, and I must say, you're doing excellent work! The app functions very well, and I've picked up some neat tricks that I can apply to my own solutions 😅.

However, there's just a small issue with the CSS that could enhance the overall design, which is crucial for a better user experience. I suggest removing the fixed width of 600px from your .container and allowing it to adapt to its content. Additionally, add the following styles to your .output div: width: 300px; min-width: 100%. This will ensure it looks great on desktop screens while taking up 100% of the width on mobile devices.

That's it! I hope my suggestions are helpful to you.

Marked as helpful

1

@memoye

Posted

Thank you, Ayoub. I appreciate your feedback and it makes me so happy that someone thinks I'm at least doing something right 😂. I'll be making the adjustments you pointed out ASAP to make the solution better. Much appreciated 🙂!

1

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