No video
#6 Верстка сайта для начинающих | JavaScript. Фильтр, динамические данные, яндекс карта
Рет қаралды 7,442
Күн бұрынВерстаем макет сайта (лендинга) из Photoshop. Практика верстки. В уроке напишем javascript для всплывающих фильтра. Сделаем динамические данные, и настроим яндекс карту.
/* Материалы урока */
Код: github.com/Dmi...
Макет: drive.google.c...
/* Ссылки урока */
Код с анимацией: github.com/Dmi...
Yandex map custom image: tech.yandex.ru...
/* Команды урока */
Запуск browser-sync: browser-sync start --server --files "**/*" --no-notify
Меня зовут Дмитрий Бердников, я веб-разработчик. На этом канале буду делиться знаниями по веб-разработке.
/* Соц. сети */
Мой ВК - berdnik...
♫Music By♫
●Kronicle - Another Chill Day
●Soundcloud - / the-chemist-10
#обучение #верстка
@user-up6es3nr6s 4 жыл бұрын
Таймкоды: 0:41 Делаем фильтрацию 13:33 Динамические данные 25:36 Анимация для кнопок 26:51 Подключаем яндекс карту
@user-by4sz6is2h 4 жыл бұрын
Спасибо большое за твои уроки, очень сильно помогаешь! Показался сложным твой способ создания фильтра, я сделал так : при нажатии на одну из кнопок (грибные, мясные, сырные) я сравниваю значение дата атрибута кнопки с значением даты атрибута продукта, и если дата атрибуты отличаются, я этому продукту ставлю display:none, иначе ставлю display:block
@user-up6es3nr6s 4 жыл бұрын
Ага, задачу можно решить многими способами
@powerjavascriptman Жыл бұрын
@@user-up6es3nr6s в моей реализации я сравниваю дата атрибуты кнопки c классом модификатором продукта. Мужик ты очень годный контент делаешь, желаю тебе здоровья и счастья!
@user-bm5ge3mr9u Жыл бұрын
Блин, твои видосы топчик! Очень прошу начни опять записывать!
@user-up6es3nr6s Жыл бұрын
Привет! К сожалению пока, на неопределённой паузе
@user-bm5ge3mr9u Жыл бұрын
@@user-up6es3nr6s Спасибо за записанное, тогда....)) JS правда уже устарел, но все ровно, для начинающих фронтендеров, твои уроки - просто пушка!
@mykhailobokalo6037 4 жыл бұрын
Крутяк. Спасибо большое!
@laazz 4 жыл бұрын
Походу придется несколько раз пересматривать чтобы понять всю логику и действия
@user-up6es3nr6s 4 жыл бұрын
Это так и работает, вначале не понимаешь, через время доходит. У меня так всегда
@mamikon8545 3 жыл бұрын
Классные уроки
@gvitoss 4 жыл бұрын
Красава! Видно что опыт хороший за плечами имеется. Можешь сделать мини курс по JS, чтоб хоть немного разбираться в коде, научиться делать элементарные вещи и понимать логику. Пробовал учить через сайт learnJS, но там стоолько инфы сразу дают, получается что не помогают а только запутывают, что хочется выключить комп и пойти на завод работать. :D (нет на завод не хочется, шучу)
@user-up6es3nr6s 4 жыл бұрын
Привет, спасибо. Я планирую по js записать уроки. Есть несколько направлений, можно будет учить js через: 1. Взять простые приложения, калькулятор, to do list и тд 2. На примере мини игр 3. Обычные задачи, которые можно встретить почти на любом сайте, слайдер, табы и тд. В разработке их уже можно не делать с нуля, а брать готовые решения. Но понимать, как делать самому было бы не плохо В идеале, я бы все три направления затронул. С какого лучше начать?
@gvitoss 4 жыл бұрын
@@user-up6es3nr6s ты очень сильно по можешь, если просто покажешь js для верстальщика. Я сколько не смотрел уроков js, все пытаются блеснуть умом используя сложную терминалогию делая игры или крутые калькуляторы. Но зачем большинству игры если человек просто пытается понять суть на простых примерах чтобы самому сделать тот же бургер меню. Лично для меня в идеале было бы круто если ты бы показал: 1- как писать и понимать функции и циклы. Показать простой пример и разобрать его (тут пишем название ф-ции, для чего оно надо.. тут пишем это и для чего оно надо и тд). 2- рассказать об основных событиях и как они работают, вот ты использовал addEventListener в проекте, я вроде понял но не до конца 3- разобрать то что часто используется на проектах но на простом языке для чайника или качка (бургер,табы,аккордеон,toTop,фильтры, якоря, search и тд). Вот это было бы действительно полезно и круто, я б даже денюжку скинул бы тебе от счастья если б научился делать такие вещи, да и не только я)
@user-up6es3nr6s 4 жыл бұрын
@@gvitoss окей, после WordPress подумаю над этим)
@Mamikonars 4 жыл бұрын
@@user-up6es3nr6s тоже за вариант с типовыми задачами для сайтов.
@user-up6es3nr6s 4 жыл бұрын
@@Mamikonars Окей, подумаю над этим
@user-cp2wj8rv4y 3 жыл бұрын
Большое спасибо за урок, с добавлением карты правда возникли проблемы, территориально нахожусь в РФ
@user-up6es3nr6s 3 жыл бұрын
Привет! А в чем проблема?
@user-cp2wj8rv4y 3 жыл бұрын
@@user-up6es3nr6s Спасибо за фитбэк, я разобрался :D
@chertilaa 3 ай бұрын
такой вопрос возник, при закрытии попапа, скролл первый раз работает, второй раз не работает, потом опять работает, в общем через раз работает в прямом смысле, не знаю в чем проблема:( сравнила с кодом на гите, вроде как все соответствует
@hey-vayss2407 2 жыл бұрын
привет урок супер но есть один вопрос а ты незнаешьсайт только для украины не яндекс просто в других уроках кто делает карту там джаву пишут по другому и в сочитании не получаеться. спасибо в заранее
@FreezyIos Жыл бұрын
Что делать, если myLib считает за ошибку, (бразуер консоль), выполнял все так же как и вы, и проверил все несколько раз (менял), все равно ошибка.
@user-up6es3nr6s Жыл бұрын
Привет! Предлагаю попробовать поставить код из репозитория в описании под видео и посмотреть сохраняется ли ошибка
@FreezyIos Жыл бұрын
@@user-up6es3nr6s спасибо, я разобрался, вы будете делать еще видео?
@user-up6es3nr6s Жыл бұрын
@@FreezyIos планирую, но по срокам не знаю
@oleksandrilchuck8482 3 жыл бұрын
Спасибо за контент, возник такой вопрос, а как сделать, чтобы менялась цена при выборе диаметра.
@oleksandrilchuck8482 3 жыл бұрын
Извиняюсь, не досмотрел, ответ в видео №8. :)
@lpseeen5030 3 жыл бұрын
хорошые уроки но не использовал es6 код былбы намного короче
@user-wb8fm6nt4n 4 жыл бұрын
Посадка на wordpress будет?
@user-up6es3nr6s 4 жыл бұрын
Да, после загрузки сайта на хостинг и настройки
@getrogetro7509 2 жыл бұрын
Привет, хотел спросить. А как сделать универсальную фильтрацию. У меня таких блоков достаточно много, и хочется чтоб каждый работал отдельно. Пробовал загонять через цикл всё, но что-то не очень выходит.
@user-up6es3nr6s 2 жыл бұрын
Привет! Вот здесь нужно искать через querySelectorAll и уже потом через цикл github.com/DmitryBerdnikov/pizzatime/blob/master/lesson6/js/catalog.js#L2
@serzhuk22 3 жыл бұрын
Привет, Дима. Подскажи, а почему ты не стилизовал select, там же с этим треугольником есть нюансы по поводу обертки?
@user-up6es3nr6s 3 жыл бұрын
Привет! Может напомнить время в видео или прислать код?
@serzhuk22 3 жыл бұрын
@@user-up6es3nr6s возможно я что-то упустил, но вроде верстал за тобой. Стрелка в select у тебя идет треугольником, а у меня просто стрелкой. Или это особенности браузера? Возможно ты знаешь вменяемые статьи по стилизации select?
@user-up6es3nr6s 3 жыл бұрын
@@serzhuk22 Селекты в разных браузерах имеют свои стили. Сходу не знаю хорошего решения, я бы гуглил, искал, тестировал, можно здесь почитать css-tricks.com/the-current-state-of-styling-selects-in-2019/
@serzhuk22 3 жыл бұрын
@@user-up6es3nr6s спасибо)
@forzyz7123 2 жыл бұрын
почему через var переменные,а не через let, все курсы смотрю сейчас все говорят что var не используеют уже он устарел
@user-up6es3nr6s 2 жыл бұрын
Привет! Да сейчас лучше использовать let и const
@Anahitacode 3 жыл бұрын
Уроки суперские. Спасибо. Но какой же сложный этот JS! Мне кажется, что никогда его не смогу осилить. Подскажите все плизз, как его начать понимать. Нельзя же все время с ним сидеть. Тут еще и php, и CMS - ки всякие нужно изучать, и кучу всего вплоть до настройки директа. Поделитесь опытом.
@user-up6es3nr6s 3 жыл бұрын
Привет! Не нужно все изучать. Нужно определиться с направлением. Если есть цель стать фронтенд разработчиком, то директ никак не относится к этому, да даже php и cms. Другое дело, если делать сайты под ключ на фрилансе, то да можно все подряд изучать, но в итоге знаний везде будет по чуть-чуть. Во всех сферах не стать специалистом. На coursera хороший есть курс learning how to learn. Не все сразу будет понятно, нужно время.
@Anahitacode 3 жыл бұрын
@@user-up6es3nr6s Спасибо за совет!
@user-sd3yz8cj2b 2 жыл бұрын
У меня возникла проблема с фильтром Всего три раздела, но открывается только один,остальной пустой
@user-up6es3nr6s 2 жыл бұрын
Привет! Желательно код на гитхабе и ссылку на сайт, чтобы понять в чем проблема
@alexsanders7240 3 жыл бұрын
После добавление productChecker.js возникает ошибка Uncaught TypeError: product.querySelector is not a function. У тебя тоже она есть, не знаеш как исправить?
@user-up6es3nr6s 3 жыл бұрын
Можешь прислать таймкод или ссылку на jsfiddle? По всей видимости в product не содержится dom элемент
@alexsanders7240 3 жыл бұрын
@@user-up6es3nr6s р угаеться на 10 строчку этого файла: github.com/DmitryBerdnikov/pizzatime/blob/master/lesson6-animation/js/productChecker.js Если в 9 строчке, в конце убрать textContent ошибка пропадает и все роботает. Нужен ли там textContent, если да, то для чего? Спасибо за ответ!)
@ikadill5921 4 жыл бұрын
Спасибо за отличные уроки! Заглохла на карте, не отображается(( подозреваю, что дело именно в яндексе (в Украине, заблокирован). VPN в помощь при открытии необходимых сайтов, а так видимо не катит.. Может кто-то нашёл выход, подскажите, пожалуйста
@user-up6es3nr6s 4 жыл бұрын
Привет! Да, возможно. Получается скрипт работает, если через vpn открыть сайт?
@ikadill5921 4 жыл бұрын
@@user-up6es3nr6s нет, не работает и через vpn, сначала думала, что в коде где-то налажала, скопировала Ваш с гитхаба, та же песня(( Через vpn, я имела в виду, открывается сам яндекс В консоле выбивает такую ошибку: Failed to load resource: net::ERR_NAME_NOT_RESOLVED
@user-up6es3nr6s 4 жыл бұрын
@@ikadill5921 Загрузил с гитхаба 8 урок, проверил все работает, мне кажется все таки причина в том, что яндекс заблокирован. Либо причина в браузере У меня по ссылке все работает bft-hack.ru/pizza-time/
@ikadill5921 4 жыл бұрын
@@user-up6es3nr6s , спасибо большое за ответ! Да думаю, что дело в яндексе. Вставлю просто гуглкарту, потом на досуге поищу инфу как обойти
@user-mo4jd9sq4h 3 жыл бұрын
Добрый день можете сделать видео такое же но использовать Bootstrap
@user-up6es3nr6s 3 жыл бұрын
Привет! Пока не знаю, может по bootstrap или tailwind сделаю
@hiwop1250 4 жыл бұрын
Откуда взялся MyLib на 4:23 ?
@user-up6es3nr6s 4 жыл бұрын
Так мы же его в предыдущем уроке делали
@user-xs4pu7rs1d 4 жыл бұрын
А каким образом карта без ключа загружается?
@user-up6es3nr6s 4 жыл бұрын
Для этого ключ не нужен. Всегда без ключа устанавливаю, для другого функционала нужен ключ
@holingdev1737 4 жыл бұрын
Чё по es?
@user-up6es3nr6s 4 жыл бұрын
Писать на новом стандарте? По-хорошему надо babel настроить, поэтому решил, что не все сразу. В будущем запишу проекты с новым стандартом
@masterswift9700 4 жыл бұрын
эх почему не ФИГМА
@user-up6es3nr6s 4 жыл бұрын
С фигмой планирую в следующих уроках. В этом курсе решил использовать фотошоп
Фронтендер
Рет қаралды 4,8 М.
Фронтендер
Рет қаралды 7 М.
Александр Ламков — Friendly Frontend
Рет қаралды 42 М.
Фронтендер
Рет қаралды 4,9 М.
Александр Ламков — Friendly Frontend
Рет қаралды 34 М.