
Design comparison
Solution retrospective
I would optimize the JavaScript code further by handling edge cases more efficiently, such as when the user enters negative numbers or non-numeric values. Adding unit tests for the JavaScript functions to ensure that they behave as expected in all scenarios would also be a priority.
From a performance perspective, I would consider lazy-loading images or assets if this were part of a larger project. I’d also look into improving the design for accessibility compliance, ensuring proper contrast ratios for text and background colors to make the application more user-friendly for individuals with visual impairments.
What challenges did you encounter, and how did you overcome them?Handling Input Validation: Ensuring that invalid inputs like zero, negative numbers, or non-numeric values wouldn’t break the app was another tricky part. The error message for “Number of People” needed to be clear and visible, without disrupting the overall flow of the UI.
How I Overcame It: I added custom error handling in JavaScript and implemented conditions to display error messages when necessary. CSS classes were used to style error messages and make them only appear when invalid input occurred. Additionally, I made sure to disable the calculation button until valid input was provided
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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