Верстка звездатого рейтинга

Рет қаралды 14,566

3 жыл бұрын

Очень часто при разработке интернет-магазинов, каких-то опросов возникает необходимость реализовать рейтинг. Иногда там просто цифры, иногда звездочки, иногда какие-то смайлики (от грустного до веселого). Но сам принцип такого рейтинга практически всегда одинаковый. В этом видео мы как раз рассмотрим один из таких примеров.

Пікірлер: 94

@prosto_razrabotka 3 жыл бұрын

😎 Получить исходники и другие преимущества - 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/

@baier5473 3 жыл бұрын

Оч круто, что можно найти отдельно столько много отдельной практики и всё на 1 канале))

@prosto_razrabotka 3 жыл бұрын

Ага -))

@mrcrodo 3 жыл бұрын

Как будто мои мысли прочёл, не могу описать словами как я рад этому видео))) спасибо за то что ты делаешь

@prosto_razrabotka 3 жыл бұрын

Рад слышать -)

@esmeralda5472 3 жыл бұрын

Как же круто ты объясняешь)

@user-bi3kx5uf6d 3 жыл бұрын

Классная тенденция ролики про практику! Мне нравится

@prosto_razrabotka 3 жыл бұрын

Отлично

@ivrus196 3 жыл бұрын

Виталий спасибо вам за огромный ваш труд!!

@prosto_razrabotka 3 жыл бұрын

Благодарю -)

@exetareme.fire.keepooroffl2047 3 жыл бұрын

Просто. Коротко. Понятно. Спасибо большое!)

@prosto_razrabotka 3 жыл бұрын

Благодарю)

@man-jj7rc 3 жыл бұрын

Спасибо мужик, туторы вышка!

@prosto_razrabotka 3 жыл бұрын

Благодарю

@iventeye 3 жыл бұрын

Круто, давно хотел сделать звёздный рейтинг, спасибо!

@alexeygumenyuk8510 3 жыл бұрын

*звездатый

@mywebway4063 3 жыл бұрын

Супер спасибо огромное!!!

@shindo4933 3 жыл бұрын

Благодарю за данную информацию

@_oxios_ 3 жыл бұрын

Классно! Спасибо за урок)

@prosto_razrabotka 3 жыл бұрын

Благодарю.

@prosto_razrabotka 3 жыл бұрын

Как вам такая реализация?)

@aweb_21 3 жыл бұрын

огонь!!! а есть где то исходный код? в песочнице например)

@cerberuscsgoandmore6968 3 жыл бұрын

ДИВелоперская... Почему нельзя соблюдать семантику и использовать предназначенные для своих задач теги. Про доступность молчу.

@GarageFIAT 3 жыл бұрын

нужно было на чистом css и грязном js! (два варианта)

@user-wz1tn7fn4s 3 жыл бұрын

А почему не используется делегирование события? Вместо 5 онкликов, использовать один?

@Doktornikita 3 жыл бұрын

А я так сделал. 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); } }); Один слушатель, и от него проще отписываться.

@ChinaraIbr 3 жыл бұрын

Супер! Полезная штука

@uvee1134 3 жыл бұрын

что за плагины используете для форматтинга pug в html и *5?

@user-gb1uz4pg3c 3 жыл бұрын

А как насчёт a11y подхода с radio кнопками (возможно с использованием form)

@user-wl5jq2mx7d 3 жыл бұрын

может лучше сделать вместо дивов инпуты, тогда будет доступно чекать с клавиатуры?

@yennms5547 3 жыл бұрын

Спасибо за ваши видео! Можно предложить тему на будущее: Показать как делается голосование между двумя фото и участвует к примеру 128) и так до конца?

@prosto_razrabotka 3 жыл бұрын

Дмитрий Ганин честно говоря, не понял о чем речь и каких 128?..

@user-uo2qw1cm1v 3 жыл бұрын

Спасибо

@sardor4315 3 жыл бұрын

Когда-то смотрел видио хауди месяц 2назад вспомнил про рекламу о тебе я искал видио хауди час нашёл и подписался потомушто знаю что хауди рекламует только годнути спасибо за видио

@leaf5960 3 жыл бұрын

А что, если надо будет работать с числами с плавающей точкой. Через background-size заливать звездочку или есть другие варианты?

@prosto_razrabotka 3 жыл бұрын

Да, там уже по другому, через какие-то позиционирования фона

@user-vd1et1mr4w 3 жыл бұрын

словно мысли читаешь, сегодня только об этом думал

@prosto_razrabotka 3 жыл бұрын

Я услышал мысли -)

@hilen8315 3 жыл бұрын

вы лучший

@prosto_razrabotka 3 жыл бұрын

Спасибо, приятно слышать.

@renatvlasov4855 3 жыл бұрын

Оч крутой канал! Много полезной инфы, но тут хочу небольшое замечание сделать. 1) если нужно перебрать коллекцию, то самый простой способ [...collection].forEach. Либо так: Array.from(collection, node => {}) 2) не очень хорошая практика навешивать слушатели а каждую ноду, т.к. за это придётся платить памятью, а в дальнейшем и фпс. Выход: навесить слушатель на родительскую ноду, а в коллбэке проверять, что клик был по дочерней. Этот подход называется делегация. Ни в коем случае не пытался захейтить ваш труд.

@prosto_razrabotka 3 жыл бұрын

Ренат, спасибо за положительную конструктивную обратную связь. В комментариях, уже поступило много интересных полезных комментариев на тему того, как можно еще улучшить данный рейтинг. И я хочу их объединить и добавить закрепленный комментарий. Буду вам признателен если напишите мне в телегу, я скину вам песочницу с текущей реализацией, и вы сможете максимально быстро написать предложенную вами реализацию по клику и перебору. Ссылку на вашу песочницу так же добавлю в закрепленный коммент.

@renatvlasov4855 3 жыл бұрын

Просто: разработка , в закреплённом комментарии уже предложили оч хороший вариант с наваливанием события на document.body

@sowebphotography 3 жыл бұрын

Виталий, а вы сами верстали свой сайт-портфолио? Просто интересно почему у вас в версии для планшетов верстка немного съезжать начинает) imgur.com/KPqzvIY

@prosto_razrabotka 3 жыл бұрын

Мое портфолио - моя песочница -) После последнего апдейта не учел, что либа которая строит сетку, работает на других точках.

@sowebphotography 3 жыл бұрын

@@prosto_razrabotka Вижу вы начинающий в верстке, если хотите могу всего лишь за отзыв помочь вам улучшить качество и надежность верстки)

@crabsburger501 3 жыл бұрын

Написал на SCSS и чёт не работает, посмотрел в скомпилированый CSS а там отступ между .rating [data-total-value="1"] а должно быть вместе, как исправить?)

@prosto_razrabotka 3 жыл бұрын

Откуда ж я знаю, что у вас там написано?) приходите в телеграмм чат с песочницей, разберёмся

@user-wl5jq2mx7d 3 жыл бұрын

круто

@prosto_razrabotka 3 жыл бұрын

Спасибо

@antonmaklakov 3 жыл бұрын

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

@prosto_razrabotka 3 жыл бұрын

Да неееет... что вы... -)))

@antonmaklakov 3 жыл бұрын

@@prosto_razrabotka ))))))))

@alexeygumenyuk8510 3 жыл бұрын

И мне тоже... Даже не знаю, с чего бы это....))

@hexruin4569 3 жыл бұрын

⭐⭐⭐⭐⭐

@anisimoff720 3 жыл бұрын

Контент на уровне, как всегда лайк ! Только уже второе видео подряд где есть JS у меня ничего не работает, хотя пишу все точь в точь и скрипт подключен )

@prosto_razrabotka 3 жыл бұрын

Ну чего скромничаем? Заглядываем в телеграм чат, разберемся.

@anisimoff720 3 жыл бұрын

Просто: разработка Как буду дома, сразу загляну !)

@Andrew-bn9sq 3 жыл бұрын

Виталий, если будет возможность, расскажи, пожалуйста, как добиться эффекта рассеивания цвета фона фотографии на "соседний фон" рядом с фотографией (как в новом дизайне Facebook на странице профиля). И спасибо тебе за всю твою работу, она очень здорово помогает (я про видео на канале)!!!

@Andrew-bn9sq 3 жыл бұрын

Решение найдено)) habr.com/ru/company/ruvds/blog/496958/

@Sergey_Klimov 2 жыл бұрын

Можно не переводить в массив, но тогда просто добавить полифилл для интернет эксплорера. Так что все было правильно у Вас. Вы же не виноваты, что експлорер ничего не поддерживает. Что теперь, отказываться от новинок?)

@xyjlugah6760 3 жыл бұрын

Я первый поставил лайк!) ну после автора...

@prosto_razrabotka 3 жыл бұрын

Автор лайк не ставил, значит был кто-то еще.. -)

@luxarmiger5729 2 жыл бұрын

Классно, спасибо, не нужно прикручивать громоздкий плагин.

@viktorviktor6145 3 жыл бұрын

Сейчас думаю как можно сделать календарь, чтоб числа там были как карусель. Пока ничего в голову не приходит. Может знает кто как это сделать?

@numbersevenunderheaven1898 3 жыл бұрын

learn.javascript.ru/ui

@boldureans 3 жыл бұрын

Тыакс) кастом селекты и опции?)

@prosto_razrabotka 3 жыл бұрын

Ты ж делал сам такой недавно -)) P.S. и да, такая штука тоже в планах есть.

@prosto.physic 3 жыл бұрын

Что за IDE?

@prosto_razrabotka 3 жыл бұрын

VS Code

@ReALiniy_BaT0n 3 жыл бұрын

у меня вот это не работает: .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; }

@user-dt8rx3fz3d 3 жыл бұрын

Очень классное видео! Одно меня разочаровывает на канал нельзя подписаться несколько раз

@prosto_razrabotka 3 жыл бұрын

Для начала можете подписаться хоть 1 раз.. -)

@alexeygumenyuk8510 3 жыл бұрын

А смысл?) Подписка - это та вещь, которая нужна именно для Вас, как для зрителя, чтобы вы могли видеть у себя его видео в соответствующей вкладке... И, как ни странно, мне кажется, некоторые люди о этом забывают)))

@user-zq3zp1gq4k 3 жыл бұрын

чет смешно ) звездочки у меня в обратную сторону выделяются ) при клике ))

@prosto_razrabotka 3 жыл бұрын

кто-то на перемотке просмотрел что-то важное -)

@user-zq3zp1gq4k 3 жыл бұрын

@@prosto_razrabotka нет )просто последовательность перепутал цифр

@user-qm7fg2pq4x 8 ай бұрын

гдето есть ошибка

@agilkerimov 3 жыл бұрын

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

@prosto_razrabotka 3 жыл бұрын

Думаю, там несколько сложнее...

@mansiayer848 Жыл бұрын

нихуя непонятно, но ооочень интересно.

@user-rj6ro3mp1p 3 жыл бұрын

[...document.querySelectorAll(".rating__item")]

@alexeygumenyuk8510 3 жыл бұрын

Хм.... Хмммм.... Это ахрененно выглядит!!!)

@profesor08 3 жыл бұрын

Что мешало закрашивать все звездочки когда курсор поверх, кроме тех, которые идут дальше? Ответ - ничего. Флексы тут нужны чтоб расположить как-то звездочки в строке, но не надо их переворачивать. Как как только направление строки было развернуто, реализация строго привязалась к количеству элементов. Это плохо.