Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 11 months ago

I used HTML, CSS, JavaScript, VS Code, GitHub, and Flexbox in project

accessibility, pure-css, solid-js, styled-components, web-components
RomeesaKamal•290
@RomeesaKamal
A solution to the Mortgage repayment calculator challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

What I'm Most Proud Of: I’m most proud of successfully implementing the core functionality of the mortgage calculator, especially the real-time calculation updates based on user inputs. It was incredibly satisfying to see my code come together and deliver accurate results. Additionally, I’m proud of how the design turned out – it’s responsive, clean, and user-friendly.

What I Would Do Differently Next Time: If I had to do it again, I would focus more on optimizing the JavaScript code by breaking it into smaller, reusable functions for better maintainability. I would also consider exploring a library like Chart.js to visually represent the mortgage breakdown, making the interface even more engaging for users.

This project taught me a lot, and I’m excited to apply these lessons to future challenges!

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

One of the main challenges I faced was implementing the mortgage calculation logic. Ensuring accurate calculations based on dynamic user inputs required a solid understanding of formulas and edge-case handling. I overcame this by researching the formula for mortgage payments and breaking it down into smaller steps to implement it correctly in JavaScript. Testing with different inputs helped me validate the results.

Another challenge was ensuring the design remained responsive across various screen sizes. Initially, the layout didn’t adapt well to smaller devices. To resolve this, I used CSS Flexbox and media queries, refining the design until it looked and worked perfectly on all devices.

Lastly, debugging was a time-consuming process, especially when certain inputs caused unexpected behavior. I relied on browser developer tools and step-by-step console debugging to identify and fix these issues.

These challenges taught me valuable problem-solving skills and gave me more confidence in handling similar issues in the future.

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

I would like help refining the user experience, especially in making the input fields and results section more intuitive and visually engaging. Feedback on optimizing the JavaScript code for better performance and maintainability would also be greatly appreciated. Additionally, any suggestions for improving the responsiveness and overall design aesthetics would be helpful.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on RomeesaKamal's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License