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

#react#chakra-ui
Priyanshi02612• 50

@Priyanshi02612

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


What are you most proud of, and what would you do differently next time?

  • I'm proud of how I implemented the tip calculator app, ensuring it closely matches the design and meets all the user requirements. I utilized React and Chakra UI to create a responsive and visually appealing interface. Handling dynamic calculations for tip amounts and totals per person was a rewarding challenge, and I'm satisfied with the solution I came up with.

  • Next time, I would focus more on optimizing the code for better performance and readability. I could explore more efficient ways to manage state and handle user interactions. Additionally, I would spend more time refining the styling to achieve pixel-perfect accuracy with the design.

  • Overall, I'm pleased with the outcome of this project, but there's always room for improvement in terms of code quality and design fidelity.

What challenges did you encounter, and how did you overcome them?

  • One challenge I encountered was handling custom tip inputs alongside pre-defined tip percentages. Initially, I struggled to properly integrate the custom tip functionality while maintaining a clear user interface and accurate calculations. To overcome this challenge, I carefully revised the logic for calculating tips and ensured that the custom tip input field interacts seamlessly with the pre-defined tip percentage buttons.

  • Another challenge was managing state and ensuring that all user inputs are properly validated before performing calculations. I tackled this challenge by implementing conditional checks to validate user inputs and display appropriate error messages when necessary. Additionally, I utilized useRef to manage error display elements and provide visual feedback to users when invalid inputs are detected.

  • Overall, by breaking down the challenges into smaller tasks and carefully considering the logic and user experience, I was able to overcome these obstacles and implement a functional and user-friendly tip calculator app.

What specific areas of your project would you like help with?

  • I'd appreciate assistance with optimizing the layout of the app for different screen sizes and improving the overall responsiveness. Additionally, I'm open to suggestions for enhancing the user interface and experience to make it more intuitive and visually appealing. Any feedback on code quality and best practices would also be valuable to ensure that the project is well-structured and maintainable.

Community feedback

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