Верстка интернет-магазина с нуля. Адаптивная верстка макета. GULP SCSS JS. Часть 6

[@RomanKhassazhirov]

Потрясающе, просто песня!)

[@PieceOfInternet]

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

[@azaternis]

Такого контента точно нет, спасибо за такие уроки, было бы классно, если бы были доскональные уроки до DOM, именно в практике, что да как, как цеплять элемент, как его удалять и так далее. Ну а так контент огонь!

[@maxgraph]

Думаю об этом, но даже не знаю когда) много чего в планах пораньше

[@azaternis]

@@maxgraph было бы круто, буду ждать.

[@anv7259]

топчик! узнал очень много нового

[@eldarda]

Было бы круто марафон на скорость. Лайфхаки там чтобы быстрее верстать. Хотя думаю многие не будут успевать

[@maxgraph]

Вот именно)) на скорость можно, но смысла для ютуба нет

[@queenwebdev]

На 3:05 вместо margin-right у catalog-filter можно применить свойство для flex-контейнера column-gap: 30px;

[@АлександрОвчинников-п1д]

Тебе надо лайк под каждым видосом поставить

[@maxgraph]

Спасибо))

[@АсяХаликова-в7б]

Мне прям интересно, будет ли тот момент, когда я буду смотреть ваши видео с не открытым от восторга ртом. Не знала как верстают правильно при изменении количества колонок с товаром на страницу. Спасибо за всякие подробности!

[@maxgraph]

Надеюсь не будет))

[@АсяХаликова-в7б]

@@maxgraph :-))

[@ИльназГарайшин-ч6о]

Блин, так круто ваще)

[@maxgraph]

спасибо)

[@АлександрОвчинников-п1д]

Такую компиляцию по веб разработки без вые#онов, как это бывает на каналах у других программистов с хорошим объяснением не найдешь

[@en_kratia]

У svg проставляется размер 10x10, а по факту 5х6 выходит, потому, что между svg и use неопознанное свободное пространство. У вас на видео размеры svg 1в1 как заданы в css. Для этого есть какой-то решение? Пока есть только вариант с прогонкой через программу этих svg.

[@en_kratia]

Нашел компромисное решение: брать svg только у flaticons, почему-то только с ними пустого пространства не возникает, возможно дело в обертке , в которую они оборачивают свои svg, другие сервисы так не делают.

[@en_kratia]

Есть бесплатная альтернатива для flaticons - uxwing

[@valerypobelenskiy1001]

Максим подскажи пожалуйста почему при удалении каждого элемента catalog-choice-item у меня снимаются активные классы со всех custom-checkbox а не по отдельности

[@maxgraph]

Без кода никак

[@ДмитрийНормов-ю6ц]

Примерно на 16:10 мы меняем цвет иконки-крестика при наведении. Почему мы меняем color, а не fill ??

[@maxgraph]

Привет. Посмотри в плейлисте shorts на эту тему видео))

[@valerypobelenskiy1001]

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

[@СергейКулаков-ю6д]

это действительно сложный js в понимании или просто нужно больше практики и с опытом придёт? я не улавливаю алгоритм сразу, ближе к середине -- к концу.

[@maxgraph]

Да нет, не особо сложный. Но да, придёт рано или поздно)

[@vladyslavkostenko3310]

так и не понял почему у меня не работало выведение фильтров... при нажатии на фильтры выводило как и положено 2 фильтра которые не убрали. но новые не добавлялись... скопировал код - заработало. проверил трижды было все написано как у Вас :)

[@maxgraph]

где-то явно пару символов отличается, но глаз замылился))

[@vladyslavkostenko3310]

@@maxgraph думаю так и есть))) верстку я понимаю на хорошем уровне, а вот с js проблема:)

[@valerypobelenskiy1001]

Я перенес этот кусок кода в catalog-props и все начало работать но ошибка не ушла

[@maxgraph]

Нужно полностью все смотреть, уже завтра киньте в вк или телегу

[@bulatkhusainov5871]

а что если карточки товаров расположить с помощью css grid?

[@maxgraph]

Можно

[@valerypobelenskiy1001]

Максим добрый вечер, выдает ошибку в
vars.$catalogFilterItems.forEach(el => {
el.querySelector("input").addEventListener("change", (e) => {
let checked = el.querySelector("input").checked;
Uncaught TypeError: Cannot read property 'addEventListener' of null
at eval (catalog-filter-toggle.js:20)
at NodeList.forEach () я так понял он по всей видимости не видит переменную checked на которую мы вешаем событие ....
при этом все отображает ( когда закансолишь true и false выдает ) но перестает работать Culumn numbers не переключает количество элементов на странице Можно здесь как то написать синтаксис по другому кажется тут идет конфликт ...

[@maxgraph]

Добрый вечер, вы получается инпут внутри инпута ищете своим кодом)
github.com/maxdenaro/maxgraph-youtube-source/blob/master/%D0%9C%D0%B0%D1%80%D0%B0%D1%84%D0%BE%D0%BD%20%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8%20%E2%84%962.%20Zonex-RUclips/src/js/components/catalog-filter-toggle.js - вот код)

[@valerypobelenskiy1001]

вставил весь блок вашь начиная от var cверху тоже самое выдает .... может запорол где то в catalog props ?? но когда кусочек сверху где скидывал скрипт ваш убираю то переключение страниц работает нормально ...

[@СветланаАндреевна-х8р]

if( element.querySelector("input") !== null) добавьте вот эту проверку и все заработает

[@valerypobelenskiy1001]

@@СветланаАндреевна-х8р спасибо огромное )

[@gamersforfunzoes3787]

without wanting to ask too much, I could put a plugin to zoom the image of the details page

[@maxgraph]

Cool)

[@gamersforfunzoes3787]

make the product details page

[@valerypobelenskiy1001]

_vars__WEBPACK_IMPORTED_MODULE_0__["default"].$catalogFilterItems.forEach(function (el) {
el.querySelector('input').addEventListener('change', function (e) {
console.log(el.querySelector('input'));
var checked = el.querySelector('input').checked; где начинается addEveListener идет волна красная и за кудряшкой крестик

[@MagellanLG]

Новичку смотреть или......?

[@maxgraph]

Можно