HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mortgage Protection Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Mortgage Protection Calculator</h1>

<div class="input-section">
            <label for="mortgageBalance">Mortgage Balance:</label>
            <input type="text" id="mortgageBalance" placeholder="Enter mortgage balance" oninput="formatCurrency(this)">

<label for="monthlyPayment">Monthly Payment:</label>
            <input type="text" id="monthlyPayment" placeholder="Enter monthly payment" oninput="formatCurrency(this)">

<button onclick="calculate()">Calculate</button>
        </div>

<div class="results-section">
            <h2>Mortgage Protection: If Under 70 and No Health Issues</h2>
            <table>
                <thead>
                    <tr>
                        <th class="great-health">Great Health</th>
                        <th class="average-health">Average Health</th>
                        <th class="bad-health">Bad Health</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="greatHealth1" class="bold-result"></td>
                        <td id="averageHealth1" class="bold-result"></td>
                        <td id="badHealth1" class="bold-result"></td>
                    </tr>
                </tbody>
            </table>
        </div>

<div class="results-section">
            <h2>Mortgage Protection/CBO: If 45 Years Old and Under with No Health Issues</h2>
            <table>
                <thead>
                    <tr>
                        <th class="great-health">Great Health</th>
                        <th class="average-health">Average Health</th>
                        <th class="bad-health">Bad Health</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="greatHealth2" class="bold-result"></td>
                        <td id="averageHealth2" class="bold-result"></td>
                        <td id="badHealth2" class="bold-result"></td>
                    </tr>
                </tbody>
            </table>
        </div>

<div class="results-section">
            <h2>Payment Protection: If Over 55 Years Old - Health Issues Are Acceptable</h2>
            <table>
                <thead>
                    <tr>
                        <th>Duration</th>
                        <th class="great-health">Great Health</th>
                        <th class="average-health">Average Health</th>
                        <th class="bad-health">Bad Health</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1 Year</td>
                        <td id="greatHealth3_1" class="bold-result"></td>
                        <td id="averageHealth3_1" class="bold-result"></td>
                        <td id="badHealth3_1" class="bold-result"></td>
                    </tr>
                    <tr>
                        <td>2 Years</td>
                        <td id="greatHealth3_2" class="bold-result"></td>
                        <td id="averageHealth3_2" class="bold-result"></td>
                        <td id="badHealth3_2" class="bold-result"></td>
                    </tr>
                    <tr>
                        <td>3 Years</td>
                        <td id="greatHealth3_3" class="bold-result"></td>
                        <td id="averageHealth3_3" class="bold-result"></td>
                        <td id="badHealth3_3" class="bold-result"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    color: #333;
}

.input-section {
    margin-bottom: 20px;
}

.input-section label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}

.input-section input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #FFFF00; /* Yellow background for input boxes */
}

.input-section button {
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.input-section button:hover {
    background-color: #218838;
}

.results-section {
    margin-bottom: 30px;
}

.results-section table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px; /* Reduced margin to bring titles closer */
}

.results-section th, .results-section td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.results-section th {
    background-color: #203764; /* Dark blue background for health type headers */
    color: white; /* Default white text for headers */
}

.results-section td {
    background-color: #D9D9D9; /* Light gray background for answer boxes */
}

/* Font colors for health type titles */
.results-section th.great-health {
    color: #92D050; /* Green for GREAT HEALTH title */
}

.results-section th.average-health {
    color: #FFC000; /* Orange for AVERAGE HEALTH title */
}

.results-section th.bad-health {
    color: #FF0000; /* Red for BAD HEALTH title */
}

/* Bold font for results */
.bold-result {
    font-weight: bold;
}

/* Centered section titles with bold italic font */
.results-section h2 {
    text-align: center;
    font-weight: bold;
    font-style: italic;
    margin: 0 0 10px 0; /* Adjusted margin to bring titles closer */
}

function formatCurrency(input) {
    // Remove non-numeric characters
    let value = input.value.replace(/[^0-9]/g, '');

// Format as currency with $ and commas
    if (value.length > 0) {
        value = `$${parseInt(value, 10).toLocaleString()}`;
    }

// Update the input value
    input.value = value;
}

function calculate() {
    // Get input values and remove $ and commas
    const mortgageBalance = parseFloat(document.getElementById('mortgageBalance').value.replace(/[^0-9.]/g, ''));
    const monthlyPayment = parseFloat(document.getElementById('monthlyPayment').value.replace(/[^0-9.]/g, ''));
    const age = parseFloat(document.getElementById('age').value);

// Validate inputs
    if (isNaN(mortgageBalance) || isNaN(monthlyPayment) || isNaN(age)) {
        alert("Please enter valid numbers for all fields.");
        return;
    }

// Formula for E2
    const e2 = () => {
        if (age >= 60 && age <= 64 && mortgageBalance >= 650000) return "DNQ";
        if (age >= 65 && age <= 69 && mortgageBalance >= 450000) return "DNQ";
        if (age >= 70 && age <= 74 && mortgageBalance >= 250000) return "DNQ";
        if (age > 75 && mortgageBalance > 0) return "DNQ";
        return "";
    };

// Formula for F2
    const f2 = () => {
        if (age > 45 || age < 18) return "DNQ";
        return "";
    };

// Formula for F3
    const f3 = () => {
        if (age > 0 && age <= 54) return "DNQ";
        return "";
    };

// Format results as dollars
    const formatDollars = (value) => {
        if (value === "DNQ") return "DNQ";
        return `$${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`;
    };

// Section 1: Mortgage Protection
    const d8 = () => {
        if (mortgageBalance === "" || e2() === "DNQ" || age < 18 || age >= 70) return "DNQ";
        if (age >= 18 && age <= 24) return mortgageBalance / 5500 + 10;
        if (age >= 25 && age <= 29) return mortgageBalance / 5000 + 10;
        if (age >= 30 && age <= 34) return mortgageBalance / 4500 + 10;
        if (age >= 35 && age <= 39) return mortgageBalance / 3500 + 10;
        if (age >= 40 && age <= 44) return mortgageBalance / 2500 + 10;
        if (age >= 45 && age <= 49) return mortgageBalance / 1700 + 10;
        if (age >= 50 && age <= 54) return mortgageBalance / 1100 + 10;
        if (age >= 55 && age <= 59) return mortgageBalance / 750 + 10;
        if (age >= 60 && age <= 64) return mortgageBalance / 525 + 10;
        if (age >= 65 && age <= 70) return mortgageBalance / 450 + 10;
        return "";
    };

const c8 = () => {
        const avgHealth = d8();
        if (avgHealth === "DNQ") return "DNQ";
        return avgHealth - avgHealth * 0.2;
    };

const e8 = () => {
        const avgHealth = d8();
        if (avgHealth === "DNQ") return "DNQ";
        return avgHealth + avgHealth * 0.2;
    };

document.getElementById('greatHealth1').textContent = formatDollars(c8());
    document.getElementById('averageHealth1').textContent = formatDollars(d8());
    document.getElementById('badHealth1').textContent = formatDollars(e8());

// Section 2: Mortgage Protection/CBO
    const d13 = () => {
        if (mortgageBalance === "" || f2() === "DNQ" || age < 18 || age > 50) return "DNQ";
        if (age >= 18 && age <= 24) return mortgageBalance / 2302 + 10;
        if (age >= 25 && age <= 29) return mortgageBalance / 2172 + 10;
        if (age >= 30 && age <= 34) return mortgageBalance / 1992 + 10;
        if (age >= 35 && age <= 39) return mortgageBalance / 1706 + 10;
        if (age >= 40 && age <= 44) return mortgageBalance / 1291 + 10;
        if (age >= 45 && age <= 49) return mortgageBalance / 925 + 10;
        return "";
    };

const c13 = () => {
        const avgHealth = d13();
        if (avgHealth === "DNQ") return "DNQ";
        return avgHealth - avgHealth * 0.2;
    };

const e13 = () => {
        const avgHealth = d13();
        if (avgHealth === "DNQ") return "DNQ";
        return avgHealth + avgHealth * 0.2;
    };

document.getElementById('greatHealth2').textContent = formatDollars(c13());
    document.getElementById('averageHealth2').textContent = formatDollars(d13());
    document.getElementById('badHealth2').textContent = formatDollars(e13());

// Section 3: Payment Protection
    const calculatePaymentProtection = (years) => {
        if (monthlyPayment === "" || f3() === "DNQ" || age < 55) return "DNQ";
        if (age >= 55 && age <= 59) return (monthlyPayment * 12 * years) / 265 + 10;
        if (age >= 60 && age <= 64) return (monthlyPayment * 12 * years) / 236 + 10;
        if (age >= 65 && age <= 69) return (monthlyPayment * 12 * years) / 183 + 10;
        if (age >= 70 && age <= 74) return (monthlyPayment * 12 * years) / 127 + 10;
        if (age >= 75 && age <= 79) return (monthlyPayment * 12 * years) / 88 + 10;
        if (age >= 80 && age <= 84) return (monthlyPayment * 12 * years) / 68 + 10;
        if (age > 85) return "DNQ";
        return "";
    };

const calculateGreatHealth = (value) => {
        if (value === "DNQ") return "DNQ";
        return value - value * 0.2;
    };

const calculateBadHealth = (value) => {
        if (value === "DNQ") return "DNQ";
        return value + value * 0.2;
    };

const paymentProtection1Year = calculatePaymentProtection(1);
    const paymentProtection2Years = calculatePaymentProtection(2);
    const paymentProtection3Years = calculatePaymentProtection(3);

document.getElementById('greatHealth3_1').textContent = formatDollars(calculateGreatHealth(paymentProtection1Year));
    document.getElementById('averageHealth3_1').textContent = formatDollars(paymentProtection1Year);
    document.getElementById('badHealth3_1').textContent = formatDollars(calculateBadHealth(paymentProtection1Year));

document.getElementById('greatHealth3_2').textContent = formatDollars(calculateGreatHealth(paymentProtection2Years));
    document.getElementById('averageHealth3_2').textContent = formatDollars(paymentProtection2Years);
    document.getElementById('badHealth3_2').textContent = formatDollars(calculateBadHealth(paymentProtection2Years));

document.getElementById('greatHealth3_3').textContent = formatDollars(calculateGreatHealth(paymentProtection3Years));
    document.getElementById('averageHealth3_3').textContent = formatDollars(paymentProtection3Years);
    document.getElementById('badHealth3_3').textContent = formatDollars(calculateBadHealth(paymentProtection3Years));
}