Mortgage Repayment Calculator
A simple calculator that calculates what your monthly payments, and the total paid over the term for the mortgage. Challenge by Frontend Mentor.
Links
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
Screenshot
Desktop
Tablet
Mobile
My process
Built with
What I learned
This is my first project with the Angular framework. I knew this framework was very opinionated, complicated and has a very steep learning curve. Overall, I still like the simplicity of Vue more. SolidJS, which is a signal-based version and cleaner version of React holds second place for me. And surprisingly, Angular is already shot up to third place for me, over Svelte and React.
Angular strikes me as a true all-in-one solution, there’s literally everything already included in Angular. There are so much stuff to learn about. This project’s coding practices are probably bad as I still hold a Vue mindset when working with this.
Continued development
I would love to try more of Angular’s features. I chose this project to start with Angular as it is not too difficult, but Angular alone took me 2 days to get a very basic app working.