Design a Personal Loan Calculator in Tailwind CSS

Last Updated : 04 Mar, 2024

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.

ac1

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>