Create rating mechanism (with starry star and stuff)

css/order.css

@@ -61,9 +61,13 @@
 #preferred_driver {
 }
 
+form#submit_cmplt_ordr div {
+	size: 
+}
+
 .star {
-	size: 300%;
-	color: yellow;
+	font-size: 50px;
+	color: gray;
 }
 
 #order_link {

order/complete_order.php

@@ -60,17 +60,18 @@
 				</h2>
 				<div>
 					<?php echo "
-					<img class='driver_pict' src='../profile/getProfilePict.php?id=".$user_id."'>"
+					<img class='driver_pict' src='../profile/getProfilePict.php?id=".$seldrv."'>"
 					;?>
 					<p> @<?php echo $driver_username;?></p>
 					<p> <?php echo $driver_name;?></p>
 				</div>
 				<div class="rating_bar">
-					<span class="star" id="1-star">&starf;</span>
-					<span class="star" id="2-star">&starf;</span>
-					<span class="star" id="3-star">&starf;</span>
-					<span class="star" id="4-star">&starf;</span>
-					<span class="star" id="5-star">&starf;</span>
+					<span class="star" id="1-star" onclick="rate1()" onmouseover="light1()">&starf;</span>
+					<span class="star" id="2-star" onclick="rate2()" onmouseover="light2()">&starf;</span>
+					<span class="star" id="3-star" onclick="rate3()" onmouseover="light3()">&starf;</span>
+					<span class="star" id="4-star" onclick="rate4()" onmouseover="light4()">&starf;</span>
+					<span class="star" id="5-star" onclick="rate5()" onmouseover="light5()">&starf;</span>
+					<input type="hidden" name="rating" id="rating">
 				</div>
 				<div>
 					<textarea id="comment" name="comment" form="submit_cmplt_ordr">
@@ -89,8 +90,69 @@
 	var star3 = document.getElementById('3-star');
 	var star4 = document.getElementById('4-star');
 	var	star5 = document.getElementById('5-star');
+	var rate = document.getElementById('rating');
 
-	star1.
+	function rate1() {
+		rate.value = 1;
+		light1();
+	}	
+	function rate2() {
+		rate.value = 2;
+		light2();
+	}
+	function rate3() {
+		rate.value = 3;
+		light3();
+	}
+	function rate4() {
+		rate.value = 4;
+		light4();
+	}
+	function rate5() {
+		rate.value = 5;
+		light5();
+	}	
+
+	function light1() {
+		rate.value = 1;
+		star1.style.color = "yellow";
+		star2.style.color = "gray";
+		star3.style.color = "gray";
+		star4.style.color = "gray";
+		star5.style.color = "gray";
+	}
+	function light2() {
+		rate.value = 2;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "gray";
+		star4.style.color = "gray";
+		star5.style.color = "gray";
+	}
+	function light3() {
+		rate.value = 3;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "yellow";
+		star4.style.color = "gray";
+		star5.style.color = "gray";
+	}
+	function light4() {
+		rate.value = 4;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "yellow";
+		star4.style.color = "yellow";
+		star5.style.color = "gray";
+	}
+	function light5() {
+		rate.value = 5;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "yellow";
+		star4.style.color = "yellow";
+		star5.style.color = "yellow";
+	}
 
 </script>
 </html>
\ No newline at end of file