Star Review Form

<div class="card border-0 shadow-sm" style="max-width:340px"><div class="card-body">
  <h6 class="fw-bold mb-2">Write a review</h6>
  <div class="fs-4 mb-2" id="rvStars" style="cursor:pointer;color:#ffc107"><span data-v="1">☆</span><span data-v="2">☆</span><span data-v="3">☆</span><span data-v="4">☆</span><span data-v="5">☆</span></div>
  <textarea class="form-control mb-2" rows="2" placeholder="Your thoughts…"></textarea>
  <button class="btn btn-primary btn-sm w-100" id="rvSubmit">Submit review</button>
</div></div>

var stars=document.querySelectorAll('#rvStars span'),sel=0;
function paint(n){stars.forEach(function(s,i){s.textContent=i<n?'★':'☆'})}
stars.forEach(function(s){s.onmouseenter=function(){paint(+s.dataset.v)};s.onclick=function(){sel=+s.dataset.v}});
document.getElementById('rvStars').onmouseleave=function(){paint(sel)};
document.getElementById('rvSubmit').onclick=function(){Swal.fire({icon:sel?'success':'warning',title:sel?'Thanks!':'Pick a rating',text:sel?'Your '+sel+'-star review was submitted.':'Please select a star rating.'})};