Панель фильтров с чипсами
Условие
Фильтры по группам { id, title, options: [{ value, label }] }. Требования: · выбор - <button class="opt" data-value>, выбранный получает класс "on"; · выбранные показываются чипсами <span class="chip" data-chip> с кнопкой <button class="remove"> внутри; · <button class="clear"> сбрасывает всё и скрыта, когда ничего не выбрано; · внутри группы можно выбрать несколько значений; · onChange(объект вида { группа: [значения] }) при каждом изменении; · счётчик выбранного - <span class="total">.
Что проверяют тесты
ничего не выбрано
выбор создаёт чипс
несколько значений в группе
повторный клик снимает
крестик на чипсе снимает выбор
сброс убирает всё
наружу уходит объект без пустых групп
Как подойти
Задача про производные состояния и единственный источник правды: чипсы, счётчик, подсветка кнопок и видимость сброса - всё выводится из одного объекта выбора. Чистка пустых групп важна для того, кто получает результат: ключ с пустым массивом это не то же самое, что отсутствие фильтра, и в запрос он поедет мусором. Одна функция переключения на кнопку и на крестик убирает дублирование логики. Что назвать вслух: синхронизация с адресной строкой, подсчёт количества результатов рядом с каждым значением, ленивая подгрузка списка значений, доступность группы как fieldset.
Подсказки: 3
- Состояние - объект «группа → массив значений», всё остальное выводится.
- Пустые группы надо вычищать, иначе наружу поедут ключи с пустыми массивами.
- Чипс и кнопка выбора вызывают одну и ту же функцию переключения.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.