Как сделать звёздный рейтинг в сниппете?

Для создания звездного рейтинга в HTML сниппете мы можем использовать иконки звезд и небольшой JavaScript код.

1. Сначала добавим CSS стиль для наших звезд. Мы можем использовать иконки в виде шрифтов (например, Font Awesome), изображения или символы Unicode. В этом примере мы будем использовать символы Unicode, так как они являются наиболее гибким способом.

.star {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: #FFD700; /* желтый цвет */
  font-size: 16px;
  font-family: Arial, sans-serif;
}

2. Теперь добавим JavaScript код, чтобы реализовать интерактивность рейтинга. В нашем случае, при наведении мышки на звезду или нажатии на нее, мы устанавливаем соответствующий класс, чтобы подсветить все звезды до этой.

// 1. Получение всех звезд
var stars = document.getElementsByClassName('star');

// 2. Добавление обработчика событий для каждой звезды
for (var i = 0; i < stars.length; i++) {
  stars[i].addEventListener('mouseover', starMouseOver);
  stars[i].addEventListener('mouseleave', starMouseLeave);
  stars[i].addEventListener('click', starClick);
}

// 3. Функция для обработки события наведения мыши на звезду
function starMouseOver() {
  var currentStarIndex = Array.prototype.indexOf.call(stars, this);
  for (var i = 0; i <= currentStarIndex; i++) {
    stars[i].classList.add('filled');
  }
}

// 4. Функция для обработки события ухода мыши с звезды
function starMouseLeave() {
  for (var i = 0; i < stars.length; i++) {
    stars[i].classList.remove('filled');
  }
}

// 5. Функция для обработки события клика по звезде
function starClick() {
  var currentStarIndex = Array.prototype.indexOf.call(stars, this);
  for (var i = 0; i <= currentStarIndex; i++) {
    stars[i].classList.toggle('selected');
  }
}

3. Теперь мы можем добавить наши звезды в HTML как сниппет:

<div class="rating">
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>

4. И, наконец, добавим немного CSS стиля для звездного рейтинга:

.rating {
  display: inline-block;
}

Теперь мы получим звездный рейтинг с возможностью интерактивного выставления оценки. При наведении мышки на звезду или нажатии на нее, все предыдущие звезды будут подсвечены, а кликнутые звезды будут отмечены специальным классом.