Mortgage Calculator Code

Pure-front-end mortgage calculator snippet—no libraries, no tracking. Copy the code block below, drop it into any page and customise fields, colours or currency symbols in seconds.

1. Full Embed Code (HTML + CSS + JS)

<!-- Mortgage Calculator Code -->
<style>
.mc-root{font-family:system-ui,Arial;max-width:480px;margin:auto;background:#fff;border:1px solid #ccd3db;border-radius:8px;padding:20px}
.mc-root h3{margin-top:0}
.mc-root label{font-weight:600;font-size:14px;display:block;margin-top:10px}
.mc-root input{width:100%;padding:8px;border:1px solid #ccd3db;border-radius:4px}
.mc-root button{background:#0077ff;color:#fff;border:none;padding:10px 16px;border-radius:4px;cursor:pointer;margin-top:15px}
.mc-root button:hover{background:#005fd1}
.mc-root .mc-result{margin-top:15px;font-weight:700}
</style>

<div class="mc-root">
    <h3>Mortgage Calculator</h3>
    <label>Loan Amount (£)</label>
    <input type="number" id="mcLoan" value="250000">
    <label>Interest Rate (%)</label>
    <input type="number" id="mcRate" value="4.5" step="0.01">
    <label>Term (years)</label>
    <input type="number" id="mcTerm" value="30">
    <button onclick="mcCalc()">Calculate</button>
    <div class="mc-result" id="mcOut"></div>
</div>

<script>
function mcCalc(){
    const p=parseFloat(document.getElementById('mcLoan').value);
    const r=parseFloat(document.getElementById('mcRate').value)/100/12;
    const n=parseInt(document.getElementById('mcTerm').value)*12;
    const m=p*(r*Math.pow(1+r,n))/(Math.pow(1+r,n)-1);
    const total=m*n;
    document.getElementById('mcOut').innerHTML=
        'Monthly: <span style=color:#0077ff>£'+m.toFixed(2)+'</span><br>Total interest: £'+(total-p).toLocaleString();
}
mcCalc();
</script>

2. Live Demo – Edit Below