https://github.com/mathematicode/mortgage-calculator
A Front End Mentor Project to practice dealing with forms and inputs in React.
https://github.com/mathematicode/mortgage-calculator
css form forms frontend-mentor mortgage-calculator
Last synced: 4 months ago
JSON representation
A Front End Mentor Project to practice dealing with forms and inputs in React.
- Host: GitHub
- URL: https://github.com/mathematicode/mortgage-calculator
- Owner: mathematiCode
- Created: 2024-12-21T03:34:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-05T23:24:32.000Z (over 1 year ago)
- Last Synced: 2025-06-12T15:52:59.989Z (12 months ago)
- Topics: css, form, forms, frontend-mentor, mortgage-calculator
- Language: JavaScript
- Homepage: https://mortgagecalculatorfem.netlify.app/
- Size: 411 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Overview
### The challenge
Users should be able to:
- Input mortgage information and see monthly repayment and total repayment amounts after submitting the form
- See form validation messages if any field is incomplete
- Complete the form only using their keyboard
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
### Links
- [Github Repo](https://github.com/mathematiCode/mortgage-calculator)
- [Live Site URL](https://mortgagecalculatorfem.netlify.app/)
### Built with
- [React](https://reactjs.org/)
- [JDIZM Finance Calculator](https://github.com/JDIZM/finance-calculator) - To calculate monthly payments
- [format-money-js](https://github.com/dejurin/format-money-js)
### What I learned
This project was a good refresher on forms, especially within React. I learned how to create controlled inputs and handle state logic to automatically submit the form when the user changes one of the inputs.
### Continued development
I would like to continue learning improving at writing React and clean code in general. For future projects, I would like to learn unit testing, react testing library, SCSS, tailwind, typescript, and svelte. For this project, I think I could have created a general input component that handles the active and error state logic but I also think my solution works pretty well anyway because most of that logic was handled in my CSS with input:focus and input[data-status='error'].
## Author
- Frontend Mentor - [@mathematiCode](https://www.frontendmentor.io/profile/mathematicode)
- BlueSky - [@mathcoder](https://bsky.app/profile/mathcoder.bsky.social)
- LinkedIn - [Julianna_Messineo] https://www.linkedin.com/in/julianna-messineo/