Mortgage calculator

A mortgage calculator that computes metrics like monthly payments, total interest and required income, and predicts profitability over the mortgage term.

The calculator integrates with two APIs: postcodes.io to resolve a postcode to a region, and the UK Land Registry to fetch historical house price indices for that region. It uses this data to estimate future property values and visualise the mortgage balance versus property value over time, calculating when you’d break even after fees and costs.

In typical scratch-your-own-itch fashion, I built this project while considering my first mortgage, in order to better understand the maths behind mortgages. It seemed like a great opportunity to get back to some vanilla JS, improving my skills with the language basics and DOM manipulation.

The main technical work related to inputs and synchronisation – it’s effectively a complicated form. I came up with a data-pattern attribute system so inputs could handle currency, percentages and years with a single formatting function. This made adding new inputs straightforward, though I’m not sure it’s the best pattern – avoid the unusual! I also handled bidirectional updates – changing the deposit amount updates the percentage, and vice versa – which required some state management to avoid circular updates.

The more complex parts were the mortgage amortisation calculations and chaining API calls to fetch and process historical data. I needed to work through some edge cases across input validation, API error handling and keeping calculations in sync during user input. And I had some fun with the UX and design: I added info tooltips for each input, a responsive mobile menu and a chart that updates in real time (though I’m not happy with the axis labelling yet). 

The final result is an easy-to-use tool that helped me understand mortgages while sharpening my JavaScript skills. Thankfully, it also reminded me that “past performance is not an indicator of future returns”… so I wouldn’t recommend betting your future on it!

View project
Mortgage calculator before postcode entry.
Mortgage calculator after postcode entry.
Infobox opened for input.
A mobile view for mortgage calculator.