add text contrast to each elements

deathstalkr · Nov 6, 2023 · 5a355e6 · 5a355e6
1 parent 423b2e3
commit 5a355e6
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 17 deletions.
diff --git a/css/periodic.css b/css/periodic.css
@@ -1,24 +1,33 @@
 body {
     display: flex;
     flex-direction: column;
-    /* align-items: center; */
     flex-wrap: wrap;
 }
 
 a {
     text-decoration: none;
-    font: 800 50px Serif;
+    font: 800 50px sans-Serif;
+    /* color: white; */
 }
 
 #header {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
     font: 800 80px Serif;
     margin-bottom: 20px;
 }
 
+button {
+    cursor: pointer;
+    padding: 8px 16px;
+    border-radius: 8px;
+    background: royalblue;
+    border: 1px solid royalblue;
+    color: white;
+    font-weight: 800;
+}
+
 #table-container table {
     border: 5px solid black;
     padding: 10px;

diff --git a/index.js b/index.js
@@ -2,33 +2,71 @@ function randomInt(max = 1, min = 0) {
     // scale random number from 0 to 1 to desired min and max
     return parseInt(Math.random() * (max - min) + min);
   }
-  
-  function twoPlaces(sNum = '') {
+
+function twoPlaces(sNum = '') {
     // make sure all strings have a length greater than 1
     //   eg: "f" => "0f"
     return sNum.length > 1 ? sNum : twoPlaces('0' + sNum);
-  }
+}
 
-  function randomColor() {
+function randomColor() {
     // make each color's hex string
     let r = twoPlaces(randomInt(255, 0).toString(16));
     let g = twoPlaces(randomInt(255, 0).toString(16));
     let b = twoPlaces(randomInt(255, 0).toString(16));
     // return hex color string
     return `#${r}${g}${b}`;
-  }
+}
+
+function hexToRgb(hex) {
+    const shortHexRegExp = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shortHexRegExp, (_, r, g, b) => r + r + g + g + b + b);
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+    if (!result) throw Error('A valid HEX must be provided');
+
+    return {
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    };
+}
+
+function setContrastColor(color) {
+    const {
+      r,
+      g,
+      b
+    } = hexToRgb(color);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    // https://en.wikipedia.org/wiki/YIQ
 
-  function updateColors() {
-    // loop through all elements with class "random"
+    let contrastColor;
+
+    if (yiq >= 128) {
+      contrastColor = "#000";
+    } else {
+      contrastColor = "#fff";
+    }
+    return contrastColor
+}
+let hex;
+
+function updateColors() {
+    // loop through all elements with class "box"
     document.querySelectorAll(".box").forEach((el) => {
-      // set each element/'s color to a random hex
-      el.setAttribute("style", `background-color:${ randomColor() }`);
+        hex = randomColor()
+      // set each element/'s color to a random hex and contrast the text as per the element's color
+      el.setAttribute("style", `background-color:${ hex }; color:${ setContrastColor(hex) }`);
     });
-  }
-
+    document.getElementsByTagName("a").forEach((lnk) => {
+      // set each element/'s color to a random hex and contrast the text as per the element's color
+      lnk.setAttribute("style", `color:${ setContrastColor(hex) }`);
+    });
+}
 // add function to randomizer
-let randomizer = document.querySelector("#colorRandomizer");
+let randomizer = document.getElementsByTagName("button")[0];
 randomizer.addEventListener("click", updateColors);
 // initialize colors
 randomizer.dispatchEvent(new Event("click"));
-  
+
diff --git a/table.html b/table.html
@@ -12,7 +12,7 @@
 <body>
     <div id="header">
         Periodic Table of the Internet
-        <button id="colorRandomizer">
+        <button>
             Randomize
         </button>
     </div>