JavaScriptで星評価（レーティング）の実装

はじめに

JavaScriptでの星評価（レーティング）実装方法です。
開発しているレビューサイトに実装したく、作ってみました。

実装

See the Pen Rating by Penguin-Island (@Penguin-Island) on CodePen.

色変化の概要

クリックをする前は、マウスオーバー/マウスアウトによる色変化を起こします。
しかし一度クリックをすると、色変化を起こさないようにしています。
未クリックかクリック済かの状態を、変数clickedにもたせます。

var clicked = false; //未クリック

マウスオーバー/マウスアウトイベントによる色変化

クリックが一度もされていない場合(clicked==false)のとき、マウスオーバー/マウスアウトによる色変化を起こします。

    stars[i].addEventListener(
      "mouseover",
      () => {
        if (!clicked) { //クリックが一度もされていないとき
          for (let j = 0; j <= i; j++) { //星1から上にカーソルがある星まで
            stars[j].style.color = "#f0da61"; //黄色に
          }
        }
      },
      false
    );

    stars[i].addEventListener(
      "mouseout",
      () => {
        if (!clicked) { //クリックが一度もされていないとき
          for (let j = 0; j < stars.length; j++) { //星1から星5まで
            stars[j].style.color = "#a09a9a"; //グレーに
          }
        }
      },
      false
    );

クリックイベントによる色変化

クリックがされた場合、上記のマウスオーバー/マウスアウトイベントによる色変化は起こらないようになります。
再びクリックした場合、クリックした星とその手前の星が黄色に、以降の星がグレーになります。

        stars[i].addEventListener("click", () => {
            clicked = true; //クリック済
            for (let j = 0; j <= i; j++) {  //星1からクリックされた星まで
                stars[j].style.color = "#f0da61"; //黄色に
            }
            for (let j = i + 1; j < stars.length; j++) {  //クリックされた星の次から星5まで
                stars[j].style.color = "#a09a9a";  //グレーに
            }
        }, false);

おわりに

星の数の増減が簡単なため、3つにしたり10つにしたりアレンジして使えます。
完成してみると単純でしたが、どうすればできるのか悩むのが楽しかったです。