From ee1a00640204db92ca251f4f7b3c4ea9d033b3ff Mon Sep 17 00:00:00 2001 From: cdrani Date: Sun, 23 Feb 2020 08:31:47 -0700 Subject: [PATCH] add dynamic scrollbar styles --- css/styles.css | 7 ++++-- js/script.js | 65 ++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 60 insertions(+), 12 deletions(-) diff --git a/css/styles.css b/css/styles.css index 1cb663f..bd6753e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -4,7 +4,7 @@ body { margin: 0; padding: 0; - font: 'Muli', 'Helvetica Neue', 'Helvectica', 'Arial', serif; + font-family: 'Muli', 'Helvetica Neue', 'Helvectica', 'Arial', serif; font-weight: 100; font-size: 1em; line-height: 1.5em; @@ -13,6 +13,9 @@ body { overflow-x: hidden; } +::-webkit-scrollbar { + width: 10px; +} h1, h2, h3 { font-weight: 100; @@ -205,7 +208,6 @@ footer { } @media screen and (max-width: 825px) { - h1 { font-size: 2.25rem } @@ -228,6 +230,7 @@ footer { text-align: center; } + h1 { font-size: 5em; } diff --git a/js/script.js b/js/script.js index e0f156b..dd08da9 100644 --- a/js/script.js +++ b/js/script.js @@ -60,11 +60,21 @@ const showAlert = () => { ); }; - -const printContent = content => { +/** + * Set/Update root div depending on content + * Remove dynamically generated style element + * @param {String | undefined} content + * @return void + */ +const setContent = content => { const rootDiv = document.getElementById("add-js"); + const styles = document.head.getElementsByTagName("style"); + if (content) rootDiv.innerHTML += `${content}`; - else rootDiv.innerHTML = ""; + else { + rootDiv.innerHTML = ""; + styles.length && document.head.removeChild(styles[0]); + } }; /** @@ -107,9 +117,42 @@ const addCard = ({ red, green, blue }, center = false) => { `; }; -document.getElementById("submit").addEventListener("click", event => { - // reset shades - printContent(); +/** + * Apply dynamic styling to scrollbar + * return void + */ +const styleScrollBar = () => { + const colors = document.getElementsByClassName("colors"); + const startColor = colors[0].style.backgroundColor; + const endColor = colors[colors.length - 1].style.backgroundColor; + const styleTag = document.createElement("style"); + + const trackStyle = ` + :root { + scrollbar-color: ${startColor} ${endColor}; + } + + body::-webkit-scrollbar-track { + background: linear-gradient(0deg, ${endColor} 0%, ${startColor} 100%); + } + + body::-webkit-scrollbar-thumb { + background: linear-gradient(0deg, ${endColor} 0%, ${startColor} 100%); + } + + `; + + styleTag.innerHTML = trackStyle; + document.head.insertAdjacentElement("beforeend", styleTag); +}; + +/** + * Generate page template with shades and scrollbar styles + * return void + */ +const pageGenerator = () => { + // reset shades & scrollbar styles + setContent(); // Get user input for RGB values let content = ""; @@ -119,8 +162,8 @@ document.getElementById("submit").addEventListener("click", event => { const allValid = valuesValidators(colors, values); if (!allValid) { + setContent(); showAlert(); - printContent(); return; } @@ -148,8 +191,10 @@ document.getElementById("submit").addEventListener("click", event => { blue += 2; } - // Display all content in root div + // Render all content/styles content += ``; - printContent(content); -}); + setContent(content); + styleScrollBar(); +}; +document.getElementById("submit").addEventListener("click", pageGenerator);