<link media="all" rel="stylesheet" href="/assets/themes/default/css/mortgage-calculator.css?cb=">
<div class="mc" data-module="mortgageCalculator" data-initial-price="3500000" data-initial-down="77000" data-initial-interest="4.17" data-initial-term="30">
<div class="grid-x grid-padding-x">
<div class="cell mc__cell-wrapper">
<h2 class="mc__title">Mortgage estimate</h2>
</div>
<div class="cell medium-6 mc__cell-wrapper">
<div class="mc__inputs-wrapper">
<div class="mc__field">
<div class="mc__info">
<label for="price" class="mc__label">Property Price</label>
<span class="mc__info-item">
$<span class="js-mc-price-label"></span>
</span>
</div>
<div class="mc__range">
<input id="price" name="price" class="mc__range-input js-mc-price-input" type="range" min="0" max="50000000" value="3500000" step="10000">
</div>
</div>
<div class="mc__field">
<div class="mc__info">
<label for="down" class="mc__label"></label>
<span class="mc__info-item">
$<span class="js-mc-down-label"></span>
</span>
</div>
<div class="mc__range">
<input id="down" name="down" class="mc__range-input js-mc-down-input" type="range" min="0" max="5000000" value="77000" step="1000">
</div>
</div>
<div class="mc__field">
<div class="mc__info">
<label for="interest" class="mc__label">Interest Rate %</label>
<span class="mc__info-item">
<span class="js-mc-interest-label"></span>
</span>
</div>
<div class="mc__range">
<input id="interest" name="interest" class="mc__range-input js-mc-interest-input" type="range" min="0" max="15" value="4.17" step="0.01">
</div>
</div>
<div class="mc__field">
<div class="mc__info">
<label for="years" class="mc__label">Amortisation in years</label>
<span class="mc__info-item">
<span class="js-mc-term-label"></span>
</span>
</div>
<div class="mc__range">
<input id="term" name="term" class="mc__range-input js-mc-term-input" type="range" min="1" max="30" value="30" step="1">
</div>
</div>
</div>
</div>
<div class="cell medium-6 mc__cell-wrapper">
<div class="mc__results-wrapper">
<svg class="mc__logo" xmlns="http://www.w3.org/2000/svg" width="49" height="46" viewBox="0 0 49 46" fill="none">
<path d="M47.0116 18.8564C46.245 18.103 45.2211 17.6833 44.1315 17.6833C43.0419 17.6833 42.018 18.0977 41.2515 18.8564L35.0479 24.9527C34.7193 24.7375 34.3634 24.5707 33.9911 24.4577C33.9747 24.4523 33.9583 24.4469 33.9418 24.4416C33.7831 24.3985 33.6243 24.3609 33.4655 24.334C33.4272 24.3286 33.3888 24.3178 33.345 24.3124C33.1643 24.2855 32.9782 24.2694 32.792 24.2694L14.0881 24.2748C12.4072 24.2748 10.8139 24.9043 9.58738 26.0666L0.323047 35.16C0.114983 35.3645 0 35.6389 0 35.9241C0 36.2093 0.114983 36.4837 0.323047 36.6828L8.74965 44.9691C8.95771 45.1736 9.23148 45.2866 9.52167 45.2866C9.81187 45.2866 10.0911 45.1736 10.2937 44.9691L14.2633 41.0681H28.4829C29.5725 41.0681 30.5909 40.6538 31.3629 39.8951L47.0061 24.5223C47.7781 23.769 48.1997 22.7628 48.1997 21.692C48.1997 20.6212 47.7836 19.6097 47.0116 18.8564ZM45.462 22.9941L29.8189 38.3723C29.463 38.7221 28.9921 38.9158 28.4829 38.9158H13.8089C13.5187 38.9158 13.2395 39.0288 13.0369 39.2332L9.52167 42.6877L2.6446 35.9241L11.115 27.6108C11.9199 26.8521 12.9712 26.4324 14.0827 26.4324L32.7865 26.4271C33.345 26.4271 33.8707 26.68 34.2375 27.1158C34.2539 27.1373 34.2758 27.1535 34.2923 27.1696C34.5387 27.4925 34.6701 27.8691 34.6701 28.278C34.6701 28.7731 34.4729 29.2358 34.117 29.5909C33.7612 29.9407 33.2903 30.1344 32.7865 30.1344H22.4655C21.8632 30.1344 21.3704 30.6187 21.3704 31.2105C21.3704 31.8024 21.8632 32.2867 22.4655 32.2867H32.7811C33.8707 32.2867 34.8891 31.8724 35.6611 31.1137C36.4331 30.355 36.8547 29.3542 36.8547 28.2834C36.8547 27.6969 36.7124 27.1266 36.4605 26.6046L42.801 20.3791C43.5128 19.6796 44.7557 19.6796 45.462 20.3791C45.8179 20.7289 46.015 21.197 46.015 21.692C46.015 22.187 45.8179 22.6444 45.462 22.9941Z" fill="#00B1E5" />
<path d="M22.9842 20.7555C23.028 20.7555 23.0718 20.7501 23.1156 20.7447C23.143 20.7501 23.1704 20.7555 23.2032 20.7555C23.2908 20.7555 23.373 20.7555 23.4606 20.7555C27.2003 20.7555 30.7045 19.3296 33.3491 16.7307C36.0539 14.0726 37.5104 10.532 37.4447 6.76013C37.4337 6.17901 36.9574 5.71627 36.3715 5.70013C33.2615 5.63556 30.2993 6.57181 27.8464 8.35283C27.37 5.43647 25.9573 2.76224 23.7453 0.663751C23.3182 0.260195 22.6502 0.260195 22.2231 0.663751C19.4636 3.27879 17.9414 6.7978 17.9414 10.5589C17.9414 14.3201 19.4636 17.8391 22.2231 20.4541C22.4367 20.6532 22.7105 20.7555 22.9842 20.7555ZM31.7996 15.2079C30.0584 16.919 27.8737 18.0274 25.5029 18.431C27.0524 16.2679 27.9175 13.7228 28.0106 11.0324C29.9982 9.18147 32.5114 8.0838 35.2217 7.88471C35.0136 10.6558 33.82 13.2224 31.7996 15.2079ZM22.9842 3.00437C24.8294 5.10825 25.8314 7.75019 25.8314 10.5589C25.8314 13.3677 24.8294 16.015 22.9842 18.1135C21.139 16.0096 20.1316 13.3677 20.1316 10.5536C20.1316 7.73943 21.139 5.10286 22.9842 3.00437Z" fill="#00B1E5" />
</svg>
<span class="mc__eyebrow">
Your estimated monthly mortgage payment
</span>
<h3 class="mc__payment-title">
$<span class="js-mc-monthly-payments"></span>
</h3>
<div class="mc__info-wrapper">
<div class="mc__info">
<span class="mc__info-title">
Mortgage size
</span>
<span class="mc__info-item">
$<span class="js-mc-mortgage-size"></span>
</span>
</div>
<div class="mc__info">
<span class="mc__info-title">
Mortgage interest
</span>
<span class="mc__info-item">
$<span class="js-mc-mortgage-interest"></span>
</span>
</div>
</div>
<div class="mc__total-wrapper">
<div class="mc__info">
<span class="mc__info-title">
Total Mortgage Paid
</span>
<span class="mc__info-item">
$<span class="js-mc-total-mortgage-paid"></span>
</span>
</div>
</div>
</div>
</div>
<div class="cell">
<p class="mc__footnote">These calculations are for guidance only. You will need to contact a mortgage lender directly to find out exactly how much your monthly payments would be.</p>
</div>
</div>
</div>
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/mortgage-calculator.css?cb={{cacheBuster}}">
<div class="mc" data-module="mortgageCalculator" data-initial-price="{{initialPrice}}"
data-initial-down="{{initialDown}}" data-initial-interest="{{initialInterest}}" data-initial-term="{{initialTerm}}">
<div class="grid-x grid-padding-x">
<div class="cell mc__cell-wrapper">
<h2 class="mc__title">{{title}}</h2>
</div>
<div class="cell medium-6 mc__cell-wrapper">
<div class="mc__inputs-wrapper">
<div class="mc__field">
<div class="mc__info">
<label for="price" class="mc__label">{{priceTitle}}</label>
<span class="mc__info-item">
{{currency}}<span class="js-mc-price-label"></span>
</span>
</div>
<div class="mc__range">
<input id="price" name="price" class="mc__range-input js-mc-price-input" type="range" min="0"
max="50000000" value="{{initialPrice}}" step="10000">
</div>
</div>
<div class="mc__field">
<div class="mc__info">
<label for="down" class="mc__label">{{downPaymentTitle}}</label>
<span class="mc__info-item">
{{currency}}<span class="js-mc-down-label"></span>
</span>
</div>
<div class="mc__range">
<input id="down" name="down" class="mc__range-input js-mc-down-input" type="range" min="0"
max="5000000" value="{{initialDown}}" step="1000">
</div>
</div>
<div class="mc__field">
<div class="mc__info">
<label for="interest" class="mc__label">{{interestTitle}}</label>
<span class="mc__info-item">
<span class="js-mc-interest-label"></span>
</span>
</div>
<div class="mc__range">
<input id="interest" name="interest" class="mc__range-input js-mc-interest-input" type="range"
min="0" max="15" value="{{initialInterest}}" step="0.01">
</div>
</div>
<div class="mc__field">
<div class="mc__info">
<label for="years" class="mc__label">{{termTitle}}</label>
<span class="mc__info-item">
<span class="js-mc-term-label"></span>
</span>
</div>
<div class="mc__range">
<input id="term" name="term" class="mc__range-input js-mc-term-input" type="range" min="1"
max="30" value="{{initialTerm}}" step="1">
</div>
</div>
</div>
</div>
<div class="cell medium-6 mc__cell-wrapper">
<div class="mc__results-wrapper">
<svg class="mc__logo" xmlns="http://www.w3.org/2000/svg" width="49" height="46" viewBox="0 0 49 46"
fill="none">
<path
d="M47.0116 18.8564C46.245 18.103 45.2211 17.6833 44.1315 17.6833C43.0419 17.6833 42.018 18.0977 41.2515 18.8564L35.0479 24.9527C34.7193 24.7375 34.3634 24.5707 33.9911 24.4577C33.9747 24.4523 33.9583 24.4469 33.9418 24.4416C33.7831 24.3985 33.6243 24.3609 33.4655 24.334C33.4272 24.3286 33.3888 24.3178 33.345 24.3124C33.1643 24.2855 32.9782 24.2694 32.792 24.2694L14.0881 24.2748C12.4072 24.2748 10.8139 24.9043 9.58738 26.0666L0.323047 35.16C0.114983 35.3645 0 35.6389 0 35.9241C0 36.2093 0.114983 36.4837 0.323047 36.6828L8.74965 44.9691C8.95771 45.1736 9.23148 45.2866 9.52167 45.2866C9.81187 45.2866 10.0911 45.1736 10.2937 44.9691L14.2633 41.0681H28.4829C29.5725 41.0681 30.5909 40.6538 31.3629 39.8951L47.0061 24.5223C47.7781 23.769 48.1997 22.7628 48.1997 21.692C48.1997 20.6212 47.7836 19.6097 47.0116 18.8564ZM45.462 22.9941L29.8189 38.3723C29.463 38.7221 28.9921 38.9158 28.4829 38.9158H13.8089C13.5187 38.9158 13.2395 39.0288 13.0369 39.2332L9.52167 42.6877L2.6446 35.9241L11.115 27.6108C11.9199 26.8521 12.9712 26.4324 14.0827 26.4324L32.7865 26.4271C33.345 26.4271 33.8707 26.68 34.2375 27.1158C34.2539 27.1373 34.2758 27.1535 34.2923 27.1696C34.5387 27.4925 34.6701 27.8691 34.6701 28.278C34.6701 28.7731 34.4729 29.2358 34.117 29.5909C33.7612 29.9407 33.2903 30.1344 32.7865 30.1344H22.4655C21.8632 30.1344 21.3704 30.6187 21.3704 31.2105C21.3704 31.8024 21.8632 32.2867 22.4655 32.2867H32.7811C33.8707 32.2867 34.8891 31.8724 35.6611 31.1137C36.4331 30.355 36.8547 29.3542 36.8547 28.2834C36.8547 27.6969 36.7124 27.1266 36.4605 26.6046L42.801 20.3791C43.5128 19.6796 44.7557 19.6796 45.462 20.3791C45.8179 20.7289 46.015 21.197 46.015 21.692C46.015 22.187 45.8179 22.6444 45.462 22.9941Z"
fill="#00B1E5" />
<path
d="M22.9842 20.7555C23.028 20.7555 23.0718 20.7501 23.1156 20.7447C23.143 20.7501 23.1704 20.7555 23.2032 20.7555C23.2908 20.7555 23.373 20.7555 23.4606 20.7555C27.2003 20.7555 30.7045 19.3296 33.3491 16.7307C36.0539 14.0726 37.5104 10.532 37.4447 6.76013C37.4337 6.17901 36.9574 5.71627 36.3715 5.70013C33.2615 5.63556 30.2993 6.57181 27.8464 8.35283C27.37 5.43647 25.9573 2.76224 23.7453 0.663751C23.3182 0.260195 22.6502 0.260195 22.2231 0.663751C19.4636 3.27879 17.9414 6.7978 17.9414 10.5589C17.9414 14.3201 19.4636 17.8391 22.2231 20.4541C22.4367 20.6532 22.7105 20.7555 22.9842 20.7555ZM31.7996 15.2079C30.0584 16.919 27.8737 18.0274 25.5029 18.431C27.0524 16.2679 27.9175 13.7228 28.0106 11.0324C29.9982 9.18147 32.5114 8.0838 35.2217 7.88471C35.0136 10.6558 33.82 13.2224 31.7996 15.2079ZM22.9842 3.00437C24.8294 5.10825 25.8314 7.75019 25.8314 10.5589C25.8314 13.3677 24.8294 16.015 22.9842 18.1135C21.139 16.0096 20.1316 13.3677 20.1316 10.5536C20.1316 7.73943 21.139 5.10286 22.9842 3.00437Z"
fill="#00B1E5" />
</svg>
<span class="mc__eyebrow">
{{estimatedTitle}}
</span>
<h3 class="mc__payment-title">
{{currency}}<span class="js-mc-monthly-payments"></span>
</h3>
<div class="mc__info-wrapper">
<div class="mc__info">
<span class="mc__info-title">
{{mortgageSizeTitle}}
</span>
<span class="mc__info-item">
{{currency}}<span class="js-mc-mortgage-size"></span>
</span>
</div>
<div class="mc__info">
<span class="mc__info-title">
{{mortgageInterestTitle}}
</span>
<span class="mc__info-item">
{{currency}}<span class="js-mc-mortgage-interest"></span>
</span>
</div>
</div>
<div class="mc__total-wrapper">
<div class="mc__info">
<span class="mc__info-title">
{{totalMortgagePaidTitle}}
</span>
<span class="mc__info-item">
{{currency}}<span class="js-mc-total-mortgage-paid"></span>
</span>
</div>
</div>
</div>
</div>
<div class="cell">
<p class="mc__footnote">{{footnote}}</p>
</div>
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"currency": "$",
"initialPrice": 3500000,
"initialDown": 77000,
"initialInterest": 4.17,
"initialTerm": 30,
"title": "Mortgage estimate",
"priceTitle": "Property Price",
"downpaymentTitle": "Down Payment",
"interestTitle": "Interest Rate %",
"termTitle": "Amortisation in years",
"estimatedTitle": "Your estimated monthly mortgage payment",
"mortgageSizeTitle": "Mortgage size",
"mortgageInterestTitle": "Mortgage interest",
"totalMortgagePaidTitle": "Total Mortgage Paid",
"footnote": "These calculations are for guidance only. You will need to contact a mortgage lender directly to find out exactly how much your monthly payments would be."
}
class MortgageCalculator {
constructor(module) {
this.module = module;
this.priceLabel = this.module.querySelector('.js-mc-price-label');
this.priceInput = this.module.querySelector('.js-mc-price-input');
this.downLabel = this.module.querySelector('.js-mc-down-label');
this.downInput = this.module.querySelector('.js-mc-down-input');
this.interestLabel = this.module.querySelector('.js-mc-interest-label');
this.interestInput = this.module.querySelector('.js-mc-interest-input');
this.termLabel = this.module.querySelector('.js-mc-term-label');
this.termInput = this.module.querySelector('.js-mc-term-input');
this.paymentsPaymentsLabel = this.module.querySelector('.js-mc-monthly-payments');
this.mortgageSizeLabel = this.module.querySelector('.js-mc-mortgage-size');
this.mortgageInterestLabel = this.module.querySelector('.js-mc-mortgage-interest');
this.totalMortgagePaidLabel = this.module.querySelector('.js-mc-total-mortgage-paid');
const {
initialPrice, initialDown, initialInterest, initialTerm,
} = this.module.dataset;
this.state = {
price: initialPrice * 1,
down: initialDown * 1,
principal: (initialPrice * 1) - (initialDown * 1),
interest: initialInterest * 1,
term: initialTerm * 1,
monthlyPayment: 0,
totalInterest: 0,
};
this.calculatePayment();
this.addEventListeners();
}
updateState(key, value) {
const { state } = this;
state[key] = value;
}
calculatePayment() {
const {
price, down, interest, term,
} = this.state;
const principal = price - down;
const monthlyInterestRate = interest > 0 ? (interest / 12) / 100 : 0;
const numPayments = term * 12;
const monthlyPayment = interest > 0 ? (principal * monthlyInterestRate) / (1 - ((1 + monthlyInterestRate) ** -numPayments)) : principal / numPayments;
const totalPayment = monthlyPayment * numPayments;
const totalInterest = totalPayment - principal;
this.updateState('principal', principal);
this.updateState('monthlyPayment', monthlyPayment);
this.updateState('totalInterest', totalInterest);
this.updateUI();
}
updateUI() {
const {
state, priceLabel, downLabel, interestLabel, termLabel, paymentsPaymentsLabel, mortgageSizeLabel, mortgageInterestLabel, totalMortgagePaidLabel,
} = this;
const {
price, down, principal, interest, term, monthlyPayment, totalInterest,
} = state;
const totalPaid = principal + totalInterest;
priceLabel.innerHTML = price > 0 ? MortgageCalculator.numberWithCommas(price) : 0;
downLabel.innerHTML = down > 0 ? MortgageCalculator.numberWithCommas(down) : 0;
interestLabel.innerHTML = interest > 0 ? MortgageCalculator.numberWithCommas(interest, 2) : 0;
termLabel.innerHTML = term > 0 ? MortgageCalculator.numberWithCommas(term) : 0;
paymentsPaymentsLabel.innerHTML = monthlyPayment > 0 ? MortgageCalculator.numberWithCommas(monthlyPayment) : 0;
mortgageSizeLabel.innerHTML = principal > 0 ? MortgageCalculator.numberWithCommas(principal) : 0;
mortgageInterestLabel.innerHTML = totalInterest > 0 ? MortgageCalculator.numberWithCommas(totalInterest) : 0;
totalMortgagePaidLabel.innerHTML = totalPaid > 0 ? MortgageCalculator.numberWithCommas(totalPaid) : 0;
}
addEventListeners() {
const {
priceInput, downInput, interestInput, termInput,
} = this;
priceInput.addEventListener('input', (e) => {
this.updateState(
'price',
e.target.value,
);
this.calculatePayment();
});
downInput.addEventListener('input', (e) => {
this.updateState(
'down',
e.target.value,
);
this.calculatePayment();
});
interestInput.addEventListener('input', (e) => {
this.updateState(
'interest',
e.target.value,
);
this.calculatePayment();
});
termInput.addEventListener('input', (e) => {
this.updateState(
'term',
e.target.value,
);
this.calculatePayment();
});
}
static numberWithCommas(val, decimalPlaces = 0) {
return Number(val)
.toFixed(decimalPlaces)
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
}
export default (module) => new MortgageCalculator(module);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
$mortgage-calculator: (
mq-down: 840px,
transition-duration: 200ms
);
.mc {
@extend %spacer-large;
width: 100%;
&__title {
@extend %heading02;
}
}
No notes defined.