!DOCTYPE html>
<html>
<head>
<title>Loan Calculator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.container {
max-width: 400px;
margin: 50px auto;
}
.form-group {
margin-bottom: 20px;
}
.btn-calculate {
background-color: #007bff;
color: #fff;
}
.result {
margin-top: 20px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Loan Calculator</h2>
<form>
<div class="form-group">
<label for="loanAmount">Loan Amount:</label>
<input type="number" class="form-control" id="loanAmount" placeholder="Enter loan amount">
</div>
<div class="form-group">
<label for="interestRate">Interest Rate (%):</label>
<input type="number" class="form-control" id="interestRate" placeholder="Enter interest rate">
</div>
<div class="form-group">
<label for="loanTerm">Loan Term (years):</label>
<input type="number" class="form-control" id="loanTerm" placeholder="Enter loan term">
</div>
<button type="button" class="btn btn-primary btn-calculate">Calculate</button>
</form>
<div id="result" class="result"></div>
</div>
<script>
document.querySelector('.btn-calculate').addEventListener('click', calculateLoan);
function calculateLoan() {
const loanAmount = document.getElementById('loanAmount').value;
const interestRate = document.getElementById('interestRate').value;
const loanTerm = document.getElementById('loanTerm').value;
const monthlyInterestRate = (interestRate / 100) / 12;
const totalPayments = loanTerm * 12;
const discountFactor = ((1 + monthlyInterestRate) ** totalPayments - 1) / (monthlyInterestRate * (1 + monthlyInterestRate) ** totalPayments);
const monthlyPayment = loanAmount / discountFactor;
const result = document.getElementById('result');
result.innerHTML = `Monthly Payment: $${m
onthlyPayment.toFixed(2)}`;
}
</script>
</body>
</html>
