Loan Calculator | SPA by GerardKing.Dev

Loan Calculator | SPA by GerardKing.Dev

Explanation of the Components:

HTML Structure:

• Container: Holds the entire loan calculator interface, centered on the page.
• Form: A form where the user inputs the loan amount, interest rate, and loan term. It includes simple validation to ensure all fields are filled out.
• Result Section: Displays the calculated monthly payment after the user submits the form.

CSS Styles:

• General Styles: Basic styling for the body, form elements, buttons, and result display. This ensures the calculator is visually appealing and user-friendly.
• Button and Result Styling: Enhances interactivity with hover effects on the button and a highlighted result section.

JavaScript Functionality:

• Form Handling: The form submission is captured by the submit event listener.
• Calculation Logic: It calculates the monthly payment based on the inputted values using the standard loan 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}Monthly Payment=(1+r)n−1P×r×(1+r)n​ where PPP is the loan amount, rrr is the monthly interest rate, and nnn is the number of monthly payments.
• Result Display: If the calculation is valid, the result is displayed; otherwise, the user is prompted to check their input values.

Key Features:

• Single-Page Application: All functionality is contained within a single HTML file, making it easy to deploy.
• User Input Validation: Ensures that the user inputs valid numbers before attempting to calculate the loan payment.
• Responsive Design: The calculator is styled to look good on both desktop and mobile devices.

This loan calculator is a simple, elegant tool perfect for anyone needing to quickly calculate monthly loan payments. The design is minimalistic yet functional, with clean code and an intuitive interface.

Get Aardvark Infinity’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here’s the complete code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Loan Calculator - A simple tool to calculate loan payments.">
    <meta name="keywords" content="loan calculator, finance, loan payment, interest rate">
    <meta name="author" content="GerardKing.Dev">
    <title>Loan Calculator | SPA by GerardKing.Dev</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

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

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        input[type="number"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            background-color: #218838;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-left: 4px solid #28a745;
            font-size: 18px;
        }

        footer {
            text-align: center;
            margin-top: 20px;
            color: #777;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>Loan Calculator</h1>
        <form id="loan-form">
            <div>
                <label for="amount">Loan Amount:</label>
                <input type="number" id="amount" placeholder="Enter loan amount" required>
            </div>
            <div>
                <label for="interest">Interest Rate (%):</label>
                <input type="number" id="interest" placeholder="Enter interest rate" step="0.01" required>
            </div>
            <div>
                <label for="years">Loan Term (Years):</label>
                <input type="number" id="years" placeholder="Enter loan term in years" required>
            </div>
            <button type="submit">Calculate Payment</button>
        </form>

        <div id="result" class="result" style="display: none;">
            Monthly Payment: $<span id="monthly-payment"></span>
        </div>
    </div>

    <footer>
        &copy; 2024 Loan Calculator by GerardKing.Dev
    </footer>

    <script>
        document.getElementById('loan-form').addEventListener('submit', function (e) {
            e.preventDefault();

            // Get form values
            const amount = parseFloat(document.getElementById('amount').value);
            const interest = parseFloat(document.getElementById('interest').value) / 100 / 12;
            const years = parseFloat(document.getElementById('years').value) * 12;

            // Compute monthly payment
            const x = Math.pow(1 + interest, years);
            const monthly = (amount * x * interest) / (x - 1);

            // Display the result
            if (isFinite(monthly)) {
                document.getElementById('monthly-payment').textContent = monthly.toFixed(2);
                document.getElementById('result').style.display = 'block';
            } else {
                alert('Please check your numbers and try again.');
            }
        });
    </script>

</body>

</html>