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

@stephany247

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 most proud of the way I implemented real-time input validation and dynamic button behavior in my project. The reset button now only enables when there’s input in the field, providing a more user-friendly experience. Additionally, I’m proud of successfully utilizing Bootstrap and Flexbox to create a responsive layout that looks good on various devices.

Next time, I would spend more time planning the project structure and the overall user experience before jumping into the coding phase. This would help streamline the development process and reduce the number of iterations required. I’d also consider implementing more advanced JavaScript features, such as ES6 syntax and modular coding, to keep my code clean and maintainable.

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

  1. Dynamic Button Behavior: Implementing the reset button to enable and disable based on input was more complex than I anticipated. I faced challenges ensuring that the button state updated correctly with the input field.
  • How I Overcame This: I used online forums, such as Stack Overflow, to find similar use cases and examples. Additionally, I tested my code iteratively, which helped me identify where the logic needed adjustments.
  1. Debugging JavaScript Issues: I encountered several bugs in my JavaScript code that caused unexpected behavior in my application, such as the reset button not functioning properly.
  • How I Overcame This: I utilized the console to debug my code step-by-step and added console.log statements to track the values and states of variables at different points in my functions. This helped me pinpoint where the issues were occurring.

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

  • JavaScript Optimization: I’m looking for feedback on my JavaScript code, particularly in optimizing functions for better performance and readability. Any tips on best practices for handling events and managing state would be appreciated.

  • User Feedback Mechanisms: Implementing effective user feedback mechanisms, such as success and error messages, is an area I want to enhance. Suggestions on libraries or approaches to implement this would be appreciated.

  • Accessibility Considerations: I want to ensure my project is accessible to all users. Any guidance on best practices for improving accessibility in web applications, especially regarding form elements and interactive components, would be valuable.

  • Code Structure and Organization: I’d like advice on how to better organize my files and structure my code for maintainability.

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