星評価

<div class="d04-02-09-rate">
          <div class="d04-02-09-stars" role="radiogroup" aria-label="評価">
            <button type="button" class="d04-02-09-star" data-v="1" aria-label="星1">★</button>
            <button type="button" class="d04-02-09-star" data-v="2" aria-label="星2">★</button>
            <button type="button" class="d04-02-09-star" data-v="3" aria-label="星3">★</button>
            <button type="button" class="d04-02-09-star" data-v="4" aria-label="星4">★</button>
            <button type="button" class="d04-02-09-star" data-v="5" aria-label="星5">★</button>
          </div>
          <p class="d04-02-09-msg">タップして評価してください</p>
        </div>

.d04-02-09-rate{text-align:center}
        .d04-02-09-stars{display:flex;gap:6px;justify-content:center}
        .d04-02-09-star{
          border:none;background:none;padding:2px;cursor:pointer;
          font-size:34px;line-height:1;color:#d5d9e0;
          transition:color .15s,transform .15s;
        }
        .d04-02-09-star.is-on{color:#f5a623}
        .d04-02-09-star:hover{transform:scale(1.2)}
        .d04-02-09-star.is-fixed{animation:d04-02-09-pop .3s ease}
        .d04-02-09-msg{margin:14px 0 0;font-size:13px;color:#8a93a3;min-height:1.4em}
        .d04-02-09-msg.is-done{color:#f5a623;font-weight:700}
        @keyframes d04-02-09-pop{
          0%{transform:scale(1)}
          50%{transform:scale(1.35)}
          100%{transform:scale(1)}
        }

(function(){
        var rate=document.querySelector('.d04-02-09-rate');
        if(!rate)return;
        var stars=Array.prototype.slice.call(rate.querySelectorAll('.d04-02-09-star'));
        var msg=rate.querySelector('.d04-02-09-msg');
        var labels=['','悪い','いまいち','ふつう','良い','最高!'];
        var current=0;
        function paint(n){
          stars.forEach(function(s,i){s.classList.toggle('is-on',i<n);});
        }
        stars.forEach(function(s,i){
          s.addEventListener('mouseenter',function(){paint(i+1);});
          s.addEventListener('click',function(){
            current=i+1;
            paint(current);
            s.classList.remove('is-fixed');
            void s.offsetWidth;
            s.classList.add('is-fixed');
            msg.textContent='評価: '+current+' - '+labels[current];
            msg.classList.add('is-done');
          });
        });
        rate.querySelector('.d04-02-09-stars').addEventListener('mouseleave',function(){
          paint(current);
        });
      })();