Design a Personal Loan Calculator in Tailwind CSS
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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: