React.js Responsive Mortgage Calculator App
Design comparison
Solution retrospective
I'm most proud of working with a new framework (React.js) and learning more about CSS selectors like ::before
and ::after
. Going into this project, I had some familiarity with React but had not tried building a project on my own so this was a great way to brush up and learn some new skills. Next time I would try to better plan out how the app would be structured because I had an idea of how everything would work together but didn't fully write out my plan.
A major challenge I encountered was with managing the state in both the and
components. In order to fetch the values inputted into the calculator, I had to handle the state in the parent component (``) and pass both the values and set state functions as props to the child components. Using the React documentation helped illustrate this concept more clearly and helped me understand how this is implemented.
I would like help with rendering custom error states as shown in the mockup. I made the input fields required
but aside from that it doesn't change the color of the labels when a field is empty.
Community feedback
- @WlfernandoPosted about 2 months ago
it depends how deeply you want to implement the solution. An easy try is use the pseudo-class :user-invalid. This one works with those that need to be filled, but not like radio or checkbox. Other is to retrive the value of validationMessage using useRef and update the state of the field with validitySate (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState). Or use the library react-hook-form, I never use it but I heard is fine.
0
Please log in to post a comment
Log in with GitHubJoin 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