diff --git a/css/periodic.css b/css/periodic.css index b02109a..d057c0d 100755 --- 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 index 60c3cb7..d082edf 100644 --- 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")); - \ No newline at end of file + diff --git a/table.html b/table.html index 1762863..8e871a8 100755 --- a/table.html +++ b/table.html @@ -12,7 +12,7 @@