added footer and more text contrasts

css/periodic.css

@@ -1,7 +1,10 @@
 body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
+    margin: 0;
 }
 
 a {
@@ -28,6 +31,14 @@ button {
     font-weight: 800;
 }
 
+button:active {
+    background: royalblue;
+    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
+       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
+            box-shadow: inset 0px 0px 5px #c1c1c1;
+     outline: none;
+  }
+
 #table-container table {
     border: 5px solid black;
     padding: 10px;
@@ -66,7 +77,8 @@ td div {
 }
 
 #legend-table td {
-    font-size: 40px;
+    font: 40px Serif;
+    /* font-family: serif; */
 }
 
 #help {
@@ -76,4 +88,16 @@ td div {
     border: hidden;
 }
 
+#footer {
+    display: flex;
+    background-color: #eee;
+    justify-content: center;
+    align-items: center;
+    color: darkmagenta;
+    padding: 20px;
+    height: 50px;
+    font-size: 32px;
+    padding: 20px;
+}
+
 

index.js

@@ -2,37 +2,37 @@ 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) {
+  }
+  
+  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) {
+  function setContrastColor(color) {
     const {
       r,
       g,
@@ -49,24 +49,25 @@ function setContrastColor(color) {
       contrastColor = "#fff";
     }
     return contrastColor
-}
-let hex;
+  }
 
-function updateColors() {
-    // loop through all elements with class "box"
+  function updateColors() {
     document.querySelectorAll(".box").forEach((el) => {
-        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) }`);
+      const hex = randomColor();
+      const textColor = setContrastColor(hex);
+
+      el.setAttribute("style", `background-color:${hex}; color:${textColor}`);
+
+      // Update the link elements inside the current box element
+      const linkElements = el.querySelectorAll(".link");
+      linkElements.forEach((lnk) => {
+        lnk.setAttribute("style", `color:${textColor}`);
+      });
     });
-}
-// add function to randomizer
-let randomizer = document.getElementsByTagName("button")[0];
-randomizer.addEventListener("click", updateColors);
-// initialize colors
-randomizer.dispatchEvent(new Event("click"));
-
+  }
+  // add function to randomizer
+  let randomizer = document.getElementsByTagName("button")[0];
+  randomizer.addEventListener("click", updateColors);
+  // initialize colors
+  randomizer.dispatchEvent(new Event("click"));
+