Build a Mortgage Calculator | Interview Question

Q: Build a Mortgage Calculator

**Target Audience:** Beginners preparing for a frontend machine coding round. You know useState and forms; the finance maths and money rounding are the new parts. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1. ## 1. Why This Even Matters — A Story First You borrow money for a house and promise to pay the same amount every month for 30 years. Early on, most of each payment is interest, because you owe a lot; by the end, most of it pays off the loan itself. The bank needs one number, the monthly payment, that makes the loan reach exactly zero on the last month. A mortgage calculator puts that number on screen while you play with the inputs. It is an "easy" machine codi

The problem

Question presented to candidate: "Build a mortgage calculator. I enter the loan amount, the yearly interest rate and the term in years, and it shows my monthly payment, the total I will pay and the total interest. Results should update as I type. Make sure the numbers are actually right."

Requirements:

Inputs: loan amount, annual interest rate (%), and term (15, 20 or 30 years).
Outputs: monthly payment, total of all payments, total interest, and the first month's split between interest and principal.
Results update live; invalid input (empty amount, a rate outside 0-100) shows a message next to the field and blanks the results.
Correct maths: the fixed-rate amortisation formula, the 0% special case, and money handled to the cent.
Currency formatting, labelled inputs, readable at phone width.

What a strong answer should cover:

The formula M = P · r(1 + r)^n / ((1 + r)^n − 1) with r = annual rate / 12 / 100 and n = years × 12, and why r = 0 needs P / n.
Results as derived values (no "calculate" state, no effect).
Rounding: the payment is paid in whole cents, so monthly × n is not the true total; a lender adjusts the last payment.
Validation as pure functions returning messages, plus aria-invalid / aria-describedby.
Intl.NumberFormat for currency instead of hand-built strings.

Clarifying questions expected:

"Fixed rate only, or also adjustable rates, taxes and insurance?"
"Do you want the full amortisation schedule or just the summary?"
"Which currency and locale?"

Code / implementation expected: Yes. A component plus a pure calculation module, roughly 80-120 lines.

State
Forms
Math

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. You know useState and forms; the finance maths and money rounding are the new parts. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actually running it on React 19.3.1.

1. Why This Even Matters — A Story First

You borrow money for a house and promise to pay the same amount every month for 30 years. Early on, most of each payment is interest, because you owe a lot; by the end, most of it pays off the loan itself. The bank needs one number, the monthly payment, that makes the loan reach exactly zero on the last month.

A mortgage calculator puts that num

The solution is hidden so you can try first

10 min read · 10 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import MortgageCalculator from "./src/components/MortgageCalculator";

export default function App() {
  return (
    <main className="page">
      <h1>Mortgage Calculator</h1>
      <p className="hint">
        Fixed-rate loan, paid monthly. Results update as you type.
      </p>
      <MortgageCalculator />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.