實作打星功能

STEP 1：製作星星圖示

這個很簡單，去 Font Awesome 之類的網站找個 Icon 就行了。當然如果你想要手刻星星，我也是不反對，只是這裡不示範就是了 XD

<!-- 下方 JS 會判斷輸入的星數 -->
<div class="h5 mb-0">
  <a href="#" class="text-decoration-none commentStar star-count-1">
    <i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
  </a>
  <a href="#" class="text-decoration-none commentStar star-count-2">
    <i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
  </a>
  <a href="#" class="text-decoration-none commentStar star-count-3">
    <i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
  </a>
  <a href="#" class="text-decoration-none commentStar star-count-4">
    <i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
  </a>
  <a href="#" class="text-decoration-none commentStar star-count-5">
    <i class="fa fa-star text-light p-1 bg-secondary" aria-hidden="true"></i>
  </a>
</div>

STEP 2：JavaScript 判斷輸入的星數

我們用 JavaScript 綁定每個星星 Icon，當點擊到某一顆星星時，就將它前方的星星（包含點到的那顆）改成紅色 bg-danger，後方的星星改為灰色。
如此一來，我們就完成星級評鑑功能的顯示效果囉！

let starIcon = document.querySelectorAll('.commentStar i');
for (let i = 0; i < starIcon.length; i++) {
  starIcon[i].addEventListener(
    'click',
    function(event) {
      event.preventDefault();
      console.log('preventDefault will stop you from checking this checkbox!');
      console.log(this);
      for (let j = 0; j <= i; j++) {
        starIcon[j].classList.add('bg-danger');
        console.log('第 ' + j + ' 號星 加上紅色');
      }
      for (let k = 4; k > i; k--) {
        starIcon[k].classList.remove('bg-danger');
        console.log('第 ' + k + ' 號星 去除紅色');
      }
      var starNumber = i + 1; // starNumber = 傳到資料庫的星數
      console.log('評論星數為 ' + starNumber);
    },
    false
  );
}

至於最後加上 starNumber 這兩行 Code，是要讓遠端資料庫（例如：Firestore）能夠得到這個 number 型別的資料。
例如：客戶若評分為五星，則將 5 這個數字傳回 Database，之後就能把 5 這個星數等級再應用於其他頁面上了。

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫