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