The Personal Loan Calculator is a web application designed to help users calculate their monthly loan repayments, total payments, and total interest based on the loan amount, interest rate, and loan term provided.
Prerequisites
Approach
- Input fields for loan amount, interest rate, and loan term.
- Calculate button to initiate the calculation process.
- Error message display for the incomplete input.
- Calculation of monthly payment, total payment, and total interest based on user input.
- Responsive design for optimal user experience on different devices.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >The Personal Loan Calculator</ title >
< link href =
rel = "stylesheet" >
</ head >
< body class = "bg-gray-100" >
< div class = "flex justify-center items-center h-screen" >
< div class="max-w-md w-full bg-white p-8
rounded-lg shadow-lg border-2 border-green-500">
< h1 class = "text-3xl font-bold text-center mb-8" >
Personal Loan Calculator</ h1 >
< div class = "mb-4" >
< label for = "loanAmount" class = "block text-gray-700" >
Loan Amount:</ label >
< input type = "number" id = "loanAmount"
name = "loanAmount"
class="w-full border border-gray-300
rounded-md px-3 py-2 focus:outline-none
focus:border-blue-500" placeholder = "Enter loan amount" >
</ div >
< div class = "mb-4" >
< label for = "interestRate" class = "block text-gray-700" >
Interest Rate (%):</ label >
< input type = "number" id = "interestRate" name = "interestRate"
class="w-full border border-gray-300 rounded-md
px-3 py-2 focus:outline-none focus:border-blue-500"
placeholder = "Enter interest rate" >
</ div >
< div class = "mb-4" >
< label for = "loanTerm" class = "block text-gray-700" >
Loan Term (years):</ label >
< input type = "number" id = "loanTerm" name = "loanTerm"
class="w-full border border-gray-300 rounded-md px-3 py-2
focus:outline-none focus:border-blue-500"
placeholder = "Enter loan term in years" >
</ div >
< div class = "mb-8" >
< button id = "calculateButton" class="w-full
bg-blue-500 text-white
rounded-md py-2 px-4 hover:bg-blue-600
focus:outline-none">Calculate
Repayment</ button >
</ div >
< div id = "repaymentResult" class="text-lg
font-semibold text-center"></ div >
< div id = "errorMessage" class="text-red-500
text-sm mt-4 hidden">Please fill in all fields.</ div >
</ div >
</ div >
< script >
const calculateButton = document
.getElementById('calculateButton');
calculateButton.addEventListener('click', () => {
const loanAmount = parseFloat(document.
getElementById('loanAmount').value);
const interestRate = parseFloat(document.
getElementById('interestRate').value);
const loanTerm = parseFloat(document.
getElementById('loanTerm').value);
if (!loanAmount || !interestRate || !loanTerm) {
document.getElementById('errorMessage')
.classList.remove('hidden');
return;
}
const monthlyInterestRate = interestRate / 100 / 12;
const numberOfPayments = loanTerm * 12;
const monthlyPayment = loanAmount * monthlyInterestRate /
(1 - Math.pow(1 + monthlyInterestRate, -numberOfPayments));
const totalPayment = monthlyPayment * numberOfPayments;
const totalInterest = totalPayment - loanAmount;
document.getElementById('repaymentResult').innerHTML = `
Monthly Payment: $${monthlyPayment.toFixed(2)} < br >
Total Payment: $${totalPayment.toFixed(2)} < br >
Total Interest: $${totalInterest.toFixed(2)}
`;
document.getElementById('errorMessage')
.classList.add('hidden');
});
</ script >
</ body >
</ html >
|
Output:
Recommended Articles