
Mortgage Calculator in React Vite with minimal 3rd party libs
Design comparison
Solution retrospective
Managed to build with almost no 3rd party libraries. Using only the modular CSS and proper import order, to have CSS rules that can me extended and overwriten without having to resort to !important or increasing CSS specificity.
What challenges did you encounter, and how did you overcome them?I wanted to implement the form styling, including error states without using form libraries. Dealing with touch state and styling of error messages I did surrender and just used react-hook-form, which is at least a lot more light weight than Formik.
What specific areas of your project would you like help with?suggestions for organizing CSS. could I have made the breakpoint specific CSS more readable.
if had used scss I could have used mixins. but I wanted to try without scss and just use as close to plain vite as possible.
Community feedback
- @davistar21Posted about 2 months ago
I must say that you’ve done quite an excellent job. Your code structure is outstanding. I’m a beginner in ReactJS and I’m already fascinated by the potential of this powerful library. But the mobile design layout of the code does not match the design from FrontEndMentor, at least not on my mobile device anyway.
Marked as helpful0P@dlemvighPosted about 2 months ago@davistar21 Thank you for pointing it out, apparently I was missing this little bit of HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to make the my css media queries work for mobile0
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