Фильтр товаров на JavaScript за 30 минут с кодом

preview_player
Показать описание

🫶 Поблагодарить автора - монобанк: 5375414126666006 Лущенко О

Курсы автора:

  1. WebDev с нуля. Канал Алекса Лущенко
  2. itgid
  3. javascript фильтр товаров
  4. фильтр товаров
  5. javascript фильтр
  6. javascript фильтр товаров с хешем
Рекомендации по теме
Фильтр товаров на 0:29:36

Фильтр товаров на JavaScript за 30 минут с кодом

Простой фильтр на 0:11:53

Простой фильтр на чистом JavaScript. HTML / CSS / JS

Сортировка товаров магазина 0:31:44

Сортировка товаров магазина на JavaScript

JS Filter | 0:06:17

JS Filter | фильтр в javascript | Mario Dev

ПРАКТИКА! JAVASCRIPT ПРОГРАММИРОВАНИЕ 5:00:08

ПРАКТИКА! JAVASCRIPT ПРОГРАММИРОВАНИЕ ДЛЯ НОВИЧКОВ! - Поиск и фильтрация товаров...

Как магазины хранят 0:16:50

Как магазины хранят фильтры в URL? Плюс разбор и процентная нотация!...

Фильтр на чистом 0:05:49

Фильтр на чистом JavaScript. Native js Filter

JavaScript JS. Фильтр 0:08:13

JavaScript JS. Фильтр одномерного и двумерного массива ( filter )....

JS-плагины №11. Masonry-сетка 0:21:30

JS-плагины №11. Masonry-сетка с сортировкой и фильтрацией - izotope.js...

#9: 🍕 React 1:07:37

#9: 🍕 React Pizza v2 — Делаем функционал сортировки и фильтрации пицц...

Поисковой фильтр в 0:05:22

Поисковой фильтр в реакт проекте? 🔍 | Как сделать живой поиск на Javascript...

Курс JavaScript ES6-классы. 0:09:19

Курс JavaScript ES6-классы. 04. Компонент 'Каталог товаров' (Отображение товаров)...

Фильтр обьектов в 0:04:52

Фильтр обьектов в массиве React за 5 минут

React JS - 1:43:25

React JS - Фильтрация каталога , Создание проекта Allegri (4)

JavaScript - создаем 0:24:59

JavaScript - создаем динамический поиск (используем события js, fetch, map, filter, forEach, regex)...

Практика React JS 0:13:59

Практика React JS #7 – Фильтрация товаров

filter html table 0:09:50

filter html table using javascript Фильтрация HTML таблицы на JavaScript finish

TrueJS 15. Метод 0:08:16

TrueJS 15. Метод filter для массивов в JS

JS-плагины №10. Range 0:35:24

JS-плагины №10. Range слайдер для цены - nouislider.js

JavaScript Filter, практика 0:15:03

JavaScript Filter, практика - помогаем коллекторам

JavaScript практика. Search 0:21:45

JavaScript практика. Search Menu | Фильтр элементов на JS

[JS] Фильтр Массивов 0:09:18

[JS] Фильтр Массивов в JavaScript

UI-компоненты №3. Корзина 1:06:49

UI-компоненты №3. Корзина товаров на чистом JS

#15 Разработка интернет-магазина 0:24:39

#15 Разработка интернет-магазина на Laravel. Фильтрация товаров AJAX....

Комментарии
Автор

Спасибо большое! Как раз хотел научиться делать фильтр на js. Вы вовремя)

Chelovek-mu
Автор

Постоянно вижу эти годные видео у себя в подписках, но так и не нахожу время посмотреть) лень губит

elkazmakaz
Автор

Дякую за урок!
А є урок з більш складним фільтром для інтернет-магазину, з фільтрацією по ціні, даті і т.д. ?

ИринаСвятецкая-хе
Автор

Наверно лучше было бы создать json со списком объектов
Получить его через фетч, для иммитации бэка
Сохранить список в переменную и уже его фильтровать и мапить из него в ui
Так было бы более приближенно к реальном кейсам, мне кажется

Stazzz
Автор

Дякую! У мене зберігається і "перший фільтр" і цей з задоволенням додала до корисних нотаток. Буду використовувати

sadivnytsia
Автор

Александр, здравствуйте! Можно сортировку сделать через атрибут data-color в тегах html. И через условное выражение сравнивать по цвету, если равны, то показывем их. Код где-то на 4 строки.

disc
Автор

для флекс-контейнера есть свойство gap:; которое устанавливает отступы между элементами. так же есть калькулятивные свойства padding и margin для страниц с направлениями справа-налево(арабская вязь) и сверху вниз(японский язык)
padding-left => padding-iniline-start
padding-right => padding-iniline-end
padding-top => padding-block-start
padding-bottom => padding-block-end
для margin меняем в примере выше padding на margin
с точки зрения семантики написание стилей для тегов - плохой тон, всегда используйте классы иначе можете выстрелить себе в ногу в продуктовой верстке
в моменте с бордерами ты для каждого класса перезаписываешь значение границ это увеличивает время рендеринга страницы можно было для класса .box написать border: 3px solid; а уже остальными классами делать border-color;
по скрипту: слишком большие функции, функции должны быть тупыми и описывать одно действие
добавление обработчика на элемент без записи этого элемента в переменную плохой тон


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

Автор, пожалуйста соблюдай чистоту кода при написании туториалов, не плоди безграмотных верстаков, они будут неуверенными в себе после первого же ревью такого кода в продуктовой команде

leonidilinskiy
Автор

По Хомо комбат, у вас есть какие нибудь совети?

ГеннадийТвердохлеб-пт