A loan calculator is a handy tool for anyone looking to estimate monthly payments based on loan amount, interest rate, and loan tenure. In this tutorial, we’ll create a clean, responsive loan calculator using HTML, CSS, and JavaScript.
Final Output:
The result is an interactive loan calculator where users can:
- Adjust the loan amount, interest rate, and loan tenure using sliders.
- Instantly see the updated monthly payment.
Video Tutorial:
HTML: Structuring the Calculator
The HTML provides the foundation, defining the input sliders and placeholders for the dynamic content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Loan Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Loan Calculator</h2>
<div class="range-input">
<label for="loan-amount">Loan Amount($):</label>
<input
id="loan-amount"
type="range"
min="1000"
max="100000"
step="1000"
value="50000"
/>
<div class="range-value" id="loan-amount-value">$50000</div>
</div>
<div class="range-input">
<label for="interest-rate">Interest rate(%):</label>
<input
id="interest-rate"
type="range"
min="1"
max="20"
step="0.1"
value="5"
/>
<div class="range-value" id="interest-rate-value">5%</div>
</div>
<div class="range-input">
<label for="loan-tenure">Loan Tenure(Years):</label>
<input
id="loan-tenure"
type="range"
min="1"
max="30"
step="1"
value="15"
/>
<div class="range-value" id="loan-tenure-value">15 years</div>
</div>
<div class="result" id="monthly-payment">Monthly Payment $0</div>
</div>
<script src="script.js"></script>
</body>
</html>
Key HTML Elements
- Range Inputs:
- Sliders allow users to adjust the loan amount, interest rate, and tenure.
- Dynamic Values:
divelements display the selected values dynamically as the sliders are adjusted.
- Monthly Payment Display:
- A placeholder to show the calculated monthly payment
CSS: Styling the Calculator
The CSS ensures the loan calculator looks modern and responsive.
body {
background-color: #3991f5;
font-family: "Poppins", sans-serif;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
background-color: #ffffff;
width: min(500px, 90vw);
padding: 20px;
border-radius: 8px;
}
h2 {
text-align: center;
}
.range-input {
margin-bottom: 20px;
}
.range-input label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.range-input input[type="range"] {
width: 100%;
}
.range-value {
text-align: right;
margin-top: 10px;
margin-bottom: 10px;
}
.result {
background-color: rgba(57, 147, 246, 0.4);
padding: 20px;
text-align: center;
}
Javascript:
const loanAmountInput = document.getElementById("loan-amount");
const interestRateInput = document.getElementById("interest-rate");
const loanTenureInput = document.getElementById("loan-tenure");
const loanAmountValue = document.getElementById("loan-amount-value");
const interestRateValue = document.getElementById("interest-rate-value");
const loanTenureValue = document.getElementById("loan-tenure-value");
const monthlyPayment = document.getElementById("monthly-payment");
function calculateMonthlyPayment() {
const loanAmount = parseFloat(loanAmountInput.value);
const interestRate = parseFloat(interestRateInput.value) / 100 / 12;
const loanTenure = parseInt(loanTenureInput.value) * 12;
const numerator =
loanAmount * interestRate * Math.pow(1 + interestRate, loanTenure);
const denominator = Math.pow(1 + interestRate, loanTenure) - 1;
const payment = numerator / denominator;
monthlyPayment.textContent = `Monthly Payment: $${payment.toFixed(2)}`;
}
function updateValues() {
loanAmountValue.textContent = `$${parseFloat(
loanAmountInput.value
).toLocaleString()}`;
interestRateValue.textContent = `${parseFloat(
interestRateInput.value
).toFixed(1)}%`;
loanTenureValue.textContent = `${loanTenureInput.value} years`;
calculateMonthlyPayment();
}
loanAmountInput.addEventListener("input", updateValues);
interestRateInput.addEventListener("input", updateValues);
loanTenureInput.addEventListener("input", updateValues);
updateValues();
Key JavaScript Logic
-
Monthly Payment Formula:
Monthly Payment=P×r×(1+r)n(1+r)n−1\text{Monthly Payment} = \frac{P \times r \times (1 + r)^n}{(1 + r)^n – 1}
The formula used is the standard amortization formula:- PP: Loan Amount
- rr: Monthly Interest Rate
- nn: Total Number of Payments
-
Dynamic Updates:
TheupdateValuesfunction updates the slider values and recalculates the payment whenever a slider is adjusted. -
Event Listeners:
Sliders are linked to theupdateValuesfunction usingaddEventListener.
How It Works
- The user adjusts the loan amount, interest rate, or loan tenure using sliders.
- The sliders trigger an
inputevent, which dynamically updates the displayed values. - The JavaScript calculates the monthly payment in real time and displays it.
Â
Conclusion
This interactive loan calculator is a simple yet powerful tool to visualize monthly payments. It showcases how HTML, CSS, and JavaScript work together to create dynamic, user-friendly web applications.
Try building this yourself, and feel free to expand on it with the enhancements suggested above!
                                                                       Download Code
Â
Â
Â
Â
