A single self-contained `index.html` file you can open in any browser — four sliders, a live result with the binding constraint named, ready to share with a colleague or screen-share on a call.
Build a one-page mortgage eligibility calculator
← Use cases Mortgages
Build a one-page mortgage eligibility calculator
A single HTML file with four sliders (income, debts, property value, interest rate) that shows the maximum mortgage amount as you move them. Built in thirty minutes by describing the rules in plain English. You don't write a line of code yourself. Audience: beginner · ~30 min · 6 steps
- The eligibility rules you want to encode (in plain English, one bullet per rule — Claude will help you turn them into code)
- Claude Code installed and a terminal open (see Day 1)
This is the use case that surprises people the most: I can build interactive tools without writing code.
The mortgage front-line team uses a half-dozen recurring calculations — debt-service ratio, loan-to-value, max-amount-given-income. They live as Excel sheets nobody trusts because the formulas drift. A single-page HTML calculator solves the trust problem (the rules are visible and version-controlled) and the share problem (it’s a file you can email).
Compliance check before you start. Use a simplified version of the eligibility rules for your first calculator — not the production policy. The point is to learn the loop, not to replace the underwriting engine. Production calculators need risk-team sign-off, formal testing, and a hosting story. This is the prototype that wins that conversation.
Build the workspace
You’re going to make a fresh folder on your Desktop and start Claude inside it. Three lines.
Open the .
Press ⌘+Space, type “Terminal”, and press Enter.
Open the Start menu (press the Windows key), type “Ubuntu”, and press Enter. If you don’t see Ubuntu listed, install WSL first.
In Ubuntu, ~/Desktop is a folder inside ’s Linux home (/home/<your-Linux-username>/Desktop) — not the Windows desktop you see in File Explorer at C:\Users\...\Desktop. That’s fine: the files are real and Claude can read and write them. Anywhere this use case says “open in Finder / File Explorer”, run explorer.exe . from your Ubuntu terminal — Windows opens that exact WSL folder in Explorer.
Type each command and press Enter.
mkdir -p ~/Desktop/claude-lab/mortgage-calc
cd ~/Desktop/claude-lab/mortgage-calc
claude --dangerously-skip-permissionsPlain-English translation:
mkdir -p ~/Desktop/claude-lab/mortgage-calc— make a folder calledmortgage-calcinsideclaude-labon your Desktop (-pcreatesclaude-labtoo if it’s not there yet — it’s the one home for all hub use cases).cd ~/Desktop/claude-lab/mortgage-calc— move into the folder.claude --dangerously-skip-permissions— start here. The flag stops Claude you for permission on every file write — safe in a fresh, dedicated folder like this one. (If you’d rather see every prompt for your first run, just typeclaude— same thing, more interruptions.)
The blinking cursor is now Claude’s. You’re chatting with it.
Let Claude create the rules file
Don’t write the rules in a text editor. Tell Claude what to write.
Create a file called
rules.mdin this folder. Put the following rules inside it, exactly as I write them:Maximum mortgage amount = lower of: - 80% of property value - Annual income × 5 - The amount whose monthly payment (at the input interest rate, 25-year term) keeps total monthly debts under 40% of monthly net income Monthly net income = annual income / 12 × 0.7 (rough net-of-tax proxy) Input fields: - Annual income (€) - Existing monthly debts (€) - Property value (€) - Interest rate (%) Show the result as a single euro figure, big, with the binding constraint named below (e.g. "binding: income multiplier" or "binding: debt-to-income").
Claude writes the file straight away. You now have rules.md sitting in the folder on your Desktop.
Five minutes of work. Be explicit; ambiguity will produce a buggy calculator.
Ask Claude to build the HTML
Still in Claude, say:
Read
rules.md. Build a single self-containedindex.htmlfile — no external dependencies, no CDN links — that implements those rules.Requirements:
- Four inputs as sliders (with the current numeric value shown next to each)
- One big result figure that updates live as the sliders move
- Below the result, one line: “binding:
” — which rule is currently capping the answer - Use NBG-ish colours: a teal accent (#007a8a), white background, dark text
- Mobile-responsive (single column on phones)
- Clean modern typography, system fonts only
No frameworks. Plain HTML + CSS + JavaScript in one file.
Press Enter. Claude builds the file in 30–60 seconds and writes index.html straight away.
Open it in a browser
You don’t need to find the file yourself — Claude can open it for you:
Open
index.htmlin my default browser.
If that doesn’t work, open the file by hand:
Open Finder → click “Desktop” in the sidebar → open claude-lab, then the mortgage-calc folder → double-click index.html. It opens in your default browser.
Open File Explorer → click “Desktop” in the sidebar → open claude-lab, then mortgage-calc → double-click index.html. It opens in your default browser.
A browser tab opens with your calculator. Move the sliders. The result should update live. The binding-constraint line should change as different rules become the cap.
Iterate by talking to Claude
You’ll see things to fix. That’s expected — the rules in rules.md were a first pass.
Examples of follow-ups you can just type:
The “income multiplier” cap shows the wrong number when income is below €30k. Investigate and fix.
Add a tooltip on each slider explaining what the input means in one sentence.
The binding-constraint label is hard to read. Make it the same colour as the result figure and put it in a bordered pill.
Each follow-up is one . Claude edits the same index.html. Refresh the browser to see the change. The loop is: build → look → tell Claude what’s wrong → look again.
This loop is the actual — and it’s the same loop a senior developer runs, only faster because they don’t type the code.
Make Claude prove the maths
A calculator that looks right and a calculator that is right are different things. Before you email it to anyone, paste:
Prove the calculator’s maths. Pick these inputs: income €40,000, existing debts €300/month, property €250,000, rate 3.5%. Compute all three caps by hand, step by step, showing the arithmetic — including the 25-year annuity formula for the debt-to-income cap. Then read the formula in
index.htmland confirm it produces the same number and names the same binding constraint. If they disagree, find the bug and fix it.
And for the visual side, Claude can check its own work too:
Take a screenshot of
index.htmlin a headless browser and look at it. Is anything overlapping, cut off, or unreadable? Fix what you find and screenshot again.
Claude can drive a browser, look at the pixels, and iterate — you don’t have to be the only QA in the loop.
Once you’re happy, email index.html to a colleague — they double-click and it opens in their browser. If you want to share it more broadly, that’s where your manager + risk team come in. The prototype earns the conversation.
Half an hour. Six prompts. A working interactive tool that your colleagues can actually use. You didn’t write a single line of code.
Make returning easy with CLAUDE.md
You’ll come back to this folder. A risk officer will ask “can we add a second-borrower row?” and you’ll need Claude to remember the original design intent. Rename rules.md to CLAUDE.md:
mv rules.md CLAUDE.mdCLAUDE.md is the magic filename reads automatically every time it starts in this folder. Next time you cd ~/Desktop/claude-lab/mortgage-calc && claude --dangerously-skip-permissions, Claude already knows the eligibility rules, the input fields, the NBG-ish styling — you can jump straight to “add a second-borrower column” without re-briefing.
Level up — charts and a reverse gear
This use case is already interactive, so its level-up is about going from calculator to conversation tool. Two , pick either or both:
Add an amortisation chart under the result: monthly payment split into interest and principal over the 25 years, drawn on a
<canvas>— still no external libraries, still one file. When a slider moves, the chart redraws.
Add a “reverse mode” toggle: instead of income → max mortgage, the user enters the mortgage they want and the calculator shows the annual income that would be needed, holding the other inputs. Show which constraint drives the answer, same as forward mode.
Reverse mode is the one that changes meetings: a customer asks “what would I need to earn for a €200k loan?” and the answer is one slider away instead of “let me get back to you”.
The pattern to remember — you built this by describing rules in plain English, and you extended it the same way. Any tool you can describe, Claude can build into a single double-clickable file. Start simple, iterate by talking.
Next use case →
Turn a Teams transcript into proper meeting minutes
Teams generates a transcript automatically. It is unreadable. Claude turns it into the minutes you actually want — decisions, action items with owners and deadlines, next steps — in your team's template. Five minutes after the call ends.