My Angular Debt Calculator
Calculators are common components in my work place and I find they make for good learning projects which help me to cement new skills. So I decided I would build a debt calculator (based on a similar calculator I built with knockout.js) using Angular2 as a way to improve my understanding of Angular.
You can view the source code and documentation on GitHub.
Calculator requirements:
- User should be able to add different debt types
- User should be able to add, edit and remove debts
- Calculate total debt
- Calculate total monthly payments
- Calculate total cost of credit
- Calculate time to repay credit cards (based on credit, APR, monthly payments)
- Calculate max debt term
- Basic validation (monthly payments cover interest)
- Input formatting on keyup, currency and percentages
Calculator Layout: CSS grid
I also used the new CSS grid spec (which I hadn't used before) for the responsive layout, I only touched the surface but once I got my head around it I started too see why its been described as "the most powerful layout system available in CSS" - CSS-tricks.com
display: grid; has pretty poor browser support and when I checked it in IE 11 it failed pretty spectacularly showing only a third of the calculator so please view the demo in a modern (non IE browser).