From ec4ae6e57d30b50a65ea6aca977b572e6d1b4ec0 Mon Sep 17 00:00:00 2001
From: Karan <50290386+Sonawane-Karan26@users.noreply.github.com>
Date: Wed, 24 Nov 2021 22:51:28 +0530
Subject: [PATCH] Project 2

---
 Chapter 11/Project 2 | 53 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 Chapter 11/Project 2
diff --git a/Chapter 11/Project 2 b/Chapter 11/Project 2
new file mode 100644
index 0000000..27ae87c
--- /dev/null
+++ b/Chapter 11/Project 2	
@@ -0,0 +1,53 @@
+<!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>
