Final V2 - Posts - OneCompiler

Example heading with h2 size

Example heading with h3 size

Following is sample java code.

int i = 10;
if(i>0){
    System.out.println('positive');
}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Filtering with Age, Gender, and Ethnicity</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { margin-bottom: 20px; } .sub-group { margin-left: 20px; } </style> </head> <body> <h1>Dynamic Filtering with Age, Gender, and Ethnicity</h1>

<form id="filterForm">
    <!-- Year Range Filters -->
    <div class="container">
        <h2>Year Ranges</h2>
        <label>
            <input type="checkbox" class="main-range" data-range="0-30" onchange="updateYearRanges()"> 0-30 years
        </label><br>
        <label>
            <input type="checkbox" class="main-range" data-range="31-60" onchange="updateYearRanges()"> 31-60 years
        </label><br>
        <label>
            <input type="checkbox" class="main-range" data-range="61-90" onchange="updateYearRanges()"> 61-90 years
        </label><br>
        <label>
            <input type="checkbox" class="main-range" data-range="91-120" onchange="updateYearRanges()"> 91-120 years
        </label><br>
    </div>

    <div class="container" id="subRangesContainer">
        <h3>Sub-Year Ranges</h3>
        <!-- Sub-year ranges will dynamically update here -->
    </div>

    <!-- Ethnicity Filters -->
    <div class="container">
        <h2>Ethnicity</h2>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Total people" onchange="updateEthnicities()"> Total people
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="European" onchange="updateEthnicities()"> European
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Maori" onchange="updateEthnicities()"> Maori
        </label><br>
        <label>
            <input type="checkbox" class="ethnicity" data-group="Other ethnicity" onchange="toggleSubEthnicity(this)"> Other ethnicity
        </label><br>
        <div class="sub-group hidden" id="subOtherEthnicity">
            <label>
                <input type="checkbox" class="ethnicity-sub" data-group="New Zealander" data-parent="Other ethnicity" onchange="updateEthnicities()"> New Zealander
            </label><br>
            <label>
                <input type="checkbox" class="ethnicity-sub" data-group="Other ethnicity nec" data-parent="Other ethnicity" onchange="updateEthnicities()"> Other ethnicity nec
            </label><br>
        </div>
    </div>

    <!-- Gender Selection -->
    <div class="container">
        <h2>Gender</h2>
        <label>
            <input type="radio" name="gender" value="total" checked> Total
        </label><br>
        <label>
            <input type="radio" name="gender" value="male"> Male
        </label><br>
        <label>
            <input type="radio" name="gender" value="female"> Female
        </label><br>
    </div>

    <button type="button" onclick="handleSubmit()">Submit</button>
</form>

<h2>Selected Filters</h2>
<div id="selectedFilters"></div>

<script>
    // Predefined sub-ranges for each main range
    const subRangesData = {
        "0-30": ["0-5", "6-10", "11-15", "16-20", "21-25", "26-30"],
        "31-60": ["31-35", "36-40", "41-45", "46-50", "51-55", "56-60"],
        "61-90": ["61-65", "66-70", "71-75", "76-80", "81-85", "86-90"],
        "91-120": ["91-95", "96-100", "101-105", "106-110", "111-115", "116-120"]
    };

    // Update sub-ranges dynamically based on main range selection
    function updateYearRanges() {
        const subRangesContainer = document.getElementById("subRangesContainer");
        subRangesContainer.innerHTML = "";

        const selectedMainRanges = document.querySelectorAll(".main-range:checked");
        selectedMainRanges.forEach((mainRange) => {
            const range = mainRange.dataset.range;
            const subRanges = subRangesData[range] || [];

            subRanges.forEach((subRange) => {
                const checkbox = document.createElement("label");
                checkbox.innerHTML = `
                    <input type="checkbox" class="sub-range" data-group="${subRange}"> ${subRange}
                `;
                subRangesContainer.appendChild(checkbox);
                subRangesContainer.appendChild(document.createElement("br"));
            });
        });
    }

    // Collect and display selected filters
    function handleSubmit() {
        const selectedYears = [];
        const selectedSubRanges = document.querySelectorAll(".sub-range:checked");
        selectedSubRanges.forEach((item) => {
            selectedYears.push(item.dataset.group);
        });

        // Collect gender
        const selectedGender = document.querySelector("input[name='gender']:checked").value;

        const selectedDiv = document.getElementById("selectedFilters");
        selectedDiv.innerHTML = `
            Selected Year Ranges: ${selectedYears.join(", ")}<br>
            Gender: ${selectedGender}
        `;
    }
</script>

</body> </html>