Angular2 Debt Calculator Screenshot

My Angular Debt Calculator

This blog post was written by and published 27th November 2017.

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.

View demo

You can view the source code and documentation on GitHub.

Debt Calculator Nexus 5X Screenshot

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).

Not production ready 😀