FlowCraft Mortgage Calculator

A mortgage and loan payment calculator that shows visitors the whole monthly cost, not just principal and interest.

The FlowCraft Mortgage Calculator is built with HTML, Tailwind CSS (via CDN) and vanilla JavaScript:

- The standard fixed-rate formula lenders use, accurate to the cent

- Monthly payment split into principal and interest, property tax, home insurance, PMI and HOA fees

- Down payment in dollars or percent, with the two boxes kept in step

- PMI added under 20% down, and dropped automatically once the balance reaches 78% of the price

- Total interest, total of payments and payoff date

- A year-by-year amortization schedule

- Loan mode for car, boat and personal loans

- Any currency and number format (USD, EUR, GBP, CAD, AUD and more)

- Accessible: labelled inputs, keyboard-friendly term buttons, and results announced to screen readers

A built-in quote form sends each visitor's email and their numbers (price, down payment, rate, term and monthly payment) to your form service (Formspree, Make, Zapier or your own webhook).

WHAT'S INCLUDED

- index.html: the calculator, results panel, year-by-year schedule and quote form

- app.js: all the logic, heavily commented

- style.css: the price slider, term buttons, payment bar and number flash

- assets/images/: a sample house illustration

- README.txt: setup, settings, testing tips and plain-English guidance on showing rates honestly, plus an optional .htaccess for Apache/Hostinger

The interest rate is an example you set, not a loan offer. Keep the "example rate" notes visible.

Try the live demo: https://haveinsights.com/flowcraft/mortgage-calculator/

License: use and modify in unlimited personal and client projects. Resale or redistribution is not permitted.