А я так сделал. function sendInfoToBackend(stars) { console.log(stars); } document.addEventListener("click", (event) => { if (event.target.dataset.itemValue) { const { itemValue } = event.target.dataset; event.target.parentNode.dataset.totalValue = itemValue; sendInfoToBackend(itemValue); } }); Один слушатель, и от него проще отписываться.
Когда-то смотрел видио хауди месяц 2назад вспомнил про рекламу о тебе я искал видио хауди час нашёл и подписался потомушто знаю что хауди рекламует только годнути спасибо за видио
Можно не переводить в массив, но тогда просто добавить полифилл для интернет эксплорера. Так что все было правильно у Вас. Вы же не виноваты, что експлорер ничего не поддерживает. Что теперь, отказываться от новинок?)
Оч крутой канал! Много полезной инфы, но тут хочу небольшое замечание сделать. 1) если нужно перебрать коллекцию, то самый простой способ [...collection].forEach. Либо так: Array.from(collection, node => {}) 2) не очень хорошая практика навешивать слушатели а каждую ноду, т.к. за это придётся платить памятью, а в дальнейшем и фпс. Выход: навесить слушатель на родительскую ноду, а в коллбэке проверять, что клик был по дочерней. Этот подход называется делегация. Ни в коем случае не пытался захейтить ваш труд.
Ренат, спасибо за положительную конструктивную обратную связь. В комментариях, уже поступило много интересных полезных комментариев на тему того, как можно еще улучшить данный рейтинг. И я хочу их объединить и добавить закрепленный комментарий. Буду вам признателен если напишите мне в телегу, я скину вам песочницу с текущей реализацией, и вы сможете максимально быстро написать предложенную вами реализацию по клику и перебору. Ссылку на вашу песочницу так же добавлю в закрепленный коммент.
Виталий, если будет возможность, расскажи, пожалуйста, как добиться эффекта рассеивания цвета фона фотографии на "соседний фон" рядом с фотографией (как в новом дизайне Facebook на странице профиля). И спасибо тебе за всю твою работу, она очень здорово помогает (я про видео на канале)!!!
Написал на SCSS и чёт не работает, посмотрел в скомпилированый CSS а там отступ между .rating [data-total-value="1"] а должно быть вместе, как исправить?)
Контент на уровне, как всегда лайк ! Только уже второе видео подряд где есть JS у меня ничего не работает, хотя пишу все точь в точь и скрипт подключен )
Виталий, а вы сами верстали свой сайт-портфолио? Просто интересно почему у вас в версии для планшетов верстка немного съезжать начинает) imgur.com/KPqzvIY
А смысл?) Подписка - это та вещь, которая нужна именно для Вас, как для зрителя, чтобы вы могли видеть у себя его видео в соответствующей вкладке... И, как ни странно, мне кажется, некоторые люди о этом забывают)))
Что мешало закрашивать все звездочки когда курсор поверх, кроме тех, которые идут дальше? Ответ - ничего. Флексы тут нужны чтоб расположить как-то звездочки в строке, но не надо их переворачивать. Как как только направление строки было развернуто, реализация строго привязалась к количеству элементов. Это плохо.
![เจ็บที่ยังฮัก - ม่อน วรวิทย์ [ Official Mv ] จอนนี่มิวสิค](http://i.ytimg.com/vi/KALIGSRSjFs/mqdefault.jpg)
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka
❓ Запись на консультацию - prosto-razrabotka.ru/
✨ Telegram канал - t.me/prostorazrabotka/
🔥 Telegram чат - t.me/prostorazrabotkachat/
Можете добавиться в друзья:
📷 Instagram - instagram.com/vitaliy.kirenkov/
📘 ВКонтакте - vk.com/vitaliy.kirenkov/
📗 Facebook - facebook.com/vitaliy.kirenkov/
📙 LinkedIn - www.linkedin.com/in/kirenkov/
✏️ Twitter - twitter.com/VitaliyKirenkov/
А так же, подписаться на страницы:
📘 ВКонтакте - vk.com/public195137161/
📗 Facebook - facebook.com/prostorazrabotka/
оказывается это так просто)😮😄спасибо большое, всё максимально просто, понятно👍
Классная тенденция ролики про практику! Мне нравится
Отлично
Как вам такая реализация?)
огонь!!! а есть где то исходный код? в песочнице например)
ДИВелоперская... Почему нельзя соблюдать семантику и использовать предназначенные для своих задач теги. Про доступность молчу.
нужно было на чистом css и грязном js! (два варианта)
А почему не используется делегирование события?
Вместо 5 онкликов, использовать один?
А я так сделал.
function sendInfoToBackend(stars) {
console.log(stars);
}
document.addEventListener("click", (event) => {
if (event.target.dataset.itemValue) {
const { itemValue } = event.target.dataset;
event.target.parentNode.dataset.totalValue = itemValue;
sendInfoToBackend(itemValue);
}
});
Один слушатель, и от него проще отписываться.
Как же круто ты объясняешь)
Оч круто, что можно найти отдельно столько много отдельной практики и всё на 1 канале))
Ага -))
Как будто мои мысли прочёл, не могу описать словами как я рад этому видео))) спасибо за то что ты делаешь
Рад слышать -)
Просто. Коротко. Понятно. Спасибо большое!)
Благодарю)
Супер спасибо огромное!!!
Спасибо мужик, туторы вышка!
Благодарю
Когда-то смотрел видио хауди месяц 2назад вспомнил про рекламу о тебе я искал видио хауди час нашёл и подписался потомушто знаю что хауди рекламует только годнути спасибо за видио
Виталий спасибо вам за огромный ваш труд!!
Благодарю -)
Благодарю за данную информацию
Можно не переводить в массив, но тогда просто добавить полифилл для интернет эксплорера. Так что все было правильно у Вас. Вы же не виноваты, что експлорер ничего не поддерживает. Что теперь, отказываться от новинок?)
что за плагины используете для форматтинга pug в html и *5?
Круто, давно хотел сделать звёздный рейтинг, спасибо!
*звездатый
словно мысли читаешь, сегодня только об этом думал
Я услышал мысли -)
Супер! Полезная штука
А что, если надо будет работать с числами с плавающей точкой. Через background-size заливать звездочку или есть другие варианты?
Да, там уже по другому, через какие-то позиционирования фона
А как насчёт a11y подхода с radio кнопками (возможно с использованием form)
Посмотрев на название ролика,почему-то на ум приходит игра слов)
Да неееет... что вы... -)))
@@prosto_razrabotka ))))))))
И мне тоже... Даже не знаю, с чего бы это....))
Спасибо
Классно, спасибо, не нужно прикручивать громоздкий плагин.
Оч крутой канал! Много полезной инфы, но тут хочу небольшое замечание сделать.
1) если нужно перебрать коллекцию, то самый простой способ [...collection].forEach. Либо так: Array.from(collection, node => {})
2) не очень хорошая практика навешивать слушатели а каждую ноду, т.к. за это придётся платить памятью, а в дальнейшем и фпс. Выход: навесить слушатель на родительскую ноду, а в коллбэке проверять, что клик был по дочерней. Этот подход называется делегация.
Ни в коем случае не пытался захейтить ваш труд.
Ренат, спасибо за положительную конструктивную обратную связь.
В комментариях, уже поступило много интересных полезных комментариев на тему того, как можно еще улучшить данный рейтинг. И я хочу их объединить и добавить закрепленный комментарий.
Буду вам признателен если напишите мне в телегу, я скину вам песочницу с текущей реализацией, и вы сможете максимально быстро написать предложенную вами реализацию по клику и перебору. Ссылку на вашу песочницу так же добавлю в закрепленный коммент.
Просто: разработка , в закреплённом комментарии уже предложили оч хороший вариант с наваливанием события на document.body
Виталий, если будет возможность, расскажи, пожалуйста, как добиться эффекта рассеивания цвета фона фотографии на "соседний фон" рядом с фотографией (как в новом дизайне Facebook на странице профиля).
И спасибо тебе за всю твою работу, она очень здорово помогает (я про видео на канале)!!!
Решение найдено)) habr.com/ru/company/ruvds/blog/496958/
вы лучший
Спасибо, приятно слышать.
Спасибо за ваши видео!
Можно предложить тему на будущее:
Показать как делается голосование между двумя фото и участвует к примеру 128) и так до конца?
Дмитрий Ганин честно говоря, не понял о чем речь и каких 128?..
может лучше сделать вместо дивов инпуты, тогда будет доступно чекать с клавиатуры?
Классно! Спасибо за урок)
Благодарю.
Написал на SCSS и чёт не работает, посмотрел в скомпилированый CSS а там отступ между .rating [data-total-value="1"] а должно быть вместе, как исправить?)
Откуда ж я знаю, что у вас там написано?) приходите в телеграмм чат с песочницей, разберёмся
Контент на уровне, как всегда лайк !
Только уже второе видео подряд где есть JS у меня ничего не работает, хотя пишу все точь в точь и скрипт подключен )
Ну чего скромничаем? Заглядываем в телеграм чат, разберемся.
Просто: разработка Как буду дома, сразу загляну !)
⭐⭐⭐⭐⭐
Виталий, а вы сами верстали свой сайт-портфолио? Просто интересно почему у вас в версии для планшетов верстка немного съезжать начинает)
imgur.com/KPqzvIY
Мое портфолио - моя песочница -) После последнего апдейта не учел, что либа которая строит сетку, работает на других точках.
@@prosto_razrabotka Вижу вы начинающий в верстке, если хотите могу всего лишь за отзыв помочь вам улучшить качество и надежность верстки)
круто
Спасибо
Очень классное видео! Одно меня разочаровывает на канал нельзя подписаться несколько раз
Для начала можете подписаться хоть 1 раз.. -)
А смысл?) Подписка - это та вещь, которая нужна именно для Вас, как для зрителя, чтобы вы могли видеть у себя его видео в соответствующей вкладке... И, как ни странно, мне кажется, некоторые люди о этом забывают)))
Я первый поставил лайк!) ну после автора...
Автор лайк не ставил, значит был кто-то еще.. -)
Что за IDE?
VS Code
у меня вот это не работает:
.rating[data-total-value='1'] .rating__item:nth-child(n + 5),
.rating[data-total-value='2'] .rating__item:nth-child(n + 4),
.rating[data-total-value='3'] .rating__item:nth-child(n + 3),
.rating[data-total-value='4'] .rating__item:nth-child(n + 2),
.rating[data-total-value='5'] .rating__item:nth-child(n + 1) {
color: orange;
}
У меня js не работает списал точь в точь всё равно не работает
Сейчас думаю как можно сделать календарь, чтоб числа там были как карусель. Пока ничего в голову не приходит. Может знает кто как это сделать?
learn.javascript.ru/ui
чет смешно ) звездочки у меня в обратную сторону выделяются ) при клике ))
кто-то на перемотке просмотрел что-то важное -)
@@prosto_razrabotka нет )просто последовательность перепутал цифр
Тыакс) кастом селекты и опции?)
Ты ж делал сам такой недавно -))
P.S. и да, такая штука тоже в планах есть.
танцы с бубном для ослика, способствует тому что, разрабы ничего не меняют.
Думаю, там несколько сложнее...
гдето есть ошибка
нихуя непонятно, но ооочень интересно.
Что мешало закрашивать все звездочки когда курсор поверх, кроме тех, которые идут дальше? Ответ - ничего. Флексы тут нужны чтоб расположить как-то звездочки в строке, но не надо их переворачивать. Как как только направление строки было развернуто, реализация строго привязалась к количеству элементов. Это плохо.
Зачем ставить обработчики на звездочки? Что за рукожопство?
Учитывать интернет эксплорер в 2020 это мовитон...
Когда начнёте делать крупные проекты, а не сайты-визитки, да лендосики, возвращайтесь, посмотрим, моветон или суровая реальность.
@@prosto_razrabotka 😜это больше крик души с удивлением что кто то его еще юзает...
[...document.querySelectorAll(".rating__item")]
Хм.... Хмммм.... Это ахрененно выглядит!!!)