added colour variation tab

z1shivam · Oct 27, 2023 · 5ffe6d2 · 5ffe6d2
1 parent c930ba9
commit 5ffe6d2
Show file tree

Hide file tree

Showing 7 changed files with 292 additions and 14 deletions.
diff --git a/icon-192x192.png b/icon-192x192.png
diff --git a/icon-512x512.png b/icon-512x512.png
diff --git a/index.html b/index.html
@@ -3,13 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/icon-192x192.png" />
     <meta name="theme-color" content="#61003f" />
     <link rel="stylesheet" href="style.css" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@40,400,0,200"
     />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
+    <link rel="manifest" href="/manifest.json" />
     <title>Random Colours</title>
   </head>
   <body>
@@ -18,24 +20,66 @@
       <div class="colCode" id="colCode">#212121</div>
     </header>
     <div class="colorHistory" id="colorHistory">
-      <ul id="colorHistoryUL">
-
-      </ul>
+      <ul id="colorHistoryUL"></ul>
     </div>
     <div class="colorViewer" id="colorViewer"></div>
     <div class="buttonContainer">
-      <button id="refresh">
+      <button id="refresh" class="sideButton">
         <span class="material-symbols-rounded"> autorenew </span>
       </button>
-      <button id="copy" data-clipboard-target="#colCode">
+      <button id="copy" class="sideButton" 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 id="clearHistory" class="sideButton">
+        <span class="material-symbols-rounded"> delete_history </span>
       </button>
     </div>
+    <div class="bottomDiv">
+      <div class="buttonConbottom">
+        <button
+          class="bottomBarButton"
+          data-clipboard-target="#hslBtn"
+          id="hsl"
+        >
+          <p id="hslBtn">RGB (231, 345,221)</p>
+        </button>
+        <button
+          class="bottomBarButton"
+          data-clipboard-target="#rgbBtn"
+          id="rgb"
+        >
+          <p id="rgbBtn">RGB (231, 345,221)</p>
+        </button>
+      </div>
+      <div class="colorGrid" id="colorGrid">
+        <div class="colorBlock"></div>
+        <div class="colorBlock"></div>
+        <div class="colorBlock"></div>
+        <div class="colorBlock"></div>
+        <div class="colorBlock"></div>
+        <div class="colorBlock"></div>
+        <div class="colorBlock"></div>
+        <div class="colorBlock"></div>
+      </div>
+    </div>
   </body>
   <script src="script.js"></script>
+
+  <script>
+    if ("serviceWorker" in navigator) {
+      window.addEventListener("load", function () {
+        navigator.serviceWorker
+          .register("/service-worker.js")
+          .then(function (registration) {
+            console.log(
+              "Service Worker registered with scope:",
+              registration.scope
+            );
+          })
+          .catch(function (error) {
+            console.log("Service Worker registration failed:", error);
+          });
+      });
+    }
+  </script>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,20 @@
+{
+    "name": "Random Colour",
+    "short_name": "Random Colour",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#61003f",
+    "theme_color": "#61003f",
+    "icons": [
+      {
+        "src": "/icon-192x192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      },
+      {
+        "src": "/icon-512x512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ]
+  }
diff --git a/script.js b/script.js
@@ -1,9 +1,13 @@
 let clipboard = new ClipboardJS("#copy");
+let clipboard2 = new ClipboardJS("#hsl");
+let clipboard3 = new ClipboardJS("#rgb");
 
 let colorViewer = document.getElementById("colorViewer");
 let colCode = document.getElementById("colCode");
 let generatedColour = "#212121";
 let colorHistoryUL = document.getElementById("colorHistoryUL");
+let hslBtn = document.getElementById("hslBtn");
+let rgbBtn = document.getElementById("rgbBtn");
 
 let colorHistory = [];
 if (localStorage.getItem("colorHistory") !== null) {
@@ -12,15 +16,118 @@ if (localStorage.getItem("colorHistory") !== null) {
   colorHistory = ["#212121"];
 }
 
+function hexToRGBHSL(hex) {
+  hex = hex.replace(/^#/, "");
+
+  let r = parseInt(hex.slice(0, 2), 16);
+  let g = parseInt(hex.slice(2, 4), 16);
+  let b = parseInt(hex.slice(4, 6), 16);
+
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h,
+    s,
+    l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0; // Achromatic
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+
+    h /= 6;
+  }
+
+  h = Math.round(h * 360);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+
+  const colorRange = generateColorRange(h, s);
+
+  return {
+    rgb: `RGB(${r * 255}, ${g * 255}, ${b * 255})`,
+    hsl: `HSL(${h}, ${s}%, ${l}%)`,
+    colorRange: colorRange,
+  };
+}
+
+function hslToRgb(h, s, l) {
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l; // Achromatic
+  } else {
+    const hueToRgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
+  }
+
+  const toHex = (x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return '#' + toHex(r) + toHex(g) + toHex(b);
+}
+
+function generateColorRange(hue, saturation) {
+  const hexCodes = [];
+  const lightnessStep = 12;
+
+  for (let i = 12; i <= 96; i += lightnessStep) {
+    const lightness = i;
+    const color = hslToRgb(hue / 360, saturation / 100, lightness / 100);
+    hexCodes.unshift(color);
+  }
+
+  return hexCodes;
+}
+
+
 const setAsCurrent = (e) => {
   colorViewer.style.backgroundColor = e;
   colCode.textContent = e;
+  const { rgb, hsl } = hexToRGBHSL(e);
+  rgbBtn.innerText = rgb;
+  hslBtn.innerText = hsl;
+  colorChanger(hexToRGBHSL(e).colorRange);
 };
 
 const createElement = (color) => {
   colorViewer.style.backgroundColor = color[0];
   colCode.textContent = color[0];
   colorHistoryUL.innerHTML = "";
+  const { rgb, hsl, colors } = hexToRGBHSL(color[0]);
+  rgbBtn.innerText = rgb;
+  hslBtn.innerText = hsl;
+
   colorHistory.forEach((color) => {
     let createdEl = document.createElement("li");
     createdEl.textContent = color;
@@ -47,9 +154,13 @@ let refresh = document
     if (colorHistory.length > 10) {
       colorHistory.pop();
     }
+    const { rgb, hsl, colorRange } = hexToRGBHSL(generatedColour);
+    rgbBtn.innerText = rgb;
+    hslBtn.innerText = hsl;
+    colorChanger(colorRange);
+
     createElement(colorHistory);
     localStorage.setItem("colorHistory", JSON.stringify(colorHistory));
-
     document.querySelectorAll("li").forEach((li) => {
       li.addEventListener("click", (e) => {
         setAsCurrent(e.target.textContent);
@@ -60,5 +171,30 @@ let refresh = document
 document.getElementById("clearHistory").addEventListener("click", (e) => {
   colorHistory = ["#212121"];
   createElement(colorHistory);
+  colorChanger(hexToRGBHSL(colorHistory[0]).colorRange);
   localStorage.setItem("colorHistory", JSON.stringify(colorHistory));
 });
+
+const colorChanger = (colorRange) => {
+  const colorBlock = document.getElementById("colorGrid").children
+  for (let i = 0; i < colorBlock.length; i++) {
+    if(i === 0 || i === 1){
+      colorBlock[i].style.color = "#212121";
+    }
+    colorBlock[i].style.backgroundColor = colorRange[i];
+    colorBlock[i].innerText = colorRange[i];
+  }
+};
+
+colorChanger(hexToRGBHSL(colorHistory[0]).colorRange);
+
+const colorBlocks = document.querySelectorAll(".colorBlock");
+colorBlocks.forEach((colorBlock) => {
+  colorBlock.addEventListener("click", (e) => {
+    colorViewer.style.backgroundColor = e.target.textContent;
+    colCode.textContent = e.target.textContent;
+    const { rgb, hsl } = hexToRGBHSL(e.target.textContent);
+    rgbBtn.innerText = rgb;
+    hslBtn.innerText = hsl;
+  });
+});
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,24 @@
+self.addEventListener("install", (e) => {
+    e.waitUntil(
+        caches.open("static").then((cache) => {
+          return cache.addAll([
+            "/",
+            "/index.html",
+            "/style.css",
+            "/script.js",
+            "/manifest.json",
+            "/icon-192x192.png",
+            "/icon-512x512.png",
+            "index.js"
+          ]);
+        })
+      );
+    });
+
+    self.addEventListener("fetch", (e) => {
+        e.respondWith(
+            caches.match(e.request).then((response) => {
+            return response || fetch(e.request);
+            })
+        );
+        });