From 5174977726b3f6780e257fdd6312f3d89e73d6b1 Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Sat, 7 Aug 2021 14:57:33 -0400
Subject: [PATCH] Create star project

---
 chapter9/star project | 55 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 chapter9/star project
diff --git a/chapter9/star project b/chapter9/star project
new file mode 100644
index 0000000..267ec3b
--- /dev/null
+++ b/chapter9/star project	
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Star Rater</title>
+    <style>
+        .stars ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        .star {
+            font-size: 2em;
+            color: #ddd;
+            display: inline-block;
+        }
+        .orange {
+            color: orange;
+        }
+        .output {
+            background-color: #ddd;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="stars">
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+    </ul>
+    <div class="output"></div>
+    <script>
+        const starsUL = document.querySelector('.stars');
+        const output = document.querySelector('.output');
+        const stars = document.querySelectorAll('.star');
+        stars.forEach((star, index) => {
+            star.starValue = (index + 1);
+            star.addEventListener('click', starRate);
+        })
+
+        function starRate(e) {
+                output.innerHTML = `You Rated this ${e.target.starValue} stars`;
+                stars.forEach((star, index) => {
+                if (index < e.target.starValue) {
+                    star.classList.add('orange');
+                } else {
+                    star.classList.remove('orange');
+                }
+            })
+        }
+
+    </script>
+</body>
+</html>
