Хороший видеоурок, спасибо вам большое. Недавно только начал практиковаться на JavaScript, и как раз была идея попробовать сделать фильтр для сайта. Спасибо большое🔥🔥
урок конечно классный, но думаю, что не совсем подойдет для реальных проектов. Представим, что мы получаем данные с бэка о каких то карточках, их может быть хоть сотня. Карточки рендерим на странице, 10 карточек синих, 90 красных. На странице также присутствует чекбокс для фильтрации "только синие". И код предложенный в видео, просто скрывает ненужные карточки, но не удаляет из dom дерева, т.е. все равно идет нагрузка на ресурсы пользователя, как будто он просматривает 100 карточек, а не всего 10 нужных синих. С точки зрения оптимизации будет лучше удалять эти элементы из dom и возвращать, когда чекбокс переходит в состояние инактив. Сугубо мое личное мнение :)
отличный комментарий. а я открыл это чтобы показать начинающему как деалть. хорошо что сначала прочитал комментарий. иначе нацучил бы его не правильному. надо пересматривать сначала видео прежде чем отправлять ссылки ученикам. а так делать совсем нельзя как показано. только полное новое формирование дерева. даже в старые времена так не делалось. это какое-то новшество вредительства.
@@user-super269 добавлять эл-ты динамически через js изначально. Формировать массив эл-тов, потом его сортировать и добавлять уже отсортированный в верстку
Спасибо вам большое! Пишу диплом и это первый ролик по js, в котором у меня действительно все получается, а главное ВСЁ ПОНЯТНО. Когда появлялась мысль "что-то не поняла", вы сразу в этот момент все объясняете подробно. И речь приятная, и, прозвучит странно, но какая-то домашняя спокойная обстановка ощущается и намного легче что-то запоминать. Рада, что наткнулась на этот канал.
Спасибо за урок! Вы очень хорошо объясняете и с юмором) JS трудно даётся, но я стараюсь. У вас на курсы демократические и доступные цены, заметил что большая часть в открытом доступе, но наверное от обратной связи результат не заставит себя ждать. Раньше покупал курсы html,css,js, но в js очень сильно плаваю.
Блин, как ты попал прям! У меня заказ висит, нигде не могу найти годный урок по фильтру товаров! А ты его прям в нужный момент выложил! Спасибо, продолжай практические уроки🙏
@@svetlanabek5533 я думаю в наше время к 98% задач уже есть готовое решение и нужно только уметь нагуглить) Так что можно смело брать любые заказы и делать с гуглом их легко.
@@vitaliy794 Вот вот, при чем даже автор этого канала сам говорил в нескольких роликов, что 90% времени программиста - это поиск информации и готового решения, чтоб уже под себя сделать! А с логикой "зачем брать готовое?" можно и фреймворками не пользоваться 😅
здравствуйте хотел спросить, делал все как по видео, в итоге фильтр работает но есть одна проблема когда применяется фильтр активные блоки не встают на верх, они просто стоят на своем месте как и со всеми блоками, можете помочь пожалуйста
Отличное решение и в тоже время два вопроса# 1. Что будет если у пользователя отключен JS - Просто не увидит этих блоков? 2. Как поисковики будут видеть эти блоки если их содержимое допустим карточки товаров? спасибо!
Как вариант можно добавить тег в контейнер с блоками и в нем прописать display: none ко всем классам кроме выбранного. Тогда не придется перебирать все блоки.
Добрый день, подскажите пожалуйста, а если мне нужно реализовать так. Выборка идёт не по одному классу привязаному к div элементу, а по двум. Например если я ещё добавлю класс. Алгоритм будет работать? Мне нужно, что бы выборка элементов div работала по нескольким мне нужным параметрам.
3:15 Очень маленькая придирка: не логичнее ли было border указывать в .box, а в классах по цветам определять, соответственно, только border-color? Очень режет глаз повторение 3px solid, тем более, что данный интерфейс не предполагает разную ширину и стиль бордера.
Я заметил, что почти везде фильтрация работает через запрос на сервер. Выставили фильтр - отправили запрос - получили ответ - отрисовали. Но этот метод используется в крупных магазинах, а как быть если задача сделать одностраничник для фотографа где будет большая галерея с фотографиями? Допустим 100 фотографий.. Не загружать же их все сразу, я уже всю голову сломал)
У меня есть решение на js , подключаю плагин, инициализирую галерею, и выставляю нужные параметры, кол-во фоток которые грузятся сначала и кнопка по которой можно подгружать следующие партии, если нужно можешь ответить скину исходники
Достаточно часто такое встречается на сайтах, например портфолио галерея, контент-галерея и прочее подобное, я исрользовал для этого mixitup плагин, но самому как оказалось писать всего то ничего)
Херня. Вы видели сам эффект при перестройке элементов? Чтобы такого дерганья не было элементы позиционируют absolute, вычисляют у каждого его будущую позицию и анимируют. После этого absolute убирают.
Чтобы сделать очередной дебильный недомагазин с одной страницей и с тремя товарами, где ничего нет, но то что есть красиво плавает по нажатию мышки. Также должна быть страница "About Us" с фотками спи3жеными с интернета с кикими-то левыми кентами сидящими в пафосных позах. Очень круто...
Спасибо Вам ОГРОМЕННОЕ!!! что так просто и понятно объясняете и разъясняете, что делает каждая строка кода.
👍👍👍у Вас очень разъясняющие и доходчивые уроки. Спасибо за Ваш труд
Святая корова, это то что мне было нужно именно сейчас. Благодарю
круто!
ваши уроки как бальзам на душу, а концовка услада для ушей
Огромное спасибище!
И офигеть, какой стильный пример! Говорю как UXUI дизайнер, который не равнодушен к коду)))))
Всё очень понятно и чётко объясняете. Спасибо!
Просто кайфую от ваших уроков
Хороший видеоурок, спасибо вам большое. Недавно только начал практиковаться на JavaScript, и как раз была идея попробовать сделать фильтр для сайта. Спасибо большое🔥🔥
Очень полезный и хороший видеоурок, спасибо
Я очень благодарен вам!!!! Вы очень крутой учитель!!!!!
урок конечно классный, но думаю, что не совсем подойдет для реальных проектов. Представим, что мы получаем данные с бэка о каких то карточках, их может быть хоть сотня. Карточки рендерим на странице, 10 карточек синих, 90 красных. На странице также присутствует чекбокс для фильтрации "только синие". И код предложенный в видео, просто скрывает ненужные карточки, но не удаляет из dom дерева, т.е. все равно идет нагрузка на ресурсы пользователя, как будто он просматривает 100 карточек, а не всего 10 нужных синих. С точки зрения оптимизации будет лучше удалять эти элементы из dom и возвращать, когда чекбокс переходит в состояние инактив. Сугубо мое личное мнение :)
подскажете как это сделать?
@@user-super269 а как вернуть если их удалил ?
отличный комментарий. а я открыл это чтобы показать начинающему как деалть. хорошо что сначала прочитал комментарий. иначе нацучил бы его не правильному. надо пересматривать сначала видео прежде чем отправлять ссылки ученикам. а так делать совсем нельзя как показано. только полное новое формирование дерева. даже в старые времена так не делалось. это какое-то новшество вредительства.
@@maximpopov4106 точно так же, как и удалил) через insertAdjacent рендеришь отфильтрованные, когда фильтра нет, рендеришь весь массив
@@user-super269 добавлять эл-ты динамически через js изначально. Формировать массив эл-тов, потом его сортировать и добавлять уже отсортированный в верстку
Супер объяснение, спасибо за урок, помогли))
Огромное Вам спасибо!
Классный урок!
оочень помогли,огромное спасибо!
mega kruto! Spasibo!
Спасибо вам большое!
Пишу диплом и это первый ролик по js, в котором у меня действительно все получается, а главное ВСЁ ПОНЯТНО. Когда появлялась мысль "что-то не поняла", вы сразу в этот момент все объясняете подробно. И речь приятная, и, прозвучит странно, но какая-то домашняя спокойная обстановка ощущается и намного легче что-то запоминать. Рада, что наткнулась на этот канал.
Александр, спасибо вам большое!!! Очень интересные и хорошо раскрытые у вас уроки!!!
Очень красиво))))
Спасибо, отличный пример, отличный урок)) Добавляем классу box еще анимацию на плавное появление и вообще то, что нужно!
Здравствуйте! Все отлично! Объясняете доступно и доходчиво. Не мне судить, но оценка 5+++++++. Еще раз спасибо за урок.
Спасибо огромное!!!
Дякую, знайшов, що треба було.
Просто шикарно
воооо годнота подехала больше больше Jsa Александр
это шедевр
Спасибо за урок! Вы очень хорошо объясняете и с юмором) JS трудно даётся, но я стараюсь. У вас на курсы демократические и доступные цены, заметил что большая часть в открытом доступе, но наверное от обратной связи результат не заставит себя ждать. Раньше покупал курсы html,css,js, но в js очень сильно плаваю.
Спасибо большое
спасибо 😊
вот еще один канал где предоставляют актуальную и адекватную информацию . спасибо вам за это большое
Если ещё один, то тогда какой первый? ))
Можно наверное toggle использовать, чтобы включать и выключать hide элементов?
Очень полезное видео, у меня была задача отфильтровать без использования Jquery
Пока не все понятно😁 но фильтр сделал, все работает. Спасибо.
Блин, как ты попал прям! У меня заказ висит, нигде не могу найти годный урок по фильтру товаров! А ты его прям в нужный момент выложил! Спасибо, продолжай практические уроки🙏
Заказы берёшь и не знаешь как сделать? А если никто не выложит решение? Что делать?
@@svetlanabek5533 самому решать, мне просто повезло, что он выложил. Он не сделал работу за меня, он её облегчил.
@@svetlanabek5533 я думаю в наше время к 98% задач уже есть готовое решение и нужно только уметь нагуглить) Так что можно смело брать любые заказы и делать с гуглом их легко.
@@vitaliy794 Вот вот, при чем даже автор этого канала сам говорил в нескольких роликов, что 90% времени программиста - это поиск информации и готового решения, чтоб уже под себя сделать!
А с логикой "зачем брать готовое?" можно и фреймворками не пользоваться 😅
Круто! Продолжай в том же духе 👍
Самый лучший
Респект
Офигенно обажаю ваши видео уроки все все понятно объесьняете
Всё круто
А как сделать, чтобы элементы исчезали при клике на самом прямоугольнике, а не на слове в навигации?
здравствуйте хотел спросить, делал все как по видео, в итоге фильтр работает но есть одна проблема когда применяется фильтр активные блоки не встают на верх, они просто стоят на своем месте как и со всеми блоками, можете помочь пожалуйста
А можно сделать не категории а метки, и что бы у каждой карточки было несколько меток?
Благодарю Вас за видео.
Увы, сейчас чтобы джуном по JS стать надо еще вчера было быть миддлом, на вакансии посмотри, так там под десяток технологий знать надо
Отличное решение и в тоже время два вопроса#
1. Что будет если у пользователя отключен JS - Просто не увидит этих блоков?
2. Как поисковики будут видеть эти блоки если их содержимое допустим карточки товаров?
спасибо!
Спасибо. То что надо
Как вариант можно добавить тег в контейнер с блоками и в нем прописать display: none ко всем классам кроме выбранного. Тогда не придется перебирать все блоки.
можно, но анимации при исчезновений не будет, слишком громоздко будут изчезать
А как прописать, что бы было кроме выбранного?
А можно ссылку на код?, у меня дивы по центру стоят, они не переходят влево страницы
А как реализовать множественный выбор?
Не работает класс hide (хотя и добавляется в класс, который должен удаляться). Оч долго бьюсь над этой проблемой. Прошу помощи.
Добрый день, подскажите пожалуйста, а если мне нужно реализовать так. Выборка идёт не по одному классу привязаному к div элементу, а по двум. Например если я ещё добавлю класс. Алгоритм будет работать? Мне нужно, что бы выборка элементов div работала по нескольким мне нужным параметрам.
Здравствуйте, получилось найти решение?
Без раздумий подписка
Зачем вы вручную код правите? Расскажите новичкам про prettier, вы же явно используете что-то такое на проектах или просто vscode расширение
Я бы с удовольствием посмотрел на реализацию фильтров через url(что бы фильтр настройки не сбрасывались) и с фейковыми данными(а не статика)
хорошая идея
Маю завдання зробити фільтер як у сайта розетка. Як це зробити ?
как называется приложение на котором вы пишите сайты?
Там же написано, визуал студия
А обработчик может остановить событие?
Можно сделать фильтр для динамически созданных элементов?
Да можно
@@itgid спасибо
Нормально ли будет работать в других браузерах? Не проще ли взять готовую библиотеку?
GRANDMASTER вы путаете продакшен и обучение.
Понял
Здравствуйте, курс JS v2.0 Ещё актуален? Менторство ещё идет?
Да 🍒 ✌
@@ja-rusyn Спустя пол года....))))))
3:15 Очень маленькая придирка: не логичнее ли было border указывать в .box, а в классах по цветам определять, соответственно, только border-color?
Очень режет глаз повторение 3px solid, тем более, что данный интерфейс не предполагает разную ширину и стиль бордера.
Планируете ли вести обучения на симуляторах? Вроде Мате Академия и Яндекс Практикум.
А что с курсом и телегой, почему нет ни того ни другого?
Все есть.
Itgid.info
Просто если вы с рф или рб то ваши провайдеры блокируют. Почему - к ним вопросы
@@itgid не получается, хотел скачать пример, пишет файл не найден
А как сделать, чтобы при нажатии all тоже была анимация?
Что делать если нужен display none, но и анимация осталась ?
Ничего, display не работает с анимацией
Сначала убирать с анимацией, а потом добавлять с задержкой к этим элементам новый класс с display:none
@@UchVuch азахах парни, ну вы чего) уже 2 года прошло, уже знаю)
Ничего, display не работает с анимацией
Я заметил, что почти везде фильтрация работает через запрос на сервер. Выставили фильтр - отправили запрос - получили ответ - отрисовали. Но этот метод используется в крупных магазинах, а как быть если задача сделать одностраничник для фотографа где будет большая галерея с фотографиями? Допустим 100 фотографий.. Не загружать же их все сразу, я уже всю голову сломал)
У меня есть решение на js , подключаю плагин, инициализирую галерею, и выставляю нужные параметры, кол-во фоток которые грузятся сначала и кнопка по которой можно подгружать следующие партии, если нужно можешь ответить скину исходники
Сейчас пилю сайт для своих плагинов что бы люди могли их качать спокойно
@@awenn2015 и как успехи, запилил сайт? :)
8:58
Красиво но бессмысленно. Где это реально можно применить?
на простых страницах где фильтрацию можно делать на клиенте.
Достаточно часто такое встречается на сайтах, например портфолио галерея, контент-галерея и прочее подобное, я исрользовал для этого mixitup плагин, но самому как оказалось писать всего то ничего)
Мне кажется, что было бы проще сделать генерацию элементов через JS или же реализовать названия классов по БЭМ.
сделай, поделись с комюнити, а мы зайдём и поставим тебе upvotes
Херня. Вы видели сам эффект при перестройке элементов? Чтобы такого дерганья не было элементы позиционируют absolute, вычисляют у каждого его будущую позицию и анимируют. После этого absolute убирают.
а можно пример ?
Чтобы сделать очередной дебильный недомагазин с одной страницей и с тремя товарами, где ничего нет, но то что есть красиво плавает по нажатию мышки. Также должна быть страница "About Us" с фотками спи3жеными с интернета с кикими-то левыми кентами сидящими в пафосных позах. Очень круто...