Mortgage Calculator using HTML, CSS and Vanilla JS

Please log in to post a comment
Log in with GitHubCommunity feedback
- P@dlemvigh
the good
- I am impressed at that the page is implemented in vanilla js
- well organized html (minor mismatch in label for mixing kebab-case and camelCase)
the bad
- focus styling a bit off for year and interest rate, looks different than the focus styling for amount
- error styling a bit off. The input addon ($ , year , %) does not have red background.
- radio inputs have no focus styling, so keyboard users have no outline to show focused element.
- no validation messages are shown ("this field is required")
- clear doesn't clear validation state. When clicking clear all, I would have expected the validate state to also be cleared.
- "clear all" not keyboard accessible (could be fixed with tabIndex="0") or making it a button with styling
conclusion
A solution that fulfills the technical requirements, with semantic HTML. There are many deviations from the design in terms of styling.
Marked as helpful
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