Add files via upload

namesomethin3 · web-flow · commit bde9930aa640 · 2023-02-26T08:40:39.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Emoji Rating</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <div class="feedback-container">
+      <div class="emoji-container">
+        <i class="fa-regular fa-face-angry fa-3x"></i>
+        <i class="fa-regular fa-face-frown fa-3x"></i>
+        <i class="fa-regular fa-face-meh fa-3x"></i>
+        <i class="fa-regular fa-face-smile fa-3x"></i>
+        <i class="fa-regular fa-face-laugh fa-3x"></i>
+      </div>
+      <div class="rating-container">
+        <i class="fa-solid fa-star fa-2x"></i>
+        <i class="fa-solid fa-star fa-2x"></i>
+        <i class="fa-solid fa-star fa-2x"></i>
+        <i class="fa-solid fa-star fa-2x"></i>
+        <i class="fa-solid fa-star fa-2x"></i>
+      </div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,29 @@
+const starsEl = document.querySelectorAll(".fa-star");
+const emojisEl = document.querySelectorAll(".fa-regular");
+const colorArray = ["red", "orange", "yellow", "blue", "green"];
+
+updateRating(0);
+
+starsEl.forEach((starEl, index) => {
+  starEl.addEventListener("click", () => {
+    updateRating(index);
+  });
+});
+
+// In a forEach loop, the function passed as an argument is called once for each element in the array. The function takes up to three arguments: the current element, the index of the current element, and the array being traversed.
+// The first argument, starEl, is the current element in the array, which represents a single star icon. The second argument, index, is the index of the current element in the array. So, in this loop, index represents the current index of the starEl element.
+
+function updateRating(index) {
+  starsEl.forEach((starEl, idx) => {
+    if (idx < index + 1) {
+      starEl.classList.add("active");
+    } else {
+      starEl.classList.remove("active");
+    }
+  });
+
+  emojisEl.forEach((emojiEl) => {
+    emojiEl.style.transform = `translateX(-${index * 50}px)`;
+    emojiEl.style.color = colorArray[index];
+  });
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,53 @@
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
+  align-items: center;
+  background-color: #9eeb53;
+}
+
+.feedback-container {
+  background-color: #8bcff1;
+  width: 400px;
+  height: 200px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  position: relative;
+}
+
+.emoji-container {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 20%;
+  /* background-color: #ffa6ca; */
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  overflow: hidden;
+  /* will hide emojis outside of the container i.e. the other emojis */
+}
+
+.fa-regular {
+  margin: 1px;
+  transform: translateX(0);
+  transition: transform 0.2s;
+}
+
+.fa-star{
+    color: #43474b;
+    cursor: pointer;
+}
+
+.rating-container{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20%;
+}
+
+.fa-star.active{
+    color: #fbc200;
+}
