Мяу! Психологи рекомендуют ограничить потребление контента, поэтому сегодня я буду читать новости только про игры. На сайте нужен фильтр.

С психологами и Кексом не поспоришь, а значит, будем делать фильтр новостей. Верстальщик добавил на страницу раскрывающийся список, или «селект», в котором перечислены категории новостей. Когда пользователь выбирает категорию из списка, на странице должны остаться новости только из этой категории. Если выбрана опция «Все новости», то показать нужно новости из всех категорий.

Чтобы сделать фильтрацию, мы должны найти все новости на странице и сравнить категорию каждой из них с выбранным значением фильтра. Если они совпадают или если выбрана опция «Все новости», то новость нужно оставить на странице. А если категория новости и значение фильтра не совпадают, то новость нужно спрятать.

Такой способ сделать фильтрацию подходит, если значения фильтра и элементы, которые надо фильтровать, находятся прямо в разметке. Помните, что не существует универсальных решений, всё зависит от конкретной ситуации.

Итак, за дело!

Все новости на главной странице сайта имеют класс news-block. Найдём их и запишем полученную коллекцию в переменную. Убедимся, что нашли все новости — добавим всем элементам в коллекции временную подсветку и проверим, что она появилась у каждой новости на странице.

За подсветку отвечает класс highlight. Используем цикл for of, чтобы добавить его каждому элементу коллекции. В будущем мы используем этот класс, чтобы подсвечивать новости из разных категорий. Это облегчит отладку кода.