Практика: фильтрация и сортировка элементов на странице с помощью jQuery

Цель: создать список элементов (например, товары или карточки), реализовать фильтрацию по категориям и сортировку по цене или названию с плавным отображением результатов.

<div id="filters">
  <button class="filter-btn" data-category="all">Все</button>
  <button class="filter-btn" data-category="fruits">Фрукты</button>
  <button class="filter-btn" data-category="vegetables">Овощи</button>
</div>

<div id="sort">
  <button class="sort-btn" data-sort="name">Сортировать по названию</button>
  <button class="sort-btn" data-sort="price">Сортировать по цене</button>
</div>

<div id="items">
  <div class="item" data-category="fruits" data-name="Яблоко" data-price="100">
    <h4>Яблоко</h4><p>Цена: 100 ₽</p>
  </div>
  <div class="item" data-category="vegetables" data-name="Морковь" data-price="50">
    <h4>Морковь</h4><p>Цена: 50 ₽</p>
  </div>
  <div class="item" data-category="fruits" data-name="Банан" data-price="120">
    <h4>Банан</h4><p>Цена: 120 ₽</p>
  </div>
  <!-- Добавьте больше элементов -->
</div>

<div id="no-results" style="display:none;">Нет результатов</div>

.item {
  transition: all 0.3s ease;
  margin-bottom: 10px;
}
.hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

$(function() {
  $('.filter-btn').on('click', function() {
    let category = $(this).data('category');

    if (category === 'all') {
      $('.item').removeClass('hidden');
    } else {
      $('.item').each(function() {
        let itemCategory = $(this).data('category');
        if (itemCategory === category) {
          $(this).removeClass('hidden');
        } else {
          $(this).addClass('hidden');
        }
      });
    }

    checkNoResults();
  });

  function checkNoResults() {
    if ($('#items .item:not(.hidden)').length === 0) {
      $('#no-results').show();
    } else {
      $('#no-results').hide();
    }
  }
});

$(function() {
  $('.sort-btn').on('click', function() {
    let sortKey = $(this).data('sort');
    let items = $('#items .item').toArray();

    items.sort(function(a, b) {
      let aValue = $(a).data(sortKey);
      let bValue = $(b).data(sortKey);

      if (sortKey === 'price') {
        return aValue - bValue;
      } else {
        return aValue.localeCompare(bValue);
      }
    });

    // Вставляем элементы в отсортированном порядке
    $('#items').empty().append(items);
  });
});

• Пользователь может фильтровать элементы по категориям

• Можно сортировать элементы по названию или цене

• Результаты отображаются плавно, скрываются без резких скачков

• Если по фильтру нет результатов, показывается сообщение

• Добавь мультивыбор категорий (несколько фильтров одновременно)

• Реализуй переключение между сортировкой по возрастанию и убыванию

• Добавь счётчик отображаемых элементов рядом с фильтрами