Q: Как можно сделать иконки рейтинга в зависимости от значения на JS? Есть div в котором выводится значение рейтинга, подскажите как можно сделать, чтобы рядом выводились звездочки закрашенные в зависимости от выводимого значения на JS?
Вот сам код где происходит вывод значения:


<div class="stat-items">
 <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">4.50</span></div>
 <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">1</span></div>
</div>


Нужно чтобы вместо слова Рейтинг выводились звездочки соотносящиеся к значению рейтинга. В данном примере величина 4.5
Я нашел пример кода , где происходит нужное действие, только в обратную сторону =)
Помогите переделать его под эту задачу.
Код примера где реализованы звездочки рейтинга
https://jsfiddle.net/0ae4623s/

A: Думаю, что направлю Вас в нужную сторону.
Без CSS и с округлением до целого:


(function fStarsRate() {
  let aRates = document.querySelectorAll('div.stat-items > div:first-child');
  let nValueRate;
  aRates.forEach(function(el) {
    nValueRate = Math.floor(+el.lastElementChild.innerText);
    el.firstElementChild.innerHTML = '&#9733;'.repeat(nValueRate) + '&#9734;'.repeat(5 - nValueRate);
  });
})()
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">4.50</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">1</span></div>
</div>
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">2.20</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">0</span></div>
</div>


С применением псевдоэлемента:


(function fStarsRate() {
  let aRates = document.querySelectorAll('div.stat-items > div:first-child');
  let nValueRate, elSpanStars;
  aRates.forEach(function(el) {
    nValueRate = +el.lastElementChild.innerText;
    elSpanStars = el.firstElementChild;
    elSpanStars.innerHTML = '&#9734;&#9734;&#9734;&#9734;&#9734;';
    elSpanStars.style.backgroundSize = (elSpanStars.offsetWidth - elSpanStars.offsetWidth / 5 * nValueRate - 2) + 'px 120px';
  });
})()
div.stat-item:first-child>span.title {
  position: relative;
  display: inline-block;
  color: rgba(240, 245, 255, 0.9);
  font: 40px 'Arial';
  letter-spacing: -4px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(90deg, white, white);
  background-repeat: no-repeat;
  background-position: 100% 0%;
}

div.stat-item:first-child>span.title:after {
  content: '★★★★★';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #fa0;
  letter-spacing: -4px;
}
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">4.50</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">1</span></div>
</div>
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">2.39</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">0</span></div>
</div>
<div class="stat-items">
  <div title="" class="stat-item"><span class="title">Рейтинг:</span> <span class="value">3.60</span></div>
  <div title="" class="stat-item"><span class="title">Просмотры:</span> <span class="value">0</span></div>
</div>


