Today

81

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 Age and Gender Filtering</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { margin-bottom: 20px; } .hidden { display: none; } </style> </head> <body> <h1>Dynamic Age and Gender Filtering</h1> 
<form id="filterForm">
    <!-- Main Ranges -->
    <div class="container">
        <h2>Main Ranges</h2>
        <label>
            <input type="checkbox" class="main-range" data-group="0-4" onchange="updateSubRanges()"> 0 - 4
        </label><br>
        <label>
            <input type="checkbox" class="main-range" data-group="5-30" onchange="updateSubRanges()"> 5 - 30
        </label><br>
        <label>
            <input type="checkbox" class="main-range" data-group="31-60" onchange="updateSubRanges()"> 31 - 60
        </label><br>
        <label>
            <input type="checkbox" class="main-range" data-group="61-120" onchange="updateSubRanges()"> 61 - 120
        </label><br>
    </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>

    <!-- Sub Ranges -->
    <div class="container">
        <h2>Sub Ranges</h2>
        <div id="subRangesContainer">
            <!-- Subranges will appear dynamically -->
        </div>
    </div>

    <!-- Years -->
    <div class="container">
        <h2>Years</h2>
        <div id="yearsContainer">
            <!-- Years will appear dynamically -->
        </div>
    </div>

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

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

<script>
    // Subrange and year mappings
    const subRangesData = {
        "0-4": [],
        "5-30": [
            { range: "5-9", years: [5, 6, 7, 8, 9] },
            { range: "10-14", years: [10, 11, 12, 13, 14] },
        ],
        "31-60": [
            { range: "31-35", years: [31, 32, 33, 34, 35] },
            { range: "36-40", years: [36, 37, 38, 39, 40] },
        ],
        "61-120": [
            { range: "61-70", years: [61, 62, 63, 64, 65, 66, 67, 68, 69, 70] },
            { range: "71-80", years: [71, 72, 73, 74, 75, 76, 77, 78, 79, 80] },
        ],
    };

    // Dynamically update subranges
    function updateSubRanges() {
        const subRangesContainer = document.getElementById("subRangesContainer");
        const yearsContainer = document.getElementById("yearsContainer");
        subRangesContainer.innerHTML = "";
        yearsContainer.innerHTML = "";

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

            if (subRanges && subRanges.length > 0) {
                subRanges.forEach(({ range }) => {
                    const subRangeDiv = document.createElement("div");
                    subRangeDiv.innerHTML = `
                        <label>
                            <input type="checkbox" class="sub-range" data-group="${range}" data-parent="${group}" onchange="updateYears()"> ${range}
                        </label>
                    `;
                    subRangesContainer.appendChild(subRangeDiv);
                });
            }
        });
    }

    // Dynamically update years
    function updateYears() {
        const yearsContainer = document.getElementById("yearsContainer");
        yearsContainer.innerHTML = "";

        const selectedSubRanges = document.querySelectorAll(".sub-range:checked");
        selectedSubRanges.forEach((subRange) => {
            const group = subRange.dataset.group;
            const parent = subRange.dataset.parent;
            const subRanges = subRangesData[parent];

            if (subRanges) {
                const matchingSubRange = subRanges.find((sub) => sub.range === group);
                if (matchingSubRange) {
                    matchingSubRange.years.forEach((year) => {
                        const yearDiv = document.createElement("div");
                        yearDiv.innerHTML = `
                            <label>
                                <input type="checkbox" class="year" data-group="${year}" data-parent="${group}"> ${year}
                            </label>
                        `;
                        yearsContainer.appendChild(yearDiv);
                    });
                }
            }
        });
    }

    // Handle form submission
    function handleSubmit() {
        const selectedFilters = [];
        const years = document.querySelectorAll(".year:checked");
        const subRanges = document.querySelectorAll(".sub-range:checked");
        const mainRanges = document.querySelectorAll(".main-range:checked");

        // Add selected years
        years.forEach((year) => {
            selectedFilters.push(year.dataset.group);
        });

        // Add subranges without selected years
        subRanges.forEach((subRange) => {
            const group = subRange.dataset.group;
            const selectedYears = document.querySelectorAll(`.year[data-parent="${group}"]:checked`);
            if (selectedYears.length === 0) {
                selectedFilters.push(group);
            }
        });

        // Add main ranges without selected subranges or years
        mainRanges.forEach((mainRange) => {
            const group = mainRange.dataset.group;
            const selectedSubRanges = document.querySelectorAll(`.sub-range[data-parent="${group}"]:checked`);
            const selectedYears = document.querySelectorAll(`.year[data-parent^="${group}"]:checked`);
            if (selectedSubRanges.length === 0 && selectedYears.length === 0) {
                selectedFilters.push(group);
            }
        });

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

        // Display selected filters
        const selectedDiv = document.getElementById("selectedFilters");
        selectedDiv.innerHTML = selectedFilters.length > 0
            ? `Selected: ${selectedFilters.join(", ")} (Gender: ${selectedGender})`
            : "No filters selected.";
    }
</script>
</body> </html>