<div id="build-rating" class="hidden">

<h3>Your Build Rating</h3>

<div class="rating-row" data-category="overallRating">
<label>Overall Utility</label>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<input type="hidden" name="overallRating" value="0">
</div>

<div class="rating-row" data-category="easeOfUseRating">
<label>Ease of Use</label>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<input type="hidden" name="easeOfUseRating" value="0">
</div>

</div>

build-calculator.html

@@ -98,14 +98,14 @@
                     <div class="space-y-4">
                         <div class="rating-row" data-category="overallRating">
                             <label class="block text-gray-700 mb-1">Overall Utility</label>
-                            <div class="flex space-x-1">
-                                <span class="star text-2xl cursor-pointer" data-value="1">☆</span>
-                                <span class="star text-2xl cursor-pointer" data-value="2">☆</span>
-                                <span class="star text-2xl cursor-pointer" data-value="3">☆</span>
-                                <span class="star text-2xl cursor-pointer" data-value="4">☆</span>
-                                <span class="star text-2xl cursor-pointer" data-value="5">☆</span>
+                            <div class="flex">
+                                <span class="star" data-value="1">☆</span>
+                                <span class="star" data-value="2">☆</span>
+                                <span class="star" data-value="3">☆</span>
+                                <span class="star" data-value="4">☆</span>
+                                <span class="star" data-value="5">☆</span>
                             </div>
-                            <input type="hidden" name="overallRating" value="0">
+<input type="hidden" name="overallRating" value="0">
                         </div>
                         
                         <div class="rating-row" data-category="easeRating">

script.js

@@ -1,10 +1,25 @@
 
 // Build Calculator and Utility Handling
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize star ratings
-    setupStarRatings('build-rating');
-    
-    const buildForm = document.getElementById('build-form');
+// Star Rating Functionality
+document.addEventListener('click', function(e) {
+    if (e.target.classList.contains('star')) {
+        const stars = e.target.parentElement.querySelectorAll('.star');
+        const rating = parseInt(e.target.getAttribute('data-value'));
+        const hiddenInput = e.target.parentElement.nextElementSibling;
+        
+        stars.forEach((star, index) => {
+            if (index < rating) {
+                star.classList.add('active');
+            } else {
+                star.classList.remove('active');
+            }
+        });
+        
+        hiddenInput.value = rating;
+    }
+});
+const buildForm = document.getElementById('build-form');
 const previewElements = {
         toon: document.getElementById('preview-toon'),
         buildName: document.getElementById('preview-build-name'),

style.css

@@ -27,19 +27,30 @@ body {
     background: #2563EB;
 }
 /* Star Rating */
+.rating-row {
+    margin-bottom: 1rem;
+}
+.rating-row label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #374151;
+}
 .star {
     transition: all 0.2s ease;
     color: #d1d5db; /* gray-300 */
+    cursor: pointer;
+    font-size: 1.5rem;
+    margin-right: 0.25rem;
 }
 .star:hover,
-.star.rated {
+.star.active {
     color: #f59e0b; /* yellow-500 */
     transform: scale(1.2);
 }
 .star:hover ~ .star {
-    color: #d1d5db; /* gray-300 */
+    color: #d1d5db;
 }
-
 /* Animation classes */
 .fade-in {
     animation: fadeIn 0.5s ease-in-out;