Way 2 Filter

Add the js-filter-body class to the element with all items to filter.

The class js-filter-counter will receive the amount of items, based on the filters.

The class js-filter-item must be added to all items.

The class js-filter-option must be added to every filter link.

The class js-filter-sort must be added to every sort link.

Filter links

The filters links has also data attributes.

So the link with the class js-filter-option has also a attribute data-filter-key, this contain the key of the filter.

The data attribute data-filter-option contains a value.

You can add a i element, this will receive the class fa-check if you click on the filter link.

Filter items

The items has also data attributes.

If the filter link has the value 'city' as value in the attribute data-filter-key.

Than you have a data attribute data-filter-city at the item.

The value of the data attribute must be a value of a data-filter-option.

Example of a filter link:

<li class="js-filter-option" data-filter-key="city" data-filter-option="Utrecht">
    <a href="#">
        <i class="fa fa-check fa-fw text-muted"></i>
        Utrecht
    </a>
</li>

Example of a sort link:

<a href="#" class="js-filter-sort" data-filter-sort="city" data-filter-order="asc">
    <i class="fa fa-check fa-fw text-muted"></i>
    City
</a>

Example of a item:

<ul class="element | list-unstyled | js-filter-body">
    <li>
        <a
            class="js-filter-item"
            data-filter-city="Utrecht"
        >
            ...
        </a>
    </li>
    ...
</ul>

Test the package.

To test the package, clone the package to your system. Than run this command.

npm run build

This will copy the test files to the dist, and also build the package files include the dependencies.

When this script is complete without errors, you can open dist/index.html in your browser. Open the dev tools, tab console, and you see all the results of the tests.

If you only want to check the eslint rules, just run.

npm run lint