Banner

JUST COMPLETE THE CALCULATOR BELOW TO FIND OUT HOW MUCH YOUR PAYMENT SHOULD BE.  

Member-Centric Financial Advice

Ukrainian flag. Blue and yellow flag. Independence Day in Ukraine. National happy holiday, celebrated annual. Patriotic elements. Poster, card, banner and background. Vector illustration

Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loan Calculator</title>
    <style>
        /* Scoped Styles */
        .loan-calculator {
            max-width: 500px;
            margin: 3rem auto;
            padding: 2rem;
            background: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            font-family: Arial, sans-serif;
        }

        .loan-calculator h1 {
            text-align: center;
            color: #333;
        }

        .loan-calculator label {
            display: block;
            font-weight: bold;
            margin: 1rem 0 0.5rem;
            color: #555;
        }

        .loan-calculator input {
            width: 100%;
            padding: 0.75rem;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

        .loan-calculator button {
            width: 100%;
            background-color: #007bff;
            color: white;
            border: none;
            padding: 0.75rem;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .loan-calculator button:hover {
            background-color: #0056b3;
        }

        .loan-calculator .result {
            margin-top: 2rem;
            padding: 1rem;
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .loan-calculator .result p {
            margin: 0.5rem 0;
            font-size: 1rem;
            color: #333;
        }
    </style>
</head>
<body>
    
    <div class="loan-calculator">
        <h1>Loan Calculator</h1>
        <label for="loanAmount">Loan Amount ($)</label>
        <input type="number" id="loanAmount" placeholder="Enter loan amount" />

        <label for="interestRate">Interest Rate (%)</label>
        <input type="number" id="interestRate" placeholder="Enter annual interest rate" />

        <label for="loanTerm">Loan Term (Years)</label>
        <input type="number" id="loanTerm" placeholder="Enter loan term in years" />

        <button id="calculateBtn">Calculate</button>

        <div class="result" id="result">
            <p>Fill in the details and press Calculate to see results.</p>
        </div>
    </div>

    <script>
        // Add event listener to the button
        document.getElementById('calculateBtn').addEventListener('click', function () {
            // Get values
            const loanAmount = parseFloat(document.getElementById('loanAmount').value);
            const interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12; // Monthly rate
            const loanTerm = parseFloat(document.getElementById('loanTerm').value) * 12; // Convert to months

            const resultDiv = document.getElementById('result');

            // Validation
            if (isNaN(loanAmount) || loanAmount <= 0 ||
                isNaN(interestRate) || interestRate <= 0 ||
                isNaN(loanTerm) || loanTerm <= 0) {
                resultDiv.innerHTML = '<p style="color: red;">Please enter valid positive values in all fields.</p>';
                return;
            }

            // Calculate monthly payment
            const monthlyPayment = (loanAmount * interestRate) / (1 - Math.pow(1 + interestRate, -loanTerm));
            const totalPayment = monthlyPayment * loanTerm;
            const totalInterest = totalPayment - loanAmount;

            // Display results
            resultDiv.innerHTML = `
                <p><strong>Monthly Payment:</strong> $${monthlyPayment.toFixed(2)}</p>
                <p><strong>Total Payment:</strong> $${totalPayment.toFixed(2)}</p>
                <p><strong>Total Interest:</strong> $${totalInterest.toFixed(2)}</p>
            `;
        });
    </script>
</body>
</html>

Member-Centric Financial Advice

Loan Calculator

Discover kancolocredituion.com!