Star Rating

<!-- Star Rating · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="srt" role="radiogroup" aria-label="Beoordeling"><button class="srt__s" aria-label="1 ster"></button><button class="srt__s" aria-label="2 sterren"></button><button class="srt__s" aria-label="3 sterren"></button><button class="srt__s" aria-label="4 sterren"></button><button class="srt__s" aria-label="5 sterren"></button></div>
</div>

/* Star Rating · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.srt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff}
.srt__s{width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E");background-color:#0a0a0a1f;transition:background-color .15s,transform .15s}
.srt__s:hover{transform:scale(1.18)}.srt:not(:hover) .srt__s.is-on,.srt__s.is-hot{background-color:#F5480F}

// Star Rating · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var stars=[].slice.call(root.querySelectorAll('.srt__s'));var locked=0;
function paint(n){stars.forEach(function(s,i){s.classList.toggle('is-hot',i<n);});}
stars.forEach(function(s,i){s.addEventListener('mouseenter',function(){paint(i+1);});s.addEventListener('click',function(){locked=i+1;stars.forEach(function(x,j){x.classList.toggle('is-on',j<locked);});});});
root.querySelector('.srt').addEventListener('mouseleave',function(){paint(0);});
}
init(document.querySelector('.jouw-container'));