From 0cc86349679078a8c905852d95b1c3b64e06724e Mon Sep 17 00:00:00 2001
From: Sanjit Joseph <smjoseph@ucsd.edu>
Date: Sun, 13 Nov 2022 00:09:52 -0800
Subject: [PATCH] Implement star rating across all html forms

---
 ReviewDetails.html    | 30 +++++++++-------------------
 index.html            | 30 +++++++++-------------------
 static/ReviewCard.css | 46 +++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/ReviewDetails.html b/ReviewDetails.html
index 6ea0ca6..a2aea68 100644
--- a/ReviewDetails.html
+++ b/ReviewDetails.html
@@ -45,28 +45,16 @@
           <textarea name="comments" id="comments"></textarea>
         </label>
       </fieldset>
-      <fieldset>
-        <legend>Rating</legend>
-        <label for="rating-0">
-          0<input type="radio" id="rating-0" value="0" name="rating" required>
-        </label>
-        <label for="rating-1">
-          1<input type="radio" id="rating-1" value="1" name="rating">
-        </label>
-        <label for="rating-2">
-          2<input type="radio" id="rating-2" value="2" name="rating">
-        </label>
-        <label for="rating-3">
-          3<input type="radio" id="rating-3" value="3" name="rating">
-        </label>
-        <label for="rating-4">
-          4<input type="radio" id="rating-4" value="4" name="rating">
-        </label>
-        <label for="rating-5">
-          5<input type="radio" id="rating-5" value="5" name="rating">
-        </label>
-  
+      
+      <fieldset class="rating">
+        <legend> Rating: </legend>
+        <input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
+        <input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
+        <input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
+        <input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
+        <input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
       </fieldset>
+
       <fieldset>
         <legend>Other Info:</legend>
         <label for="restaurant">
diff --git a/index.html b/index.html
index e399699..159a2b8 100644
--- a/index.html
+++ b/index.html
@@ -46,28 +46,16 @@
         <textarea name="comments" id="comments"></textarea>
       </label>
     </fieldset>
-    <fieldset>
-      <legend>Rating</legend>
-      <label for="rating-0">
-        0<input type="radio" id="rating-0" value="0" name="rating" required>
-      </label>
-      <label for="rating-1">
-        1<input type="radio" id="rating-1" value="1" name="rating">
-      </label>
-      <label for="rating-2">
-        2<input type="radio" id="rating-2" value="2" name="rating">
-      </label>
-      <label for="rating-3">
-        3<input type="radio" id="rating-3" value="3" name="rating">
-      </label>
-      <label for="rating-4">
-        4<input type="radio" id="rating-4" value="4" name="rating">
-      </label>
-      <label for="rating-5">
-        5<input type="radio" id="rating-5" value="5" name="rating">
-      </label>
-
+    
+    <fieldset class="rating">
+      <legend> Rating: </legend>
+      <input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
+      <input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
+      <input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
+      <input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
+      <input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
     </fieldset>
+
     <fieldset>
       <legend>Other Info:</legend>
       <label for="restaurant">
diff --git a/static/ReviewCard.css b/static/ReviewCard.css
index 96e4ce3..50ec840 100644
--- a/static/ReviewCard.css
+++ b/static/ReviewCard.css
@@ -79,6 +79,48 @@
   border-color: red;
 }
 
-.hidden {
-  display: none;
+.hidden, 
+.rating:not(:checked) > input { /* Hide radio circles while star rating */
+display: none;
+}
+
+/* Unchecked stars */
+.rating:not(:checked) > label {
+  /* Make stars line up sideways and not vertically */
+  float:right; 
+
+  /* Hide label text */
+  width:1em;
+  overflow:hidden;
+  white-space:nowrap;
+
+  font-size:200%;
+  line-height:1.2;
+  color:#b3b3cc; 
+}
+
+.rating:not(:checked) > label:before {
+  content:'★';
+}
+
+/* Checked star color */
+.rating > input:checked ~ label {
+  color: #FFBF00;
+}
+
+.rating:not(:checked) > label:hover,
+.rating:not(:checked) > label:hover ~ label {
+  color: orangered;
+}
+
+.rating > input:checked + label:hover,
+.rating > input:checked + label:hover ~ label,
+.rating > input:checked ~ label:hover,
+.rating > input:checked ~ label:hover ~ label,
+.rating > label:hover ~ input:checked ~ label {
+  color: orangered;
+}
+
+.rating > label:active {
+  position:relative;
 }