Multi-Category Item Filtering in JavaScript!

To implement item categories filtering with multiple categories using HTML and JavaScript, you can create a simple interface with checkboxes for category selection and a display area for the filtered items. Here’s a complete example:

HTML

#html
<h1>Item Categories Filter</h1>
<h3>Select Categories:</h3>
<div id="category-filters">
    <label><input type="checkbox" value="fruit"> Fruit</label><br>
    <label><input type="checkbox" value="vegetable"> Vegetable</label><br> 
    <label><input type="checkbox" value="meat"> Meat</label><br>
    <label><input type="checkbox" value="fresh"> Fresh</label><br>
    <label><input type="checkbox" value="dried"> Dried</label><br>
</div>

<button id="filter-button">Filter Items</button>

<h3>Filtered Items:</h3>
<div id="item-list"></div>

JavaScript Function

#javascript
const items = [
        { id: 1, name: 'Item A', categories: ['fruit', 'fresh'] },
        { id: 2, name: 'Item B', categories: ['vegetable', 'fresh'] },
        { id: 3, name: 'Item C', categories: ['fruit', 'dried'] },
        { id: 4, name: 'Item D', categories: ['meat'] },
    ];

    function filterItemsByCategories(items, selectedCategories) {
        return items.filter(item =>
            item.categories.some(category => selectedCategories.includes(category))
        );
    }

    document.getElementById('filter-button').addEventListener('click', () => {
        const selectedCategories = Array.from(document.querySelectorAll('#category-filters input:checked'))
            .map(input => input.value);

        const filteredItems = filterItemsByCategories(items, selectedCategories);
        displayItems(filteredItems);
    });

    function displayItems(filteredItems) {
        const itemList = document.getElementById('item-list');
        itemList.innerHTML = ''; // Clear previous items

        if (filteredItems.length === 0) {
            itemList.innerHTML = '<p>No items found.</p>';
            return;
        }

        filteredItems.forEach(item => {
            const div = document.createElement('div');
            div.className = 'item';
            div.textContent = item.name;
            itemList.appendChild(div);
        });
    }

Review:

1. HTML Structure:
   • A title and section for category selection using checkboxes.
   • A button to trigger the filtering.
   • A section to display the filtered items.
2. JavaScript Logic:
   • An array of items, each with id, name, and categories.
   • The filterItemsByCategories function filters items based on selected categories.
   • An event listener on the “Filter Items” button collects the selected categories and calls the filtering function.
   • The displayItems function updates the display area with the filtered items or shows a message if no items are found.

Usage:

1. Select the desired categories using the checkboxes.
2. Click the “Filter Items” button to see the results displayed below.

This simple implementation can be expanded with more functionality as needed!

Developers Simplify Complex Code at Coding Filters!

Developers often struggle with overly complex code that is hard to maintain and debug. By applying coding filters, developers can break down complex tasks into smaller, more manageable pieces, resulting in simpler, cleaner code. Filters help to target specific data or processes, enhancing both performance and readability.