Добавляет рецепт рейтинга 5 ⭐️ #5592

solarrust · 2024-12-11T20:00:19Z

Попалась мне тут задачка на собеседовании и я решила написать по её следам рецепт. Вариантов решения этой задачи в интернете много. Но этот показался мне самым оптимальным.

@TatianaFokina очень интересно будет узнать твои рекомендации по доступности такого элемента 🙏

@skorobaeus приходи завалидировать демки =)

github-actions · 2024-12-11T20:00:31Z

baileys-li · 2024-12-12T07:32:30Z

recipes/star-rating/demos/js-4/index.html

+    <legend>Оцените товар:</legend>
+    <ul class="stars">
+      <li class="star">
+        <button><span class="visually-hidden">5 звёзд</span>⭐️</button>


<button> без type="button" будет автоматически отправлять форму, если встроить этот блок в форму. А это основной кейс

Но вообще, мне кажется лучше сделать выбор радио кнопками. Тогда и не нужно будет писать логику выбора, при отправке формы можно будет считать из FormData. И не нужно будет имитировать радио кнопки всякими aria аттрибутами, потому радио кнопки древний элемент и поддерживаются везде 👍

Inventoris

Привет, красота 🤩

Оставил несколько комментов, и будет космическая ракета!

Inventoris · 2024-12-12T11:52:30Z

recipes/star-rating/index.md

+related:
+  - css/hover
+  - js/query-selector
+  - css/cascade/


Давай тут приведём к единому виду?

Suggested change

- css/cascade/

- css/cascade

Inventoris · 2024-12-12T11:59:40Z

recipes/star-rating/index.md

+
+## Задача
+
+Создать компонент, состоящий из 5 звезд. На любую из звёзд можно кликнуть и все звёзды до неё и она сама станут отмеченными, активными. Если кликнуть на эту звезду второй раз, то все звёзды снова станут неактивными. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. При этом когда курсор убирается кликнутые звёзды остаются активными.


Suggested change

Создать компонент, состоящий из 5 звезд. На любую из звёзд можно кликнуть и все звёзды до неё и она сама станут отмеченными, активными. Если кликнуть на эту звезду второй раз, то все звёзды снова станут неактивными. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. При этом когда курсор убирается кликнутые звёзды остаются активными.

Создать компонент, состоящий из 5 звёзд. На любую из звёзд можно кликнуть, и все звёзды до неё и она сама станут отмеченными, активными. Если кликнуть на эту звезду второй раз, то все звёзды снова станут неактивными. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. При этом, когда курсор убирается, кликнутые звёзды остаются активными.

Inventoris · 2024-12-12T12:15:16Z

recipes/star-rating/index.md

+Разметка:
+
+```html
+<fieldset class="star-rating" role="radiogroup" data-rating-value="">


Если мы указываем role="radiogroup", то внутри должны быть элементы с ролями radio, или проще наверное с нативным input type="radio". Го добавим тут?

Inventoris · 2024-12-12T12:24:05Z

recipes/star-rating/index.md

+const rating = document.querySelector('.star-rating')
+const stars = document.querySelectorAll('.star')
+
+stars.forEach((star, index) => {


Вот тут и далее мы ведь не используем параметр index? Давай тогда чуть упростим:

Suggested change

stars.forEach((star, index) => {

stars.forEach(star => {

Inventoris · 2024-12-12T12:25:44Z

recipes/star-rating/index.md

+</ul>
+```
+
+Чтобы скринридеры воспринимали элемент целиком и зачитывали его подпись используем связку [`<fieldset>`](/html/fieldset/) + [`<legend>`](/html/legend/).


Suggested change

Чтобы скринридеры воспринимали элемент целиком и зачитывали его подпись используем связку [`<fieldset>`](/html/fieldset/) + [`<legend>`](/html/legend/).

Чтобы скринридеры воспринимали элемент целиком и зачитывали его подпись, используем связку [`<fieldset>`](/html/fieldset/) + [`<legend>`](/html/legend/).

Inventoris · 2024-12-12T12:40:20Z

recipes/star-rating/index.md

+
+<iframe title="Обработка клика со стилями" src="demos/js-2/" height="400"></iframe>
+
+Теперь сделаем так, чтобы при повторном клике оценка убиралась и все звёзды снова становились неактивными. Для этого добавим проверку, есть ли класс `active` у звезды на которую кликнули или нет.


Suggested change

Теперь сделаем так, чтобы при повторном клике оценка убиралась и все звёзды снова становились неактивными. Для этого добавим проверку, есть ли класс `active` у звезды на которую кликнули или нет.

Теперь сделаем так, чтобы при повторном клике оценка убиралась и все звёзды снова становились неактивными. Для этого добавим проверку, есть ли класс `active` у звезды, на которую кликнули, или нет.

может не "убиралась", а "исчезала"?

Inventoris · 2024-12-12T12:42:00Z

recipes/star-rating/index.md

+
+<iframe title="Обработка клика в обе стороны" src="demos/js-3/" height="400"></iframe>
+
+Добавим пару строк чтобы менялось значение атрибута `data-rating-value` в зависимости от того, какая звезда выбрана. Для этого используем свойство [`.dataset`](/js/element-dataset/) и будем _читать_ значение скрытого текста, доставать оттуда цифру при помощи [`parseInt()`](/js/parseint/).


Suggested change

Добавим пару строк чтобы менялось значение атрибута `data-rating-value` в зависимости от того, какая звезда выбрана. Для этого используем свойство [`.dataset`](/js/element-dataset/) и будем _читать_ значение скрытого текста, доставать оттуда цифру при помощи [`parseInt()`](/js/parseint/).

Добавим пару строк, чтобы менялось значение атрибута `data-rating-value` в зависимости от того, какая звезда выбрана. Для этого используем свойство [`.dataset`](/js/element-dataset/) и _прочтём_ значение скрытого текста, а достанем оттуда цифру при помощи [`parseInt()`](/js/parseint/).

Inventoris · 2024-12-12T12:43:33Z

recipes/star-rating/index.md

+
+Осталось реализовать последнее требование. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. Это условие должно работать вне зависимости от того, какой рейтинг сейчас выбран.
+
+Для этого немного схитрим и будем делать полупрозрачными все звёзды если курсор находится в пределах родительского блока `.stars`.


Suggested change

Для этого немного схитрим и будем делать полупрозрачными все звёзды если курсор находится в пределах родительского блока `.stars`.

Для этого немного схитрим и будем делать полупрозрачными все звёзды, если курсор находится в пределах родительского блока `.stars`.

Inventoris · 2024-12-12T12:44:20Z

recipes/star-rating/index.md

+}
+```
+
+Теперь доработаем правило для [`:hover`](/css/hover/), которе уже было в CSS. Увеличим вес селектора при помощи класса `.stars` в начале и обязательно подвинем его вниз, под предыдущее правило. Это нужно из-за [принципа каскада](/css/cascade/). Иначе правила начнут перебивать друг друга.


Suggested change

Теперь доработаем правило для [`:hover`](/css/hover/), которе уже было в CSS. Увеличим вес селектора при помощи класса `.stars` в начале и обязательно подвинем его вниз, под предыдущее правило. Это нужно из-за [принципа каскада](/css/cascade/). Иначе правила начнут перебивать друг друга.

Теперь доработаем правило для [`:hover`](/css/hover/), которое уже было в CSS. Увеличим вес селектора при помощи класса `.stars` в начале и обязательно подвинем его вниз, под предыдущее правило. Это нужно из-за [принципа каскада](/css/cascade/). Иначе правила начнут перебивать друг друга.

Inventoris · 2024-12-12T12:49:38Z

recipes/star-rating/index.md

+
+Обратите внимание, что элементы идут в разметке в обратном порядке. Это связано с особенностями работы CSS.
+
+


Suggested change

Inventoris

Микро-правочка

Inventoris · 2024-12-12T12:59:25Z

recipes/star-rating/index.md

+}
+```
+
+<iframe title="Ховер при выбраном рейтинге" src="demos/js-css/" height="400"></iframe>


Кажется всё таки два «н».

Suggested change

<iframe title="Ховер при выбраном рейтинге" src="demos/js-css/" height="400"></iframe>

<iframe title="Ховер при выбранном рейтинге" src="demos/js-css/" height="400"></iframe>

Inventoris · 2024-12-12T12:59:56Z

recipes/star-rating/demos/js-css/index.html

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Ховер при выбраном рейтинге — Рейтинг «5 звёзд» — Дока</title>


Suggested change

<title>Ховер при выбраном рейтинге — Рейтинг «5 звёзд» — Дока</title>

<title>Ховер при выбранном рейтинге — Рейтинг «5 звёзд» — Дока</title>

nasty23-star · 2024-12-12T20:01:13Z

recipes/star-rating/index.md

+## HTML
+
+В первую очередь создадим HTML-разметку для рейтинга. Элементы связаны по смыслу, поэтому нужно использовать подходящий семантический тег. Также для нативной поддержки фокуса используем тег [`<button>`](/html/button/). Понадобиться 5 пунктов списка с вложенными кнопками.
+


понадобится, без мягкого знака

skorobaeus · 2024-12-13T10:58:09Z

@skorobaeus приходи завалидировать демки =)

Валидирую и всячески одобряю!

Сделала шрифт побольше. В код готового решения добавила эти стили, если не нужны там, фил фри убрать :)

github-actions · 2024-12-13T11:08:33Z

Превью контента из a2a0058 опубликовано.

vitya-ne · 2024-12-13T19:58:51Z

recipes/star-rating/demos/result/index.html

+    const stars = document.querySelectorAll('.star')
+
+    stars.forEach((star, index) => {
+      star.addEventListener('click', (event) => {
+        const activeStar = event.currentTarget
+
+        if (activeStar.classList.contains('active')) {
+          activeStar.classList.remove('active')
+          rating.dataset.ratingValue = ''
+        } else {
+          stars.forEach(star => star.classList.remove('active'))
+          activeStar.classList.add('active')
+          rating.dataset.ratingValue = parseInt(activeStar.textContent.trim())
+        }


Привет,
Классные звёздочки ! Ставлю: ⭐⭐⭐⭐⭐

В скрипте можно немножко сэкономить:

const rating = document.querySelector('.star-rating') // дочерние элименты ищем локально const starsContainer = rating.querySelector('.stars') const stars = rating.querySelectorAll('.star') // добавляем один EventListener к элементу ul starsContainer.addEventListener('click', (event) => { // получаем звезду на которой произошёл клик const activeStar = event.target.closest('.star') ...

Добавляет рецепт рейтинга 5 ⭐️

8c89d4d

solarrust added статья Расширенный материал рецепт Контент для Рецептов labels Dec 11, 2024

solarrust requested review from skorobaeus, HellSquirrel and TatianaFokina as code owners December 11, 2024 20:00

Добавляет рецепт в индекс и пополныет related

edb8bb6

vitya-ne assigned solarrust Dec 11, 2024

baileys-li reviewed Dec 12, 2024

View reviewed changes

Inventoris reviewed Dec 12, 2024

View reviewed changes

nasty23-star reviewed Dec 12, 2024

View reviewed changes

Делает текст поболбше

a2a0058

skorobaeus approved these changes Dec 13, 2024

View reviewed changes

vitya-ne reviewed Dec 13, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Добавляет рецепт рейтинга 5 ⭐️ #5592

Добавляет рецепт рейтинга 5 ⭐️ #5592

solarrust commented Dec 11, 2024

github-actions bot commented Dec 11, 2024 •

edited by solarrust

Loading

baileys-li Dec 12, 2024

Inventoris left a comment

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

nasty23-star Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

Inventoris left a comment

Inventoris Dec 12, 2024

Inventoris Dec 12, 2024

nasty23-star Dec 12, 2024

skorobaeus commented Dec 13, 2024

github-actions bot commented Dec 13, 2024

vitya-ne Dec 13, 2024 •

edited

Loading


		## Задача

		Создать компонент, состоящий из 5 звезд. На любую из звёзд можно кликнуть и все звёзды до неё и она сама станут отмеченными, активными. Если кликнуть на эту звезду второй раз, то все звёзды снова станут неактивными. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. При этом когда курсор убирается кликнутые звёзды остаются активными.

	Чтобы скринридеры воспринимали элемент целиком и зачитывали его подпись используем связку [`<fieldset>`](/html/fieldset/) + [`<legend>`](/html/legend/).
	Чтобы скринридеры воспринимали элемент целиком и зачитывали его подпись, используем связку [`<fieldset>`](/html/fieldset/) + [`<legend>`](/html/legend/).


		<iframe title="Обработка клика со стилями" src="demos/js-2/" height="400"></iframe>

		Теперь сделаем так, чтобы при повторном клике оценка убиралась и все звёзды снова становились неактивными. Для этого добавим проверку, есть ли класс `active` у звезды на которую кликнули или нет.


		<iframe title="Обработка клика в обе стороны" src="demos/js-3/" height="400"></iframe>

		Добавим пару строк чтобы менялось значение атрибута `data-rating-value` в зависимости от того, какая звезда выбрана. Для этого используем свойство [`.dataset`](/js/element-dataset/) и будем _читать_ значение скрытого текста, доставать оттуда цифру при помощи [`parseInt()`](/js/parseint/).


		Осталось реализовать последнее требование. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. Это условие должно работать вне зависимости от того, какой рейтинг сейчас выбран.

		Для этого немного схитрим и будем делать полупрозрачными все звёзды если курсор находится в пределах родительского блока `.stars`.


		Обратите внимание, что элементы идут в разметке в обратном порядке. Это связано с особенностями работы CSS.

	<iframe title="Ховер при выбраном рейтинге" src="demos/js-css/" height="400"></iframe>
	<iframe title="Ховер при выбранном рейтинге" src="demos/js-css/" height="400"></iframe>

	<title>Ховер при выбраном рейтинге — Рейтинг «5 звёзд» — Дока</title>
	<title>Ховер при выбранном рейтинге — Рейтинг «5 звёзд» — Дока</title>

		## HTML

		В первую очередь создадим HTML-разметку для рейтинга. Элементы связаны по смыслу, поэтому нужно использовать подходящий семантический тег. Также для нативной поддержки фокуса используем тег [`<button>`](/html/button/). Понадобиться 5 пунктов списка с вложенными кнопками.

Добавляет рецепт рейтинга 5 ⭐️ #5592

Are you sure you want to change the base?

Добавляет рецепт рейтинга 5 ⭐️ #5592

Conversation

solarrust commented Dec 11, 2024

github-actions bot commented Dec 11, 2024 • edited by solarrust Loading

Чек-лист для новой статьи

Метаданные

Статья

Choose a reason for hiding this comment

Inventoris left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Inventoris left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skorobaeus commented Dec 13, 2024

github-actions bot commented Dec 13, 2024

vitya-ne Dec 13, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Dec 11, 2024 •

edited by solarrust

Loading

vitya-ne Dec 13, 2024 •

edited

Loading