Верстка звездатого рейтинга
Вставка
- Опубліковано 25 вер 2024
- Очень часто при разработке интернет-магазинов, каких-то опросов возникает необходимость реализовать рейтинг. Иногда там просто цифры, иногда звездочки, иногда какие-то смайлики (от грустного до веселого). Но сам принцип такого рейтинга практически всегда одинаковый. В этом видео мы как раз рассмотрим один из таких примеров.
😎 Получить исходники и другие преимущества - 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/
оказывается это так просто)😮😄спасибо большое, всё максимально просто, понятно👍
Классная тенденция ролики про практику! Мне нравится
Отлично
Просто. Коротко. Понятно. Спасибо большое!)
Благодарю)
Как же круто ты объясняешь)
Оч круто, что можно найти отдельно столько много отдельной практики и всё на 1 канале))
Ага -))
Как будто мои мысли прочёл, не могу описать словами как я рад этому видео))) спасибо за то что ты делаешь
Рад слышать -)
Спасибо мужик, туторы вышка!
Благодарю
Виталий спасибо вам за огромный ваш труд!!
Благодарю -)
Супер спасибо огромное!!!
Благодарю за данную информацию
Круто, давно хотел сделать звёздный рейтинг, спасибо!
*звездатый
Как вам такая реализация?)
огонь!!! а есть где то исходный код? в песочнице например)
ДИВелоперская... Почему нельзя соблюдать семантику и использовать предназначенные для своих задач теги. Про доступность молчу.
нужно было на чистом 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);
}
});
Один слушатель, и от него проще отписываться.
Когда-то смотрел видио хауди месяц 2назад вспомнил про рекламу о тебе я искал видио хауди час нашёл и подписался потомушто знаю что хауди рекламует только годнути спасибо за видио
Классно! Спасибо за урок)
Благодарю.
словно мысли читаешь, сегодня только об этом думал
Я услышал мысли -)
Супер! Полезная штука
Можно не переводить в массив, но тогда просто добавить полифилл для интернет эксплорера. Так что все было правильно у Вас. Вы же не виноваты, что експлорер ничего не поддерживает. Что теперь, отказываться от новинок?)
Спасибо
Посмотрев на название ролика,почему-то на ум приходит игра слов)
Да неееет... что вы... -)))
@@prosto_razrabotka ))))))))
И мне тоже... Даже не знаю, с чего бы это....))
Оч крутой канал! Много полезной инфы, но тут хочу небольшое замечание сделать.
1) если нужно перебрать коллекцию, то самый простой способ [...collection].forEach. Либо так: Array.from(collection, node => {})
2) не очень хорошая практика навешивать слушатели а каждую ноду, т.к. за это придётся платить памятью, а в дальнейшем и фпс. Выход: навесить слушатель на родительскую ноду, а в коллбэке проверять, что клик был по дочерней. Этот подход называется делегация.
Ни в коем случае не пытался захейтить ваш труд.
Ренат, спасибо за положительную конструктивную обратную связь.
В комментариях, уже поступило много интересных полезных комментариев на тему того, как можно еще улучшить данный рейтинг. И я хочу их объединить и добавить закрепленный комментарий.
Буду вам признателен если напишите мне в телегу, я скину вам песочницу с текущей реализацией, и вы сможете максимально быстро написать предложенную вами реализацию по клику и перебору. Ссылку на вашу песочницу так же добавлю в закрепленный коммент.
Просто: разработка , в закреплённом комментарии уже предложили оч хороший вариант с наваливанием события на document.body
Виталий, если будет возможность, расскажи, пожалуйста, как добиться эффекта рассеивания цвета фона фотографии на "соседний фон" рядом с фотографией (как в новом дизайне Facebook на странице профиля).
И спасибо тебе за всю твою работу, она очень здорово помогает (я про видео на канале)!!!
Решение найдено)) habr.com/ru/company/ruvds/blog/496958/
⭐⭐⭐⭐⭐
Классно, спасибо, не нужно прикручивать громоздкий плагин.
вы лучший
Спасибо, приятно слышать.
А что, если надо будет работать с числами с плавающей точкой. Через background-size заливать звездочку или есть другие варианты?
Да, там уже по другому, через какие-то позиционирования фона
А как насчёт a11y подхода с radio кнопками (возможно с использованием form)
Спасибо за ваши видео!
Можно предложить тему на будущее:
Показать как делается голосование между двумя фото и участвует к примеру 128) и так до конца?
Дмитрий Ганин честно говоря, не понял о чем речь и каких 128?..
круто
Спасибо
Я первый поставил лайк!) ну после автора...
Автор лайк не ставил, значит был кто-то еще.. -)
может лучше сделать вместо дивов инпуты, тогда будет доступно чекать с клавиатуры?
Контент на уровне, как всегда лайк !
Только уже второе видео подряд где есть JS у меня ничего не работает, хотя пишу все точь в точь и скрипт подключен )
Ну чего скромничаем? Заглядываем в телеграм чат, разберемся.
Просто: разработка Как буду дома, сразу загляну !)
что за плагины используете для форматтинга pug в html и *5?
Очень классное видео! Одно меня разочаровывает на канал нельзя подписаться несколько раз
Для начала можете подписаться хоть 1 раз.. -)
А смысл?) Подписка - это та вещь, которая нужна именно для Вас, как для зрителя, чтобы вы могли видеть у себя его видео в соответствующей вкладке... И, как ни странно, мне кажется, некоторые люди о этом забывают)))
Виталий, а вы сами верстали свой сайт-портфолио? Просто интересно почему у вас в версии для планшетов верстка немного съезжать начинает)
imgur.com/KPqzvIY
Мое портфолио - моя песочница -) После последнего апдейта не учел, что либа которая строит сетку, работает на других точках.
@@prosto_razrabotka Вижу вы начинающий в верстке, если хотите могу всего лишь за отзыв помочь вам улучшить качество и надежность верстки)
Написал на SCSS и чёт не работает, посмотрел в скомпилированый CSS а там отступ между .rating [data-total-value="1"] а должно быть вместе, как исправить?)
Откуда ж я знаю, что у вас там написано?) приходите в телеграмм чат с песочницей, разберёмся
у меня вот это не работает:
.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 не работает списал точь в точь всё равно не работает
чет смешно ) звездочки у меня в обратную сторону выделяются ) при клике ))
кто-то на перемотке просмотрел что-то важное -)
@@prosto_razrabotka нет )просто последовательность перепутал цифр
Что за IDE?
VS Code
Сейчас думаю как можно сделать календарь, чтоб числа там были как карусель. Пока ничего в голову не приходит. Может знает кто как это сделать?
learn.javascript.ru/ui
нихуя непонятно, но ооочень интересно.
танцы с бубном для ослика, способствует тому что, разрабы ничего не меняют.
Думаю, там несколько сложнее...
Тыакс) кастом селекты и опции?)
Ты ж делал сам такой недавно -))
P.S. и да, такая штука тоже в планах есть.
гдето есть ошибка
Что мешало закрашивать все звездочки когда курсор поверх, кроме тех, которые идут дальше? Ответ - ничего. Флексы тут нужны чтоб расположить как-то звездочки в строке, но не надо их переворачивать. Как как только направление строки было развернуто, реализация строго привязалась к количеству элементов. Это плохо.
[...document.querySelectorAll(".rating__item")]
Хм.... Хмммм.... Это ахрененно выглядит!!!)
Зачем ставить обработчики на звездочки? Что за рукожопство?
Учитывать интернет эксплорер в 2020 это мовитон...
Когда начнёте делать крупные проекты, а не сайты-визитки, да лендосики, возвращайтесь, посмотрим, моветон или суровая реальность.
@@prosto_razrabotka 😜это больше крик души с удивлением что кто то его еще юзает...