Skip to content
Submitted 22 days ago

tailwind+React with react-hook-form

P
thawit•820
@tacesept
A solution to the Mortgage repayment calculator challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I’ve realized I don’t need to figure out every coding detail myself; I just need to understand how the code should work and then ask AI to write it for me.

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

If my website needs better accessibility, please let me know what else I should add—I’m not very good at accessibility.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,410
    @thisisharsh7

    Great job on the mortgage calculator! The modular structure with FormSection and ResultSection enhances maintainability, and the useRef for accessibility focus is a nice touch.

    Feedback:

    1. Accessibility Improvements: Add aria-label to inputs for screen readers (e.g., aria-label="Mortgage amount in pounds"). Use aria-describedby to link error messages to inputs for better error communication. Ensure radio buttons have a fieldset legend with aria-label for clarity. The liveRegionRef is great, but add role="alert" to emphasize updates.
    2. Code Optimization: Consider moving the calculateRepayments logic to a separate utility file for reusability. Validate inputs (e.g., negative numbers) before calculations to prevent errors.

    Areas for Help: For accessibility, add the above ARIA attributes and test with some screen reader. For project structure, a single CSS file could simplify small projects, but your modular approach is solid for scalability.

    Keep up the great work!

    Marked as helpful

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