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

Question

TipTop89 @TipTop89

JavaScript

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

Подскажите, как реализовать звездный рейтинг что-бы при наведении звезды закрашивались и при клике в инпут попадало количество закрашенных звезд? Спасибо!

const ratings = document.querySelectorAll('.rating');
    if (ratings.length > 0) {
        initRatings();
    }
    // Основная функция
    function initRatings() {
        let ratingActive, ratingValue;
        // "Бегаем" по всем рейтингам на странице
        for (let index = 0; index < ratings.length; index++) {
            const rating = ratings[index];
            initRating(rating);
        }
        // Инициализируем конкретный рейтинг
        function initRating(rating) {
            initRatingVars(rating);

            setRatingActiveWidth();

            if (rating.classList.contains('rating_set')) {
                setRating(rating);
            }

        }
        // Инициализайция переменных
        function initRatingVars(rating) {
            ratingActive = rating.querySelector('.rating__activeline');
            ratingValue = rating.querySelector('.rating-input');
        }
        // Изменяем ширину активных звезд
        function setRatingActiveWidth() {
            if (ratingValue) {
                const ratingActiveWidth = ratingValue.value / 0.05;
                ratingActive.style.width = `${ratingActiveWidth}%`;
            }
        };

        if (ratingValue) {
            ratingValue.addEventListener('change', function () {
                setRatingActiveWidth();
            });
        };

        // Возможность указать оценку 
        function setRating(rating) {
            const ratingItems = rating.querySelectorAll('.rating__star');
            for (let index = 0; index < ratingItems.length; index++) {
                const ratingItem = ratingItems[index];
                ratingItem.addEventListener("mouseenter", function (e) {
                    ratingActive.style.width = '0%';
                    let linew = (index + 1) / 0.05;
                    ratingActive.style.width = `${linew}%`;
                    initRatingVars(rating);
                });
                ratingItem.addEventListener("click", function (e) {

                    // Обновление переменных
                    initRatingVars(rating);

                    if (rating.dataset.ajax) {
                        // "Отправить" на сервер
                        setRatingValue(ratingItem.value, rating);
                    } else {
                        // Отобразить указанную оцнку
                        ratingValue.value = index + 1;
                        setRatingActiveWidth();
                    }
                });

            }
        }
    }

.rating {
  display: flex;
  flex-wrap: wrap;
}

.rating__body {
  display: inline-block;
  position: relative;
  width: 101px;
  user-select: none;
}

.rating__line {
  position: absolute;
  width: 101px;
  height: 16px;
  top: 0;
  left: 0;
  background: 0 0 / auto 16px url("https://i.ibb.co/RYvRDph/bg-rating.png")
    no-repeat;
}

.rating__activeline {
  position: absolute;
  width: 0px;
  height: 16px;
  top: 0;
  left: 0;
  background: 0 0 / auto 16px
    url("https://i.ibb.co/QbhcQwD/bg-rating-active.png") no-repeat;
  z-index: 2;
}

.rating__star {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  z-index: 3;
}

.rating__value {
  font-weight: 600;
  font-size: 18px;
}

.rating__input {
  width: 100%;
}

<div class="rating">
  <div class="rating__body rating_set">
    <div class="rating__line"></div>
    <div class="rating__activeline"></div>
    <div class="rating__stars">
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
      <span class="rating__star"></span>
    </div>
    <input
      data-required
      value="3"
      autocomplete="off"
      type="number"
      min="1"
      max="5"
      name="rating"
      class="rating-input"
    />
  </div>
</div>