add star rating ui

css/video_page.css

@@ -68,4 +68,20 @@
   font-size: 1.2rem;
   cursor: pointer;
 }
-/* Modifiers */
+
+.star i {
+  color: rgba(243, 211, 28, 0.966);
+  transition: color 0.3s ease;
+  font-size: 1.25rem;
+}
+
+.star:hover i {
+  color: rgba(243, 211, 28, 0.966);
+  cursor: pointer;
+}
+
+.star:hover~.star i {
+  color: rgba(243, 211, 28, 0.966);
+}
+
+/* Modifiers */

js/star_rating.js

@@ -0,0 +1,34 @@
+const stars = document.querySelectorAll(".far.fa-star");
+
+let clickedStarIndex = -1; // global variable to keep track of clicked star
+
+function hoverStar() {
+  stars.forEach((star, index) => {
+    star.addEventListener("mouseover", () => {
+      updateStars(index, "mouseover");
+    });
+    star.addEventListener("mouseout", () => {
+      updateStars(clickedStarIndex, "mouseout");
+    });
+    star.addEventListener("click", () => {
+      clickedStarIndex = index;
+      updateStars(clickedStarIndex, "click");
+    });
+  });
+}
+
+function updateStars(starIndex, eventType) {
+  stars.forEach((star, index) => {
+    if (index <= starIndex) {
+      star.classList.remove("far");
+      star.classList.add("fas");
+    } else {
+      if (eventType !== "click" || index > clickedStarIndex) {
+        star.classList.remove("fas");
+        star.classList.add("far");
+      }
+    }
+  });
+}
+
+hoverStar();

pages/video_page.php

@@ -82,7 +82,13 @@
             <div class="player__stats__ratings">
                 <div class="player__stats__ratings__left">
                     <p class="rate">Rate this video: </p>
-                    <span class="stars">⭐⭐⭐⭐⭐</span>
+                    <div id="stars">
+                        <span class="star" data-rating="1"><i class="far fa-star"></i></span>
+                        <span class="star" data-rating="2"><i class="far fa-star"></i></span>
+                        <span class="star" data-rating="3"><i class="far fa-star"></i></span>
+                        <span class="star" data-rating="4"><i class="far fa-star"></i></span>
+                        <span class="star" data-rating="5"><i class="far fa-star"></i></span>
+                    </div>
                 </div>
                 <div class="player__stats__ratings__right">
                     <p class="ratings">
@@ -139,6 +145,7 @@
 
 
     <script src="../js/close_modal.js"></script>
+    <script src="../js/star_rating.js"></script>
 
     <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
 </body>