Делаем фильтр контента на JavaScript

[@sneakykickz]

Огромное спасибище! И офигеть, какой стильный пример! Говорю как UXUI дизайнер, который не равнодушен к коду)))))

[@moore4446]

Спасибо вам большое! Пишу диплом и это первый ролик по js, в котором у меня действительно все получается, а главное ВСЁ ПОНЯТНО. Когда появлялась мысль "что-то не поняла", вы сразу в этот момент все объясняете подробно. И речь приятная, и, прозвучит странно, но какая-то домашняя спокойная обстановка ощущается и намного легче что-то запоминать. Рада, что наткнулась на этот канал.

[@cg_man]

Святая корова, это то что мне было нужно именно сейчас. Благодарю

[@itgid]

круто!

[@heyter1579]

ваши уроки как бальзам на душу, а концовка услада для ушей

[@mtanasov]

👍👍👍у Вас очень разъясняющие и доходчивые уроки. Спасибо за Ваш труд

[@MariIloveREALmusic]

Спасибо Вам ОГРОМЕННОЕ!!! что так просто и понятно объясняете и разъясняете, что делает каждая строка кода.

[@aliskhankhutiev]

Всё очень понятно и чётко объясняете. Спасибо!

[@Asver_]

Александр, спасибо вам большое!!! Очень интересные и хорошо раскрытые у вас уроки!!!

[@khamidakhmedov248]

Просто кайфую от ваших уроков

[@СабинаАгамогланова]

Очень полезный и хороший видеоурок, спасибо

[@khamidakhmedov248]

Я очень благодарен вам!!!! Вы очень крутой учитель!!!!!

[@ВладимирЗлатомрезов]

вот еще один канал где предоставляют актуальную и адекватную информацию . спасибо вам за это большое

[@Learn-Dev_]

Если ещё один, то тогда какой первый? ))

[@gorkachannel7988]

урок конечно классный, но думаю, что не совсем подойдет для реальных проектов. Представим, что мы получаем данные с бэка о каких то карточках, их может быть хоть сотня. Карточки рендерим на странице, 10 карточек синих, 90 красных. На странице также присутствует чекбокс для фильтрации "только синие". И код предложенный в видео, просто скрывает ненужные карточки, но не удаляет из dom дерева, т.е. все равно идет нагрузка на ресурсы пользователя, как будто он просматривает 100 карточек, а не всего 10 нужных синих. С точки зрения оптимизации будет лучше удалять эти элементы из dom и возвращать, когда чекбокс переходит в состояние инактив. Сугубо мое личное мнение :)

[@user-super269]

подскажете как это сделать?

[@maximpopov4106]

@@user-super269 а как вернуть если их удалил ?

[@romanmed9035]

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

[@gorkachannel7988]

@@maximpopov4106 точно так же, как и удалил) через insertAdjacent рендеришь отфильтрованные, когда фильтра нет, рендеришь весь массив

[@ЕвгенияОдесса-у8и]

@@user-super269 добавлять эл-ты динамически через js изначально. Формировать массив эл-тов, потом его сортировать и добавлять уже отсортированный в верстку

[@antonromanov1347]

Хороший видеоурок, спасибо вам большое. Недавно только начал практиковаться на JavaScript, и как раз была идея попробовать сделать фильтр для сайта. Спасибо большое🔥🔥

[@ivansafronov3359]

Блин, как ты попал прям! У меня заказ висит, нигде не могу найти годный урок по фильтру товаров! А ты его прям в нужный момент выложил! Спасибо, продолжай практические уроки🙏

[@svetlanabek5533]

Заказы берёшь и не знаешь как сделать? А если никто не выложит решение? Что делать?

[@ivansafronov3359]

@@svetlanabek5533 самому решать, мне просто повезло, что он выложил. Он не сделал работу за меня, он её облегчил.

[@vitaliy794]

@@svetlanabek5533 я думаю в наше время к 98% задач уже есть готовое решение и нужно только уметь нагуглить) Так что можно смело брать любые заказы и делать с гуглом их легко.

[@ivansafronov3359]

@@vitaliy794 Вот вот, при чем даже автор этого канала сам говорил в нескольких роликов, что 90% времени программиста - это поиск информации и готового решения, чтоб уже под себя сделать! А с логикой "зачем брать готовое?" можно и фреймворками не пользоваться 😅

[@windcrack8404]

Дякую, знайшов, що треба було.

[@pavelrumyantsev626]

Здравствуйте! Все отлично! Объясняете доступно и доходчиво. Не мне судить, но оценка 5+++++++. Еще раз спасибо за урок.

[@_fulgrim_9865]

Супер объяснение, спасибо за урок, помогли))

[@МундштукВезучий]

Спасибо, отличный пример, отличный урок)) Добавляем классу box еще анимацию на плавное появление и вообще то, что нужно!

[@chev_chelios]

Классный урок!

[@MihailAleshkin]

Как вариант можно добавить тег в контейнер с блоками и в нем прописать display: none ко всем классам кроме выбранного. Тогда не придется перебирать все блоки.

[@heyter1579]

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

[@alexey1946]

А как прописать, что бы было кроме выбранного?

[@filipcorina]

mega kruto! Spasibo!

[@siyisa13]

это шедевр

[@MaximPistun]

Просто шикарно

[@unique_mind_system]

Спасибо за урок! Вы очень хорошо объясняете и с юмором) JS трудно даётся, но я стараюсь. У вас на курсы демократические и доступные цены, заметил что большая часть в открытом доступе, но наверное от обратной связи результат не заставит себя ждать. Раньше покупал курсы html,css,js, но в js очень сильно плаваю.

[@diasoralbekov6465]

оочень помогли,огромное спасибо!

[@AlexsandrPierierodov]

Пока не все понятно😁 но фильтр сделал, все работает. Спасибо.

[@nodirtashkuvatov]

Спасибо огромное!!!

[@glebkabayjanov5646]

воооо годнота подехала больше больше Jsa Александр

[@serg1221]

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

[@kirkir5533]

Я бы с удовольствием посмотрел на реализацию фильтров через url(что бы фильтр настройки не сбрасывались) и с фейковыми данными(а не статика)

[@itgid]

хорошая идея

[@leto0leg]

Можно наверное toggle использовать, чтобы включать и выключать hide элементов?

[@romanvinichenko1910]

Очень полезное видео, у меня была задача отфильтровать без использования Jquery

[@АлексейСветлович-в2у]

Очень красиво))))

[@nodirayakubova6395]

Офигенно обажаю ваши видео уроки все все понятно объесьняете

[@Makspachino]

А можно сделать не категории а метки, и что бы у каждой карточки было несколько меток?

[@alexshkodin-lu8yf]

Добрый день , можно ли как то сделать такой же фильтр только без all , через плагин изотоп я не нашел как сделать , только через php и sql?

[@geek7807]

3:15 Очень маленькая придирка: не логичнее ли было border указывать в .box, а в классах по цветам определять, соответственно, только border-color? Очень режет глаз повторение 3px solid, тем более, что данный интерфейс не предполагает разную ширину и стиль бордера.

[@el_grey]

Без раздумий подписка

[@АлександрМилюков-з6ц]

А как реализовать множественный выбор?

[@МаксимСушко-л7о]

спасибо 😊

[@jaloliddinhaqnazarov2667]

Самый лучший

[@vasyarebryk9102]

Маю завдання зробити фільтер як у сайта розетка. Як це зробити ?

[@KirillKlimov_lds]

А как сделать, чтобы элементы исчезали при клике на самом прямоугольнике, а не на слове в навигации?

[@ВасилийДячук-е4ь]

Добрый день! А ссылка на скачку кода не работает. Обновите пожалуйста)

[@HackOFF]

Отличное решение и в тоже время два вопроса# 1. Что будет если у пользователя отключен JS - Просто не увидит этих блоков? 2. Как поисковики будут видеть эти блоки если их содержимое допустим карточки товаров? спасибо!

[@IgorBobyrev]

1. Процентов 95 сайтов имеют JS-навигацию. Пользователю привет! 2. Когда добавляешь карточки (из бека или просто кодом), ставишь мета-теги определенные для каждой карточки. В DOM они есть, так что поисковики их будут индексировать

[@asdasd-iv2ik]

А можно ссылку на код?, у меня дивы по центру стоят, они не переходят влево страницы

[@DioNis-eblix]

Добрый день, подскажите пожалуйста, а если мне нужно реализовать так. Выборка идёт не по одному классу привязаному к div элементу, а по двум. Например если я ещё добавлю класс. Алгоритм будет работать? Мне нужно, что бы выборка элементов div работала по нескольким мне нужным параметрам.

[@ВіталікФедорчук-п4н]

Здравствуйте, получилось найти решение?

[@q1dsdsdsq2dssdsd95]

Зачем вы вручную код правите? Расскажите новичкам про prettier, вы же явно используете что-то такое на проектах или просто vscode расширение

[@stalk4736]

Можно сделать фильтр для динамически созданных элементов?

[@itgid]

Да можно

[@stalk4736]

@@itgid спасибо

[@ФедяМинов]

Спасибо. То что надо

[@ИгорьГорбунов-ю9ж]

Благодарю Вас за видео.

[@khamidakhmedov248]

Респект

[@enterkvas]

Не работает класс hide (хотя и добавляется в класс, который должен удаляться). Оч долго бьюсь над этой проблемой. Прошу помощи.

[@IgorBobyrev]

поставь !important

[@4chan355]

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

[@IgorBobyrev]

Он вначале сказал: нужно всем блокам в CSS задать свойство "inline-block". Блоки получаются как текст внутри блока. Они автоматически встанут наверх и переверстаются

[@flickeru8877]

А что с курсом и телегой, почему нет ни того ни другого?

[@itgid]

Все есть. Itgid.info Просто если вы с рф или рб то ваши провайдеры блокируют. Почему - к ним вопросы

[@nik_user75]

@@itgid не получается, хотел скачать пример, пишет файл не найден

[@aquilon1790]

Я заметил, что почти везде фильтрация работает через запрос на сервер. Выставили фильтр - отправили запрос - получили ответ - отрисовали. Но этот метод используется в крупных магазинах, а как быть если задача сделать одностраничник для фотографа где будет большая галерея с фотографиями? Допустим 100 фотографий.. Не загружать же их все сразу, я уже всю голову сломал)

[@awenn2015]

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

[@awenn2015]

Сейчас пилю сайт для своих плагинов что бы люди могли их качать спокойно

[@UchVuch]

@@awenn2015 и как успехи, запилил сайт? :)

[@шарлатан-ъ4с]

как называется приложение на котором вы пишите сайты?

[@green8106]

Там же написано, визуал студия

[@КурашовЕвгений-н3ю]

Круто! Продолжай в том же духе 👍

[@ryadik_live]

Здравствуйте, курс JS v2.0 Ещё актуален? Менторство ещё идет?

[@ja-rusyn]

Да 🍒 ✌

[@СусловРостислав]

@@ja-rusyn Спустя пол года....))))))

[@plajboi3608]

Что делать если нужен display none, но и анимация осталась ?

[@awenn2015]

Ничего, display не работает с анимацией

[@UchVuch]

Сначала убирать с анимацией, а потом добавлять с задержкой к этим элементам новый класс с display:none

[@plajboi3608]

@@UchVuch азахах парни, ну вы чего) уже 2 года прошло, уже знаю)

[@deterkot]

Ничего, display не работает с анимацией

[@grandmaster5318]

Нормально ли будет работать в других браузерах? Не проще ли взять готовую библиотеку?

[@itgid]

GRANDMASTER вы путаете продакшен и обучение.

[@grandmaster5318]

Понял

[@IgorBobyrev]

JS работает везде абсолютно. Но для продакшна нужно пользоваться поиском по бд через бек

[@eugeneshiyan]

Всё круто

[@Game-oz6gg]

А обработчик может остановить событие?

[@IgorBobyrev]

В смысле? Когда оно произошло, оно уже остановилось. Не отслеживать больше? Remove event listener

[@саксасксон]

Планируете ли вести обучения на симуляторах? Вроде Мате Академия и Яндекс Практикум.

[@МихайлоПензюр]

8:58

[@nikolaydd6219]

Красиво но бессмысленно. Где это реально можно применить?

[@itgid]

на простых страницах где фильтрацию можно делать на клиенте.

[@valerasho5874]

Достаточно часто такое встречается на сайтах, например портфолио галерея, контент-галерея и прочее подобное, я исрользовал для этого mixitup плагин, но самому как оказалось писать всего то ничего)

[@ТестТестович-в8я]

Херня. Вы видели сам эффект при перестройке элементов? Чтобы такого дерганья не было элементы позиционируют absolute, вычисляют у каждого его будущую позицию и анимируют. После этого absolute убирают.

[@evgeniyprowork]

а можно пример ?

[@vll1976]

Чтобы сделать очередной дебильный недомагазин с одной страницей и с тремя товарами, где ничего нет, но то что есть красиво плавает по нажатию мышки. Также должна быть страница "About Us" с фотками спи3жеными с интернета с кикими-то левыми кентами сидящими в пафосных позах. Очень круто...

[@IgorBobyrev]

а у тебя все по рабоче-крестьянски, но работает через php, да? Из чего ты делаешь вывод что у тебя магазин не дебильный

[@rogaldorn7016]

Мне кажется, что было бы проще сделать генерацию элементов через JS или же реализовать названия классов по БЭМ.

[@ticheroi]

сделай, поделись с комюнити, а мы зайдём и поставим тебе upvotes

[@IgorBobyrev]

Это гораздо сложнее. Я делал такое, когда делал корзину товаров. Короче, генеришь в ней кликнутые товары, запоминаешь в localstorage, а после еще надо их удалять. Это классы JS надо использовать

[@enterkvas]

Огромное Вам спасибо!

[@РитаАрхипова-ц4ч]

Спасибо большое