Responsive React Mortgage Calculator
Solution retrospective
I'm proud of how I handled dynamic styling using conditional className values to manage state-driven feedback. Next time, I’d like to approach the styling without relying on Bootstrap, and challenge myself to structure the layout fully with raw CSS (especially Grid and Flexbox).
What challenges did you encounter, and how did you overcome them?One challenge was ensuring the radio button selector could be fully navigated via keyboard. Since the inputs were visually hidden for styling purposes, they initially couldn't receive focus. Another challenge was managing component-level CSS without a Figma or design spec. This pushed me to make layout and spacing decisions manually.
What specific areas of your project would you like help with?I'm unsure about how I structured the project. Is there a better approach? For example, in a small project like this, would it be better to have a single CSS file instead of one per component?
Also, what's the best practice for handling thousands separators and decimal symbols in type="number" fields across different locales?
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@dar-ju
Hi, Patricia!
Great job, the design matches the layout, the calculator logic works correctly.
About your questions:
- you can use css here any way you like, I think that this is a single component of the page, so there should be one css file for it. At least it will make the code easier to maintain.
- for input and result fields I used
Intl.NumberFormat('en-US').format(value)- I hope this will help you
I want to suggest you to fix something:
- look how the fields jump when you hover over them. For
class="input-group "blocks, you use 0.1px for the border, and 1px for the hover border. Change it to one of them - despite the fact that this is just a calculator, it is still a form with fields and a button, you need to use the <form> tag
- for the body you added cursor: pointer; this is strange, because it is not an active element, it needs to be removed, but for radio buttons add
- add restrictions on entering all values in the fields except numbers, and also make restrictions on the minimum and maximum values. Now you can enter large values and get "£NaN" as a result
Otherwise everything is super, good luck with the development!
- @thisisharsh7
Great work on your mortgage calculator! The dynamic styling with conditional
classNamevalues for state-driven feedback is well-executed.Some suggestions:
- Project Structure: Using separate CSS files per component enhances modularity, which is great for larger projects. For a small project like this, a single CSS file could reduce complexity and improve maintainability. Consider consolidating styles into a single
styles.cssunless modularity is a priority. - Locale Handling: For number formatting across locales, use
Intl.NumberFormatin JavaScript. For example:new Intl.NumberFormat(navigator.language).format(number)ensures proper thousands separators and decimal symbols based on the user's locale. Apply this in yourResultscomponent formonthlyandtotaldisplays. - CSS Improvement: Moving away from Bootstrap is a good goal. Your use of custom properties (
--clr-slate-900, etc.) is excellent. For raw CSS layouts, consider defining adisplay: gridcontainer incalculator-wrapperto streamline the responsive layout without Bootstrap’s classes. - Error Handling: The error validation logic is solid, but consider adding real-time validation (e.g., on blur) to improve UX.
Overall, a strong implementation-Keep up the good work.
- Project Structure: Using separate CSS files per component enhances modularity, which is great for larger projects. For a small project like this, a single CSS file could reduce complexity and improve maintainability. Consider consolidating styles into a single
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