Overview

The challenge

Users should be able to:

• Input mortgage information and see monthly repayment and total repayment amounts after submitting the form
• See form validation messages if any field is incomplete
• Complete the form only using their keyboard
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Links

• Github Repo
• Live Site URL

Built with

• React
• JDIZM Finance Calculator - To calculate monthly payments
• format-money-js

What I learned

This project was a good refresher on forms, especially within React. I learned how to create controlled inputs and handle state logic to automatically submit the form when the user changes one of the inputs.

Continued development

I would like to continue learning improving at writing React and clean code in general. For future projects, I would like to learn unit testing, react testing library, SCSS, tailwind, typescript, and svelte. For this project, I think I could have created a general input component that handles the active and error state logic but I also think my solution works pretty well anyway because most of that logic was handled in my CSS with input:focus and input[data-status='error'].

Author

• Frontend Mentor - @mathematiCode
• BlueSky - @mathcoder
• LinkedIn - [Julianna_Messineo] https://www.linkedin.com/in/julianna-messineo/