DhanushNehru · Mefisto04 · Oct 30, 2023
diff --git a/Color-Picker/index.html b/Color-Picker/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div class="popup">
+      <div class="picker">
+        <button id="color-picker">Pick Color</button>
+      </div>
+      <div class="picked-colors hide">
+        <header>
+          <p class="title">Picked colors</p>
+          <span class="clear-all">Clear All</span>
+        </header>
+        <ul class="all-colors"></ul>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Color-Picker/script.js b/Color-Picker/script.js
@@ -0,0 +1,60 @@
+const colorPickerBtn = document.querySelector("#color-picker");
+const clearAll = document.querySelector(".clear-all");
+const colorList = document.querySelector(".all-colors");
+const pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");
+
+// Copying the color code to the clipboard and updating the element text
+const copyColor = (elem) => {
+    elem.innerText = "Copied";
+    navigator.clipboard.writeText(elem.dataset.color);
+    // setTimeout(() => elem.innerText = elem.dataset.color, 1000);
+}
+
+const showColor = () => {
+    if(!pickedColors.length) return; // Returning if there are no picked colors
+    colorList.innerHTML = pickedColors.map(color => `
+        <li class="color">
+            <span class="rect" style="background: ${color}; border: 1px solid ${color == "#ffffff" ? "#ccc": color}"></span>
+            <span class="value hex" data-color="${color}">${color}</span>
+        </li>
+    `).join(""); // // Generating li for the picked color and adding it to the colorList
+    document.querySelector(".picked-colors").classList.remove("hide");
+
+    // Add a click event listener to each color element to copy the color code
+    document.querySelectorAll(".color").forEach(li => {
+        li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild));
+    });
+}
+showColor();
+
+const activateEyeDropper = () => {
+    document.body.style.display = "none";
+    setTimeout(async () => {
+        try {
+            // Opening the eye dropper and getting the selected color
+            const eyeDropper = new EyeDropper();
+            const { sRGBHex } = await eyeDropper.open();
+            navigator.clipboard.writeText(sRGBHex);
+
+            // Adding the color to the list if it doesn't already exist
+            if(!pickedColors.includes(sRGBHex)) {
+                pickedColors.push(sRGBHex);
+                localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
+                showColor();
+            }
+        } catch (error) {
+            alert("Failed to copy the color code!");
+        }
+        document.body.style.display = "block";
+    }, 10);
+}
+
+// Clearing all picked colors, updating local storage, and hiding the colorList element
+const clearAllColors = () => {
+    pickedColors.length = 0;
+    localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
+    document.querySelector(".picked-colors").classList.add("hide");
+}
+
+clearAll.addEventListener("click", clearAllColors);
+colorPickerBtn.addEventListener("click", activateEyeDropper);
diff --git a/Color-Picker/styles.css b/Color-Picker/styles.css
@@ -0,0 +1,79 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+.popup {
+  width: 350px;
+  background: #fff;
+}
+.popup :where(.picker, header, .all-colors) {
+  display: flex;
+  align-items: center;
+}
+.popup .picker {
+  padding: 30px 0;
+  background: #E3F2FD;
+  justify-content: center;
+}
+.picker #color-picker {
+  border: none;
+  outline: none;
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 10px 20px;
+  border-radius: 5px;
+  background: #5372F0;
+  transition: 0.3s ease;
+}
+#color-picker:hover {
+  background: #2c52ed;
+}
+.picked-colors {
+  margin: 10px 15px;
+}
+.picked-colors header {
+  justify-content: space-between;
+}
+header .title {
+  font-size: 1rem;
+}
+header .clear-all {
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: #5372F0;
+}
+header .clear-all:hover {
+  color: #143feb;
+}
+.picked-colors.hide {
+  display: none;
+}
+.picked-colors .all-colors {
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 10px 0 15px;
+}
+.all-colors .color {
+  display: flex;
+  cursor: pointer;
+  margin-bottom: 10px;
+  width: calc(100% / 3);
+}
+.all-colors .rect {
+  height: 21px;
+  width: 21px;
+  display: block;
+  margin-right: 8px;
+  border-radius: 5px;
+}
+.all-colors .color span {
+  font-size: 0.96rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  font-family: "Open sans";
+}