new update

z1shivam · Oct 27, 2023 · 9966057 · 9966057
1 parent e3ed27f
commit 9966057
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
     </header>
     <div class="colorHistory" id="colorHistory">
       <ul id="colorHistoryUL">
-        <li>#212121</li>
+
       </ul>
     </div>
     <div class="colorViewer" id="colorViewer"></div>
@@ -30,6 +30,11 @@
       <button id="copy" data-clipboard-target="#colCode">
         <span class="material-symbols-rounded">content_copy</span>
       </button>
+      <button id="clearHistory">
+        <span class="material-symbols-rounded">
+          delete_history
+          </span>
+      </button>
     </div>
   </body>
   <script src="script.js"></script>

diff --git a/script.js b/script.js
@@ -1,9 +1,35 @@
+let clipboard = new ClipboardJS("#copy");
+
 let colorViewer = document.getElementById("colorViewer");
 let colCode = document.getElementById("colCode");
-let clipboard = new ClipboardJS("#copy");
 let generatedColour = "#212121";
 let colorHistoryUL = document.getElementById("colorHistoryUL");
 
+let colorHistory = [];
+if (localStorage.getItem("colorHistory") !== null) {
+  colorHistory = JSON.parse(localStorage.getItem("colorHistory"));
+} else {
+  colorHistory = ["#212121"];
+}
+
+const setAsCurrent = (e) => {
+  colorViewer.style.backgroundColor = e;
+  colCode.textContent = e;
+};
+
+const createElement = (color) => {
+  colorViewer.style.backgroundColor = color[0];
+  colCode.textContent = color[0];
+  colorHistoryUL.innerHTML = "";
+  colorHistory.forEach((color) => {
+    let createdEl = document.createElement("li");
+    createdEl.textContent = color;
+    createdEl.style.backgroundColor = color;
+    colorHistoryUL.appendChild(createdEl);
+  });
+};
+createElement(colorHistory);
+
 let refresh = document
   .getElementById("refresh")
   .addEventListener("click", (e) => {
@@ -12,14 +38,22 @@ let refresh = document
     for (let i = 1; i <= 6; i++) {
       generatedColour += hexString.charAt(Math.floor(Math.random() * 16));
     }
-    colorViewer.style.backgroundColor = generatedColour;
-    colCode.innerText = generatedColour;
-
-    let createdEl = document.createElement("li");
-    createdEl.textContent = generatedColour;
-    createdEl.style.backgroundColor = generatedColour;
-    if (colorHistoryUL.children.length >= 9) {
-      colorHistoryUL.removeChild(colorHistoryUL.lastChild);
+    colorHistory.unshift(generatedColour);
+    if (colorHistory.length > 10) {
+      colorHistory.pop();
     }
-    colorHistoryUL.insertBefore(createdEl, colorHistoryUL.firstChild);
+    createElement(colorHistory);
+    localStorage.setItem("colorHistory", JSON.stringify(colorHistory));
+
+    document.querySelectorAll("li").forEach((li) => {
+      li.addEventListener("click", (e) => {
+        setAsCurrent(e.target.textContent);
+      });
+    });
   });
+
+document.getElementById("clearHistory").addEventListener("click", (e) => {
+  colorHistory = ["#212121"];
+  createElement(colorHistory);
+  localStorage.setItem("colorHistory", JSON.stringify(colorHistory));
+});
diff --git a/style.css b/style.css
@@ -3,6 +3,7 @@
 *{
     padding: 0;
     margin:0;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .mainHeader{
@@ -13,9 +14,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
 }
 
+
 .logo{
     text-align: center;
     color: #fffff0;
@@ -99,7 +100,7 @@ ul li{
     background-color: #212121;
     border-radius: 20px;
     color: #fffff0;
-
+    cursor: pointer;
 }
 
 .colCode{