KrooBeet - JavaScript Challenge | Выпуск #8
Друзья, я вновь рад приветствовать вас.
В этом выпуске будем делать функционал фильтра, для магазина сладостей. Так как были небольшие трудности. Я ещё не реализовал фильтр по поиску. Но фильтр по кнопкам меню работает, как и должно.
Так же была задачка сделать подвижный border для главной картинки на сайте. Это я тоже реализовал через JS.
Давайте по традиции посмотрим, что вас ждёт в этом выпуске.
У нас есть магазин, в котором продают сладости. Нужно сделать так, чтобы можно было отобразить определённые товары. В этом нам поможет фильтр.
В HTML добавим data- атрибуты, в которых, для каждого товара будем хранить его категорию, название и стоимость.
Функционал border:
Здесь есть две функции move() и out(), которые отвечают за инструкции, когда у нас курсор мышки наведён на главную картинку и выходит за границы картинки соответственно.
Функционал фильтра меню:
Тут уже дела по сложнее. Первым делом, необходимо отобразить названия и стоимость продуктов. В этом нам поможет цикл for и свойство dataset, которое будет получать значения из data- атрибутов и устанавливать их в соответствующие места с помощью innerHTML
Далее сделаем функцию getId(), которая будет получать id элемента меню, чтобы дальше работать с товарами имеющимися на сайте.
Но это ещё далеко не всё. В самом HTML документе отсутствует событие, по которому мы бы смогли получить этот самый id. Поэтому нам нужно это событие создать. Воспользуемся делегированием событий через анонимную функцию, в которую передадим само событие.
id получили, что же дальше? Ну, теперь нужно получить список продуктов. создадим функцию getProducts(), которая создаст массив из всех имеющихся на сайте продуктов и добавим этот массив в переменную var products, с которой будем далее работать и в других функциях
Так-с, продукты есть, id элементов меню - тоже. Что же дальше?
Отобразим продукты функцией showItems(id), которая, как вы видите, принимает параметр id полученный ранее. Как раз функция getId будет возвращать нам результат функции showItems(id)
Функция showItems(id) в свою очередь выглядит примерно так:
В ней есть массив из товаров магазина
И вызов функции changeStyle(products,id) которая является циклом, обрабатывающим id и сам массив products, и используя условную конструкцию if-else if-else - присваивает соответствующие стили (скрывает или показывает товары, в зависимости от выполняемых условий)
Из описания, наверное, ничего не понятно. Это не страшно. Я предлагаю вам перейти к просмотру видео. Там я объясню нагляднее.
Задавайте интересующие вас вопросы по этому выпуску. При необходимости запишу отдельное видео.
Так же хочу сообщить вам, что у этого выпуска будет продолжение, в котором я покажу, как реализовал фильтр по поиску. Так скажем, выпуск №8.1
Приятного просмотра 😉
Ссылки:
VK: https://vk.com/kroobeet/
Facebook: / kroobeet
Twitter: / kroobeet
Instagram: / kroobeet
YouTube: https://clck.ru/QpZPb
GitHub:
https://github.com/kroobeet/js-apps-p...
Теги
#kroobeet #javascript #challenge