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

  Рет қаралды 56,703

WebDev с нуля. Канал Алекса Лущенко

WebDev с нуля. Канал Алекса Лущенко

4 жыл бұрын

Мой сайт itgid.info/
Курс JS 2.0 itgid.info/course/javascript-2
Чат t.me/jsrules
Скачать код: itgid.info/article/view?artic...
Делаем фильтры контента на JavaScript

Пікірлер: 106
@MariIloveREALmusic
@MariIloveREALmusic 3 жыл бұрын
Спасибо Вам ОГРОМЕННОЕ!!! что так просто и понятно объясняете и разъясняете, что делает каждая строка кода.
@cg_man
@cg_man 4 жыл бұрын
Святая корова, это то что мне было нужно именно сейчас. Благодарю
@itgid
@itgid 4 жыл бұрын
круто!
@mtanasov
@mtanasov Жыл бұрын
👍👍👍у Вас очень разъясняющие и доходчивые уроки. Спасибо за Ваш труд
@antonromanov1347
@antonromanov1347 2 жыл бұрын
Хороший видеоурок, спасибо вам большое. Недавно только начал практиковаться на JavaScript, и как раз была идея попробовать сделать фильтр для сайта. Спасибо большое🔥🔥
@sneakykickz
@sneakykickz 2 жыл бұрын
Огромное спасибище! И офигеть, какой стильный пример! Говорю как UXUI дизайнер, который не равнодушен к коду)))))
@assalamualeykum1028
@assalamualeykum1028 Жыл бұрын
Всё очень понятно и чётко объясняете. Спасибо!
@heyter1579
@heyter1579 4 жыл бұрын
ваши уроки как бальзам на душу, а концовка услада для ушей
@user-jr7ny5pm1y
@user-jr7ny5pm1y 3 жыл бұрын
Очень полезный и хороший видеоурок, спасибо
@Asver_
@Asver_ 4 жыл бұрын
Александр, спасибо вам большое!!! Очень интересные и хорошо раскрытые у вас уроки!!!
@khamidakhmedov248
@khamidakhmedov248 4 жыл бұрын
Просто кайфую от ваших уроков
@khamidakhmedov248
@khamidakhmedov248 4 жыл бұрын
Я очень благодарен вам!!!! Вы очень крутой учитель!!!!!
@moore4446
@moore4446 2 жыл бұрын
Спасибо вам большое! Пишу диплом и это первый ролик по js, в котором у меня действительно все получается, а главное ВСЁ ПОНЯТНО. Когда появлялась мысль "что-то не поняла", вы сразу в этот момент все объясняете подробно. И речь приятная, и, прозвучит странно, но какая-то домашняя спокойная обстановка ощущается и намного легче что-то запоминать. Рада, что наткнулась на этот канал.
@_fulgrim_9865
@_fulgrim_9865 2 жыл бұрын
Супер объяснение, спасибо за урок, помогли))
@user-rv9zc6di1z
@user-rv9zc6di1z 4 жыл бұрын
Спасибо, отличный пример, отличный урок)) Добавляем классу box еще анимацию на плавное появление и вообще то, что нужно!
@pavelrumyantsev626
@pavelrumyantsev626 3 жыл бұрын
Здравствуйте! Все отлично! Объясняете доступно и доходчиво. Не мне судить, но оценка 5+++++++. Еще раз спасибо за урок.
@unique_mind_system
@unique_mind_system 3 жыл бұрын
Спасибо за урок! Вы очень хорошо объясняете и с юмором) JS трудно даётся, но я стараюсь. У вас на курсы демократические и доступные цены, заметил что большая часть в открытом доступе, но наверное от обратной связи результат не заставит себя ждать. Раньше покупал курсы html,css,js, но в js очень сильно плаваю.
@diasoralbekov6465
@diasoralbekov6465 3 жыл бұрын
оочень помогли,огромное спасибо!
@filipcorina
@filipcorina 3 жыл бұрын
mega kruto! Spasibo!
@enterkvas
@enterkvas Жыл бұрын
Огромное Вам спасибо!
@gorkachannel7988
@gorkachannel7988 Жыл бұрын
урок конечно классный, но думаю, что не совсем подойдет для реальных проектов. Представим, что мы получаем данные с бэка о каких то карточках, их может быть хоть сотня. Карточки рендерим на странице, 10 карточек синих, 90 красных. На странице также присутствует чекбокс для фильтрации "только синие". И код предложенный в видео, просто скрывает ненужные карточки, но не удаляет из dom дерева, т.е. все равно идет нагрузка на ресурсы пользователя, как будто он просматривает 100 карточек, а не всего 10 нужных синих. С точки зрения оптимизации будет лучше удалять эти элементы из dom и возвращать, когда чекбокс переходит в состояние инактив. Сугубо мое личное мнение :)
@user-super269
@user-super269 Жыл бұрын
подскажете как это сделать?
@maximpopov4106
@maximpopov4106 Жыл бұрын
@@user-super269 а как вернуть если их удалил ?
@romanmed9035
@romanmed9035 11 ай бұрын
отличный комментарий. а я открыл это чтобы показать начинающему как деалть. хорошо что сначала прочитал комментарий. иначе нацучил бы его не правильному. надо пересматривать сначала видео прежде чем отправлять ссылки ученикам. а так делать совсем нельзя как показано. только полное новое формирование дерева. даже в старые времена так не делалось. это какое-то новшество вредительства.
@gorkachannel7988
@gorkachannel7988 10 ай бұрын
@@maximpopov4106 точно так же, как и удалил) через insertAdjacent рендеришь отфильтрованные, когда фильтра нет, рендеришь весь массив
@user-sg7dn9wz2r
@user-sg7dn9wz2r 2 ай бұрын
@@user-super269 добавлять эл-ты динамически через js изначально. Формировать массив эл-тов, потом его сортировать и добавлять уже отсортированный в верстку
@windcrack8404
@windcrack8404 Жыл бұрын
Дякую, знайшов, що треба було.
@glebkabayjanov5646
@glebkabayjanov5646 4 жыл бұрын
воооо годнота подехала больше больше Jsa Александр
@user-js3sy2qv7m
@user-js3sy2qv7m 4 жыл бұрын
вот еще один канал где предоставляют актуальную и адекватную информацию . спасибо вам за это большое
@Learn-Dev_
@Learn-Dev_ 4 жыл бұрын
Если ещё один, то тогда какой первый? ))
@romanvinichenko1910
@romanvinichenko1910 3 жыл бұрын
Очень полезное видео, у меня была задача отфильтровать без использования Jquery
@chev_chelios
@chev_chelios 7 ай бұрын
Классный урок!
@user-qh4zv9qc9h
@user-qh4zv9qc9h 2 жыл бұрын
Очень красиво))))
@user-yp2mf6wl1t
@user-yp2mf6wl1t 3 жыл бұрын
Спасибо огромное!!!
@user-bq6pk8pf3g
@user-bq6pk8pf3g Жыл бұрын
Пока не все понятно😁 но фильтр сделал, все работает. Спасибо.
@nodirayakubova6395
@nodirayakubova6395 4 жыл бұрын
Офигенно обажаю ваши видео уроки все все понятно объесьняете
@ivansafronov3359
@ivansafronov3359 4 жыл бұрын
Блин, как ты попал прям! У меня заказ висит, нигде не могу найти годный урок по фильтру товаров! А ты его прям в нужный момент выложил! Спасибо, продолжай практические уроки🙏
@svetlanabek5533
@svetlanabek5533 4 жыл бұрын
Заказы берёшь и не знаешь как сделать? А если никто не выложит решение? Что делать?
@ivansafronov3359
@ivansafronov3359 4 жыл бұрын
@@svetlanabek5533 самому решать, мне просто повезло, что он выложил. Он не сделал работу за меня, он её облегчил.
@vitaliy794
@vitaliy794 4 жыл бұрын
@@svetlanabek5533 я думаю в наше время к 98% задач уже есть готовое решение и нужно только уметь нагуглить) Так что можно смело брать любые заказы и делать с гуглом их легко.
@ivansafronov3359
@ivansafronov3359 4 жыл бұрын
@@vitaliy794 Вот вот, при чем даже автор этого канала сам говорил в нескольких роликов, что 90% времени программиста - это поиск информации и готового решения, чтоб уже под себя сделать! А с логикой "зачем брать готовое?" можно и фреймворками не пользоваться 😅
@scott860racing
@scott860racing Жыл бұрын
Просто шикарно
@user-zk5ok6wn2l
@user-zk5ok6wn2l 4 жыл бұрын
Круто! Продолжай в том же духе 👍
@siyisa13
@siyisa13 29 күн бұрын
это шедевр
@MihailAleshkin
@MihailAleshkin 4 жыл бұрын
Как вариант можно добавить тег в контейнер с блоками и в нем прописать display: none ко всем классам кроме выбранного. Тогда не придется перебирать все блоки.
@heyter1579
@heyter1579 4 жыл бұрын
можно, но анимации при исчезновений не будет, слишком громоздко будут изчезать
@alexey1946
@alexey1946 Жыл бұрын
А как прописать, что бы было кроме выбранного?
@user-gt1ky5mn1j
@user-gt1ky5mn1j 3 жыл бұрын
Спасибо большое
@user-tc1qq5nm3x
@user-tc1qq5nm3x 3 жыл бұрын
спасибо 😊
@serg1221
@serg1221 3 жыл бұрын
Увы, сейчас чтобы джуном по JS стать надо еще вчера было быть миддлом, на вакансии посмотри, так там под десяток технологий знать надо
@user-pn2ev2je2l
@user-pn2ev2je2l 4 жыл бұрын
Благодарю Вас за видео.
@user-wo8wd9kr1b
@user-wo8wd9kr1b 4 жыл бұрын
Спасибо. То что надо
@leto0leg
@leto0leg 3 жыл бұрын
Можно наверное toggle использовать, чтобы включать и выключать hide элементов?
@jaloliddinhaqnazarov2667
@jaloliddinhaqnazarov2667 Жыл бұрын
Самый лучший
@HackOFF
@HackOFF 3 жыл бұрын
Отличное решение и в тоже время два вопроса# 1. Что будет если у пользователя отключен JS - Просто не увидит этих блоков? 2. Как поисковики будут видеть эти блоки если их содержимое допустим карточки товаров? спасибо!
@kirkir5533
@kirkir5533 4 жыл бұрын
Я бы с удовольствием посмотрел на реализацию фильтров через url(что бы фильтр настройки не сбрасывались) и с фейковыми данными(а не статика)
@itgid
@itgid 4 жыл бұрын
хорошая идея
@khamidakhmedov248
@khamidakhmedov248 4 жыл бұрын
Респект
@eugeneshiyan
@eugeneshiyan 3 жыл бұрын
Всё круто
@Makspachino
@Makspachino 2 жыл бұрын
А можно сделать не категории а метки, и что бы у каждой карточки было несколько меток?
@KirillKlimov_lds
@KirillKlimov_lds 4 жыл бұрын
А как сделать, чтобы элементы исчезали при клике на самом прямоугольнике, а не на слове в навигации?
@q1dsdsdsq2dssdsd95
@q1dsdsdsq2dssdsd95 4 жыл бұрын
Зачем вы вручную код правите? Расскажите новичкам про prettier, вы же явно используете что-то такое на проектах или просто vscode расширение
@DioNis-eblix
@DioNis-eblix 3 жыл бұрын
Добрый день, подскажите пожалуйста, а если мне нужно реализовать так. Выборка идёт не по одному классу привязаному к div элементу, а по двум. Например если я ещё добавлю класс. Алгоритм будет работать? Мне нужно, что бы выборка элементов div работала по нескольким мне нужным параметрам.
@user-vq8cu3zd5y
@user-vq8cu3zd5y Жыл бұрын
Здравствуйте, получилось найти решение?
@user-sn4ib9dt3e
@user-sn4ib9dt3e Жыл бұрын
А как реализовать множественный выбор?
@4chan355
@4chan355 Жыл бұрын
здравствуйте хотел спросить, делал все как по видео, в итоге фильтр работает но есть одна проблема когда применяется фильтр активные блоки не встают на верх, они просто стоят на своем месте как и со всеми блоками, можете помочь пожалуйста
@stalk4736
@stalk4736 3 жыл бұрын
Можно сделать фильтр для динамически созданных элементов?
@itgid
@itgid 3 жыл бұрын
Да можно
@stalk4736
@stalk4736 3 жыл бұрын
@@itgid спасибо
@asdasd-iv2ik
@asdasd-iv2ik Жыл бұрын
А можно ссылку на код?, у меня дивы по центру стоят, они не переходят влево страницы
@enterkvas
@enterkvas Жыл бұрын
Не работает класс hide (хотя и добавляется в класс, который должен удаляться). Оч долго бьюсь над этой проблемой. Прошу помощи.
@Game-oz6gg
@Game-oz6gg 3 жыл бұрын
А обработчик может остановить событие?
@geek7807
@geek7807 3 жыл бұрын
3:15 Очень маленькая придирка: не логичнее ли было border указывать в .box, а в классах по цветам определять, соответственно, только border-color? Очень режет глаз повторение 3px solid, тем более, что данный интерфейс не предполагает разную ширину и стиль бордера.
@vasyarebryk9102
@vasyarebryk9102 Жыл бұрын
Маю завдання зробити фільтер як у сайта розетка. Як це зробити ?
@user-ql5wj5zi5t
@user-ql5wj5zi5t 3 жыл бұрын
как называется приложение на котором вы пишите сайты?
@green8106
@green8106 3 жыл бұрын
Там же написано, визуал студия
@aquilon1790
@aquilon1790 3 жыл бұрын
Я заметил, что почти везде фильтрация работает через запрос на сервер. Выставили фильтр - отправили запрос - получили ответ - отрисовали. Но этот метод используется в крупных магазинах, а как быть если задача сделать одностраничник для фотографа где будет большая галерея с фотографиями? Допустим 100 фотографий.. Не загружать же их все сразу, я уже всю голову сломал)
@awenn2015
@awenn2015 3 жыл бұрын
У меня есть решение на js , подключаю плагин, инициализирую галерею, и выставляю нужные параметры, кол-во фоток которые грузятся сначала и кнопка по которой можно подгружать следующие партии, если нужно можешь ответить скину исходники
@awenn2015
@awenn2015 3 жыл бұрын
Сейчас пилю сайт для своих плагинов что бы люди могли их качать спокойно
@UchVuch
@UchVuch Жыл бұрын
@@awenn2015 и как успехи, запилил сайт? :)
@grandmaster5318
@grandmaster5318 4 жыл бұрын
Нормально ли будет работать в других браузерах? Не проще ли взять готовую библиотеку?
@itgid
@itgid 4 жыл бұрын
GRANDMASTER вы путаете продакшен и обучение.
@grandmaster5318
@grandmaster5318 4 жыл бұрын
Понял
@user-kj7nz2mh3q
@user-kj7nz2mh3q 3 жыл бұрын
Планируете ли вести обучения на симуляторах? Вроде Мате Академия и Яндекс Практикум.
@ryadik_live
@ryadik_live 4 жыл бұрын
Здравствуйте, курс JS v2.0 Ещё актуален? Менторство ещё идет?
@ja-rusyn
@ja-rusyn 3 жыл бұрын
Да 🍒 ✌
@user-jv6vv9bk4e
@user-jv6vv9bk4e 3 жыл бұрын
@@ja-rusyn Спустя пол года....))))))
@flickeru8877
@flickeru8877 Жыл бұрын
А что с курсом и телегой, почему нет ни того ни другого?
@itgid
@itgid Жыл бұрын
Все есть. Itgid.info Просто если вы с рф или рб то ваши провайдеры блокируют. Почему - к ним вопросы
@nik_user75
@nik_user75 Жыл бұрын
@@itgid не получается, хотел скачать пример, пишет файл не найден
@plajboi3608
@plajboi3608 3 жыл бұрын
Что делать если нужен display none, но и анимация осталась ?
@awenn2015
@awenn2015 3 жыл бұрын
Ничего, display не работает с анимацией
@UchVuch
@UchVuch Жыл бұрын
Сначала убирать с анимацией, а потом добавлять с задержкой к этим элементам новый класс с display:none
@plajboi3608
@plajboi3608 Жыл бұрын
@@UchVuch азахах парни, ну вы чего) уже 2 года прошло, уже знаю)
@deterkot
@deterkot Жыл бұрын
Ничего, display не работает с анимацией
@user-vi3ur8bw8k
@user-vi3ur8bw8k 4 жыл бұрын
А как сделать, чтобы при нажатии all тоже была анимация?
@user-wg9hu3eb6r
@user-wg9hu3eb6r 2 жыл бұрын
8:58
@rogaldorn7016
@rogaldorn7016 4 жыл бұрын
Мне кажется, что было бы проще сделать генерацию элементов через JS или же реализовать названия классов по БЭМ.
@ticheroi
@ticheroi 4 жыл бұрын
сделай, поделись с комюнити, а мы зайдём и поставим тебе upvotes
@nikolaydd6219
@nikolaydd6219 3 жыл бұрын
Красиво но бессмысленно. Где это реально можно применить?
@itgid
@itgid 3 жыл бұрын
на простых страницах где фильтрацию можно делать на клиенте.
@valerasho5874
@valerasho5874 3 жыл бұрын
Достаточно часто такое встречается на сайтах, например портфолио галерея, контент-галерея и прочее подобное, я исрользовал для этого mixitup плагин, но самому как оказалось писать всего то ничего)
@vll1976
@vll1976 4 жыл бұрын
Чтобы сделать очередной дебильный недомагазин с одной страницей и с тремя товарами, где ничего нет, но то что есть красиво плавает по нажатию мышки. Также должна быть страница "About Us" с фотками спи3жеными с интернета с кикими-то левыми кентами сидящими в пафосных позах. Очень круто...
@user-gt2yi7wg6p
@user-gt2yi7wg6p 4 жыл бұрын
Херня. Вы видели сам эффект при перестройке элементов? Чтобы такого дерганья не было элементы позиционируют absolute, вычисляют у каждого его будущую позицию и анимируют. После этого absolute убирают.
@evgeniyprowork
@evgeniyprowork 4 жыл бұрын
а можно пример ?
Массивы это просто! JavaScript
28:28
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 28 М.
Делаем мультиязычный сайт c JavaScript
24:47
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 61 М.
СНЕЖКИ ЛЕТОМ?? #shorts
00:30
Паша Осадчий
Рет қаралды 6 МЛН
Just try to use a cool gadget 😍
00:33
123 GO! SHORTS
Рет қаралды 61 МЛН
Универ. 10 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:04:59
Комедии 2023
Рет қаралды 1,2 МЛН
Сортировка товаров магазина на JavaScript
31:44
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 41 М.
Лучшая IDE для Python!
8:15
Хауди Хо™ - Просто о мире IT!
Рет қаралды 353 М.
Reduce это просто. JavaScript
17:11
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 60 М.
Практика JavaScript с нуля за 2 часа. Сделаем целый сайт!
2:03:50
СНЕЖКИ ЛЕТОМ?? #shorts
00:30
Паша Осадчий
Рет қаралды 6 МЛН