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