Mortgage Calculator HTML5 Code
Pure HTML5, CSS3 and vanilla JavaScript—no libraries, no tracking, fully responsive. Copy the snippet, drop it into any page and change colours, currency or language in seconds.
1. Full HTML5 Snippet
<!-- Mortgage Calculator HTML5 Code -->
<style>
.mc-html5{font-family:system-ui,Arial;max-width:480px;margin:auto;background:#fff;border:1px solid #ccd3db;border-radius:8px;padding:20px}
.mc-html5 h3{margin-top:0;color:#0066cc}
.mc-html5 label{font-size:14px;font-weight:600;display:block;margin-top:10px}
.mc-html5 input{width:100%;padding:8px;border:1px solid #ccd3db;border-radius:4px}
.mc-html5 button{background:#0066cc;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;margin-top:12px}
.mc-html5 .mc-result{font-weight:700;margin-top:10px}
</style>
<div class="mc-html5">
<h3>Mortgage Calculator</h3>
<label>Loan Amount (£)</label><input type="number" id="mcLoan" value="200000">
<label>Interest Rate (%)</label><input type="number" id="mcRate" value="5.5" step="0.01">
<label>Term (years)</label><input type="number" id="mcTerm" value="25">
<button onclick="mcCalc()">Calculate</button>
<div class="mc-result" id="mcOut"></div>
</div>
<script>
function mcCalc(){
const p=document.getElementById('mcLoan').value;
const r=document.getElementById('mcRate').value/100/12;
const n=document.getElementById('mcTerm').value*12;
const m=p*(r*Math.pow(1+r,n))/(Math.pow(1+r,n)-1);
document.getElementById('mcOut').innerHTML='Monthly: <b>£'+m.toFixed(2)+'</b>';
}
mcCalc();
</script>