User Story
As a homebuyer, I want to calculate my monthly mortgage payment based on the loan amount, interest rate, and loan term so that I can budget and plan my finances accordingly.
HTML
<template>
<lightning-card title="Mortgage Calculator">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-2">
<lightning-input type="number" label="Loan Amount ($)" value={loanAmount} onchange={handleLoanAmountChange}></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input type="number" label="Interest Rate (%)" value={interestRate} onchange={handleInterestRateChange}></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input type="number" label="Loan Term (years)" value={loanTerm} onchange={handleLoanTermChange}></lightning-input>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-formatted-number label="Monthly Payment ($)" value={monthlyPayment}></lightning-formatted-number>
</div>
</div>
</lightning-card>
</template>
<style>
.slds-col {
padding: 0.5rem;
}
</style>
Java Script
import { LightningElement, track } from 'lwc';
export default class MortgageCalculator extends LightningElement {
@track loanAmount = 0;
@track interestRate = 0;
@track loanTerm = 0;
@track monthlyPayment = 0;
handleLoanAmountChange(event) {
this.loanAmount = parseFloat(event.target.value);
this.calculateMonthlyPayment();
}
handleInterestRateChange(event) {
this.interestRate = parseFloat(event.target.value);
this.calculateMonthlyPayment();
}
handleLoanTermChange(event) {
this.loanTerm = parseFloat(event.target.value);
this.calculateMonthlyPayment();
}
calculateMonthlyPayment() {
const monthlyInterestRate = this.interestRate / 100 / 12;
const totalPayments = this.loanTerm * 12;
const discountFactor = (Math.pow(1 + monthlyInterestRate, totalPayments) - 1) / (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, totalPayments));
this.monthlyPayment = (this.loanAmount / discountFactor).toFixed(2);
}
}
Video
Video does not exists.
