Mortgage-Repayment-Calculator

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

I'm proud of how I handled user input formatting — especially formatting the mortgage amount field in real-time with commas as the user types. I also implemented a toggle between mortgage types ("Repayment" and "Interest Only") with responsive UI feedback, which makes the experience clearer and more user-friendly.

If I were to do this project again, I would:

Separate the logic into different JavaScript modules or functions to improve readability and reusability.

Make the calculation dynamic based on mortgage type (e.g., showing interest-only monthly payments).

Improve accessibility with proper ARIA roles and keyboard navigation support.

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

One of the biggest challenges was updating the background color of the selected mortgage type. I initially wrote the styling logic but forgot to add event listeners to the radio buttons. It took some debugging to realize that the logic was correct — I just wasn’t calling the function at the right time.

Another small but tricky challenge was maintaining the input cursor position when formatting numbers with commas. I learned how selectionStart and selectionEnd work in inputs and used them to preserve the cursor's location after formatting.

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

I'd appreciate feedback on:

The structure of my JavaScript — is there a cleaner way to manage the DOM elements and event listeners?

My mortgage repayment calculation — is it accurate, and how can I improve it to handle interest-only mortgages differently?

Any ideas for improving the UX or UI? I want the calculator to feel intuitive and clear to users with all levels of financial knowledge.