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

Mortgage-Repayment-Calculator-Josh

@Joshua65676

Desktop design screenshot for the Mortgage repayment calculator 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 successfully integrating complex financial calculations, such as amortization schedules and interest rate calculations, into a user-friendly and intuitive React application. The calculator accurately handles various input scenarios, providing users with a clear understanding of their mortgage repayment obligations. I'm also proud of implementing a responsive design, ensuring a seamless user experience across different devices and screen sizes.

What I would do differently next time:

If I were to rebuild this project, I would focus on the following areas:

  1. Unit testing: While I have some basic tests in place, I would invest more time in writing comprehensive unit tests to ensure the calculator's accuracy and reliability.
  2. Code organization: As the project grew, some components became complex. Next time, I would prioritize a more modular approach, breaking down larger components into smaller, reusable pieces.
  3. User feedback and validation: I would add more robust user feedback and validation mechanisms to handle edge cases and ensure users enter valid data.
  4. Performance optimization: I would explore opportunities to optimize the calculator's performance, such as memoizing calculations or using web workers, to improve responsiveness.
  5. Additional features: I would consider incorporating more advanced features, like supporting different interest rate types (e.g., variable or adjustable rates) or integrating with real-time interest rate APIs.

By addressing these areas, I believe I could create an even more robust, maintainable, and user-friendly mortgage repayment calculator.

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

While building the mortgage repayment calculator, I faced the following challenges:

  1. Complex financial calculations: Accurately implementing formulas for amortization schedules, interest rate calculations, and repayment amounts.
  2. Form handling and validation: Managing user input, validating data, and handling edge cases.
  3. Responsive design: Ensuring the calculator worked seamlessly across various devices and screen sizes.
  4. Code organization and structure: Keeping the codebase maintainable, modular, and easy to update.

To overcome these challenges, I:

  1. Sought help from AI and online resources: Utilized AI-powered tools, online forums, and documentation to understand complex financial calculations and best practices for form handling and validation.
  2. Broken down problems into smaller components: Divided the project into manageable tasks, focusing on one aspect at a time.
  3. Leveraged React and TypeScript features: Utilized React's state management and TypeScript's type checking to ensure a robust and maintainable codebase.

By embracing these strategies, I successfully overcame the challenges and developed a functional and user-friendly mortgage repayment calculator.

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

I would appreciate help with ensuring my mortgage repayment calculator is fully responsive and works seamlessly across various screen sizes and devices. Specifically, I'd like assistance with:

  1. Mobile optimization: Ensuring the calculator's layout and functionality are optimized for smaller screens (e.g., smartphones) and touch-based interactions.
  2. Tablet support: Adapting the layout to take advantage of larger tablet screens while maintaining usability.
  3. Desktop and large screen support: Ensuring the calculator scales appropriately for larger screens, utilizing available space effectively.
  4. Cross-browser compatibility: Verifying that the calculator works consistently across different browsers (e.g., Chrome, Firefox, Safari, Edge) and versions.
  5. Responsive design testing: Helping me develop a robust testing plan to ensure the calculator's responsiveness and usability across various devices and screen sizes.

By focusing on these areas, I aim to create a mortgage repayment calculator that provides an excellent user experience regardless of the device or screen size used.

Community feedback

@sirjaey

Posted

Great job namesake! You didn't quite capture the active states. Also your fonts are not exactly the same as the original design. Also include the interest option in "mortgage 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