diff --git a/recipes/index.md b/recipes/index.md index 08870438a1..03592d4ddd 100644 --- a/recipes/index.md +++ b/recipes/index.md @@ -17,6 +17,7 @@ groups: - masonry - slider - checkbox-radio-style + - star-rating - name: 'Работа с GitHub' items: - github-new-profile diff --git a/recipes/star-rating/demos/css-1/index.html b/recipes/star-rating/demos/css-1/index.html new file mode 100644 index 0000000000..487b105741 --- /dev/null +++ b/recipes/star-rating/demos/css-1/index.html @@ -0,0 +1,101 @@ + + + + Базовые стили — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + diff --git a/recipes/star-rating/demos/css-2/index.html b/recipes/star-rating/demos/css-2/index.html new file mode 100644 index 0000000000..536abc7f67 --- /dev/null +++ b/recipes/star-rating/demos/css-2/index.html @@ -0,0 +1,106 @@ + + + + Стили при наведении курсора — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + diff --git a/recipes/star-rating/demos/css-3/index.html b/recipes/star-rating/demos/css-3/index.html new file mode 100644 index 0000000000..90e5c44361 --- /dev/null +++ b/recipes/star-rating/demos/css-3/index.html @@ -0,0 +1,107 @@ + + + + Перевёрнутый рейтинг — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + diff --git a/recipes/star-rating/demos/html/index.html b/recipes/star-rating/demos/html/index.html new file mode 100644 index 0000000000..39db357e45 --- /dev/null +++ b/recipes/star-rating/demos/html/index.html @@ -0,0 +1,30 @@ + + + + HTML-разметка — Рейтинг «5 звёзд» — Дока + + + + +
+ Оцените товар: + +
+ + diff --git a/recipes/star-rating/demos/js-1/index.html b/recipes/star-rating/demos/js-1/index.html new file mode 100644 index 0000000000..16829343dc --- /dev/null +++ b/recipes/star-rating/demos/js-1/index.html @@ -0,0 +1,121 @@ + + + + Обработка клика без стилей — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + + + diff --git a/recipes/star-rating/demos/js-2/index.html b/recipes/star-rating/demos/js-2/index.html new file mode 100644 index 0000000000..d06c752e54 --- /dev/null +++ b/recipes/star-rating/demos/js-2/index.html @@ -0,0 +1,126 @@ + + + + Обработка клика со стилями — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + + + diff --git a/recipes/star-rating/demos/js-3/index.html b/recipes/star-rating/demos/js-3/index.html new file mode 100644 index 0000000000..de8e92f18e --- /dev/null +++ b/recipes/star-rating/demos/js-3/index.html @@ -0,0 +1,130 @@ + + + + Обработка клика в обе стороны — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + + + diff --git a/recipes/star-rating/demos/js-4/index.html b/recipes/star-rating/demos/js-4/index.html new file mode 100644 index 0000000000..a2add3d2c4 --- /dev/null +++ b/recipes/star-rating/demos/js-4/index.html @@ -0,0 +1,132 @@ + + + + Сохранение рейтинга в дата-атрибут — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + + + diff --git a/recipes/star-rating/demos/js-css/index.html b/recipes/star-rating/demos/js-css/index.html new file mode 100644 index 0000000000..a54af9f68e --- /dev/null +++ b/recipes/star-rating/demos/js-css/index.html @@ -0,0 +1,136 @@ + + + + Ховер при выбраном рейтинге — Рейтинг «5 звёзд» — Дока + + + + + + + + + +
+ Оцените товар: + +
+ + + + diff --git a/recipes/star-rating/demos/result/index.html b/recipes/star-rating/demos/result/index.html new file mode 100644 index 0000000000..464cd6db9f --- /dev/null +++ b/recipes/star-rating/demos/result/index.html @@ -0,0 +1,135 @@ + + + + Финальное решение — Рейтинг «5 звёзд» — Дока + + + + + + + + +
+ Оцените товар: + +
+ + + + diff --git a/recipes/star-rating/index.md b/recipes/star-rating/index.md new file mode 100644 index 0000000000..577ec4cedd --- /dev/null +++ b/recipes/star-rating/index.md @@ -0,0 +1,506 @@ +--- +title: "Рейтинг «5 звёзд»" +description: "Популярный элемент для оценки по пятибальной шкале на чистом HTML, CSS и JavaScript." +authors: + - solarrust +related: + - css/hover + - js/query-selector + - css/cascade/ +tags: + - article +--- + +## Задача + +Создать компонент, состоящий из 5 звезд. На любую из звёзд можно кликнуть и все звёзды до неё и она сама станут отмеченными, активными. Если кликнуть на эту звезду второй раз, то все звёзды снова станут неактивными. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. При этом когда курсор убирается кликнутые звёзды остаются активными. + +## Готовое решение + + + +Разметка: + +```html +
+ Оцените товар: + +
+``` + +Стили: + +```css +legend { + font-size: 24px; + font-weight: 500; +} + +button { + background-color: transparent; + border: none; + color: inherit; + cursor: pointer; + font: inherit; + padding: 0; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} + +.star-rating { + text-align: center; + border: none; +} + +.stars { + list-style: none; + display: flex; + flex-direction: row-reverse; + gap: 1rem; + font-size: 5rem; +} + +.star { + opacity: 0.5; + cursor: pointer; + transition: opacity 0.2s; +} + +.stars:hover .star { + opacity: 0.5; +} + +.active, +.active ~ .star { + opacity: 1; +} + +.stars .star:hover, +.stars .star:hover ~ .star { + opacity: 1; +} +``` + +JavaScript: + +```javascript +const rating = document.querySelector('.star-rating') +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()) + } + }) +}) +``` + +## HTML + +В первую очередь создадим HTML-разметку для рейтинга. Элементы связаны по смыслу, поэтому нужно использовать подходящий семантический тег. Также для нативной поддержки фокуса используем тег [` + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + +``` + +Чтобы скринридеры воспринимали элемент целиком и зачитывали его подпись используем связку [`
    `](/html/fieldset/) + [``](/html/legend/). + + +```html +
    + Оцените товар: +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +``` + +Не забудем добавить скрытый [``](/html/span/) с классом [`visually-hidden`](/a11y/content-hidden/#klassy-.visually-hidden-.sr-only-.off-screen). Всему элементу добавим роль [`radiogrup`](/a11y/role-radiogroup/) и будем сохранять текущее значение рейтинга в [дата-атрибут](/html/data-attributes/) `data-rating-value`. Если никакая из звёзд не вбрана значение этого атрибута будет пустым. + +```html +
    + Оцените товар: +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +``` + + + +Разметка готова, можно переходить к стилям. + +## CSS + +В стилях будет своя «изюминка», но начнём с простого. + +Уберём рамку у `
    `, сбросим стандартные стили кнопок, сбросим маркеры у списка. Cкроем текст, предназначенный для скринридеров. Поставим звёзды в ряд, зададим между ними отступ и сделаем их большими. + +```css +button { + background-color: transparent; + border: none; + color: inherit; + cursor: pointer; + font: inherit; + padding: 0; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} + +.star-rating { + text-align: center; + border: none; +} + +.stars { + list-style: none; + font-size: 5rem; + display: flex; + gap: 1rem; +} +``` + + + +Теперь сделаем каждую звезду полупрозрачной при помощи [`opacity`](/css/opacity/) и предусмотрим плавное изменение видимости при помощи свойства [`transition`](/css/transition/). + +```css +.star { + opacity: 0.5; + cursor: pointer; + transition: opacity 0.2s; +} +``` + +При наведении курсора на какую-то из звёзд будем менять её видимость (свойство `opacity`) и видимость всех звёдз, стоящих после неё в разметке, с 0.5 на 1. Потребуется [оператор `~`](/css/combined-selectors/#posleduyushchie-.element1-~-.element2) чтобы выбирать все звёзды, следующие в разметке **после** той, на которую наведён курсор. И про саму звезду, на которую наведён курсор тоже не забудем. [Перечислим](/css/combined-selectors/#gruppirovka-.element1-.element2) эти селекторы через запятую. + +```css +.star:hover, +.star:hover ~ .star { + opacity: 1; +} +``` + + + +Но пока всё работает непривычно, наоборот. Звёзды закрашиваются справа налево, а должны слева направо. Для этого в разметке кнопки поставлены в обратном порядке. Чтобы их можно было перевернуть и получить верный порядок. Для поворота используем свойство [`flex-direction`](/css/flex-direction/) со значением `row-reverse`. + +```css +.stars { + flex-direction: row-reverse; +} +``` + + +## JavaScript + +Теперь нужно реализовать нажатие на звезду. Для этого используем JavaScript. + +Найдём и сохраним в [константы](/js/const/) элемент, оборачивающий весь рейтинг и каждую из звёзд. Для этого используем [`.querySelector`](/js/query-selector/) и [`.querySelectorAll`](/js/query-selector-all/) соответственно. + +Дальше при помощи метода [`forEach()`](/js/array-foreach/) переберём массив со звёздами и каждой из них добавим слушатель события `click` при помощи метода [`addEventListener`](/js/events/#metod-addeventlistener). + +При клике на любую из звёзд запишем её в константу `activeStar`. Пройдёмся по всем звёздам ещё раз чтобы удалить класс `active` с любой из них, где бы он не стоял. Дальше той звезде, по которой кликнули, добавим класс `active`. + +```javascript +const rating = document.querySelector('.star-rating') +const stars = document.querySelectorAll('.star') + +stars.forEach((star, index) => { + star.addEventListener('click', (event) => { + const activeStar = event.currentTarget + + stars.forEach(star => star.classList.remove('active')) + activeStar.classList.add('active') + }) +}) +``` + + + +Если открыть инструменты разработчика для демо выше, то можно увидеть, что при клике на звёздочку у неё появляется класс `active`, но внешне она не меняется. Добавим стили для этого класса и для всех звёзд, стоящих после активной. + +```css +.active, +.active ~ .star { + opacity: 1; +} +``` + +Теперь при клике все звёзды до и та, по которой был клик становятся яркими. + + + +Теперь сделаем так, чтобы при повторном клике оценка убиралась и все звёзды снова становились неактивными. Для этого добавим проверку, есть ли класс `active` у звезды на которую кликнули или нет. + +Если есть, то убираем его, если нет, то добавляем. + +```javascript +const rating = document.querySelector('.star-rating') +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') + } else { + stars.forEach(star => star.classList.remove('active')) + activeStar.classList.add('active') + } + }) +}) +``` + + + +Добавим пару строк чтобы менялось значение атрибута `data-rating-value` в зависимости от того, какая звезда выбрана. Для этого используем свойство [`.dataset`](/js/element-dataset/) и будем _читать_ значение скрытого текста, доставать оттуда цифру при помощи [`parseInt()`](/js/parseint/). + +```javascript +const rating = document.querySelector('.star-rating') +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()) + } + }) +}) +``` + + + +## Ещё немного CSS + +Осталось реализовать последнее требование. По наведению курсора на любую звезду все элементы до неё и она сама становятся активными. Это условие должно работать вне зависимости от того, какой рейтинг сейчас выбран. + +Для этого немного схитрим и будем делать полупрозрачными все звёзды если курсор находится в пределах родительского блока `.stars`. + +```css +.stars:hover .star { + opacity: 0.5; +} +``` + +Теперь доработаем правило для [`:hover`](/css/hover/), которе уже было в CSS. Увеличим вес селектора при помощи класса `.stars` в начале и обязательно подвинем его вниз, под предыдущее правило. Это нужно из-за [принципа каскада](/css/cascade/). Иначе правила начнут перебивать друг друга. + +```css +.stars .star:hover, +.stars .star:hover ~ .star { + opacity: 1; +} +``` + + + +## Финальный код + +Разметка: + +```html +
    + Оцените товар: +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +``` + +Стили: + +```css +legend { + font-size: 24px; + font-weight: 500; +} + +button { + background-color: transparent; + border: none; + color: inherit; + cursor: pointer; + font: inherit; + padding: 0; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} + +.star-rating { + text-align: center; + border: none; +} + +.stars { + list-style: none; + display: flex; + flex-direction: row-reverse; + gap: 1rem; + font-size: 5rem; +} + +.star { + opacity: 0.5; + cursor: pointer; + transition: opacity 0.2s; +} + +.stars:hover .star { + opacity: 0.5; +} + +.active, +.active ~ .star { + opacity: 1; +} + +.stars .star:hover, +.stars .star:hover ~ .star { + opacity: 1; +} +``` + +JavaScript: + +```javascript +const rating = document.querySelector('.star-rating') +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()) + } + }) +}) +``` + +