OneCompiler

Final v7

113

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>Filter Data</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { max-width: 1000px; margin: auto; } .dropdown { position: relative; display: inline-block; margin-right: 20px; margin-bottom: 20px; } .dropdown button { padding: 10px; width: 200px; background-color: #4CAF50; color: white; border: none; cursor: pointer; text-align: left; } .dropdown button:after { content: " ▼"; float: right; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; width: 200px; max-height: 150px; overflow-y: scroll; z-index: 1; padding: 10px; } .dropdown-content label { display: block; margin-bottom: 5px; } .dropdown:hover .dropdown-content { display: block; } .selected-items { margin-top: 10px; font-size: 14px; color: #333; } button.submit-btn { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } button.submit-btn:hover { background-color: #45a049; } .filtered-data { margin-top: 20px; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9; } </style> </head> <body> <div class="container"> <h1>Data Filter Application</h1> <form method="POST"> <!-- Years Dropdown --> <div class="dropdown"> <button type="button">Years</button> <div class="dropdown-content"> {% for year in years %} <label> <input type="checkbox" name="years" value="{{ year }}" onchange="updateSelection('years')"> {{ year }} </label> {% endfor %} </div> <div class="selected-items" id="years-selected">Selected: None</div> </div> 
        <!-- Areas Dropdown -->
        <div class="dropdown">
            <button type="button">Areas</button>
            <div class="dropdown-content">
                {% for area in areas %}
                    <label>
                        <input type="checkbox" name="areas" value="{{ area }}" onchange="updateSelection('areas')"> {{ area }}
                    </label>
                {% endfor %}
            </div>
            <div class="selected-items" id="areas-selected">Selected: None</div>
        </div>

        <!-- Main Age Dropdown -->
        <div class="dropdown">
            <button type="button">Main Age</button>
            <div class="dropdown-content">
                {% for age in main_age %}
                    <label>
                        <input type="checkbox" name="main_age" value="{{ age }}" onchange="updateSelection('main_age')"> {{ age }}
                    </label>
                {% endfor %}
            </div>
            <div class="selected-items" id="main_age-selected">Selected: None</div>
        </div>

        <!-- Genders Dropdown -->
        <div class="dropdown">
            <button type="button">Genders</button>
            <div class="dropdown-content">
                {% for gender in genders %}
                    <label>
                        <input type="checkbox" name="genders" value="{{ gender }}" onchange="updateSelection('genders')"> {{ gender }}
                    </label>
                {% endfor %}
            </div>
            <div class="selected-items" id="genders-selected">Selected: None</div>
        </div>

        <!-- Ethnics Dropdown -->
        <div class="dropdown">
            <button type="button">Ethnics</button>
            <div class="dropdown-content">
                {% for ethnic in ethnics %}
                    <label>
                        <input type="checkbox" name="ethnics" value="{{ ethnic }}" onchange="updateSelection('ethnics')"> {{ ethnic }}
                    </label>
                {% endfor %}
            </div>
            <div class="selected-items" id="ethnics-selected">Selected: None</div>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="submit-btn">Filter</button>
    </form>

    <!-- Display Filtered Data -->
    {% if filtered_data %}
        <div class="filtered-data">
            <h2>Filtered Data:</h2>
            <pre>{{ filtered_data }}</pre>
        </div>
    {% endif %}
</div>

<script>
    function updateSelection(name) {
        const checkboxes = document.querySelectorAll(`input[name="${name}"]:checked`);
        const selected = Array.from(checkboxes).map(checkbox => checkbox.value);
        const selectedDiv = document.getElementById(`${name}-selected`);
        selectedDiv.textContent = selected.length > 0 ? `Selected: ${selected.join(", ")}` : "Selected: None";
    }
</script>
</body> </html>