Mortgage Repayment Calculator using React and Tailwind

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

Usage of React Context API to prevent prop-drilling and applying the concept of "lifting state up".

I would have implemented lifting the form ref instead of the calculation result itself so I do not have to pass the form ref to the `` component. In this way, I have access for both the form values and element itself. This is useful for resetting and getting the form values.

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

The dilemma I encountered was a decision between if I should validate the form fields before or after the user interaction. I decided to just use the HTML validations instead and style the elements accordingly. This is the reason why the :invalid styles are displayed initially.

For future projects, I think I will validate the values and style the elements accordingly AFTER the user interaction so the :invalid styles are not displayed initially.