Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature/scrollbar-gradient #30

Open
wants to merge 1 commit into
base: beta-1.0
Choose a base branch
from
Open

feature/scrollbar-gradient #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -13,6 +13,9 @@ body {
overflow-x: hidden;
}

::-webkit-scrollbar {
width: 10px;
}

h1, h2, h3 {
font-weight: 100;
Expand Down Expand Up @@ -205,7 +208,6 @@ footer {
}

@media screen and (max-width: 825px) {

h1 {
font-size: 2.25rem
}
Expand All @@ -228,6 +230,7 @@ footer {
text-align: center;
}


h1 {
font-size: 5em;
}
Expand Down
65 changes: 55 additions & 10 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,21 @@ const showAlert = () => {
);
};


const printContent = content => {
/**
* Set/Update root div depending on content
* Remove dynamically generated style element
* @param {String<HTML> | 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]);
}
};

/**
Expand Down Expand Up @@ -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 = `
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't appear to be styling the scrollbar with a gradient on Chrome.

: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 = "";
Expand All @@ -119,8 +162,8 @@ document.getElementById("submit").addEventListener("click", event => {

const allValid = valuesValidators(colors, values);
if (!allValid) {
setContent();
showAlert();
printContent();
return;
}

Expand Down Expand Up @@ -148,8 +191,10 @@ document.getElementById("submit").addEventListener("click", event => {
blue += 2;
}

// Display all content in root div
// Render all content/styles
content += `</div>`;
printContent(content);
});
setContent(content);
styleScrollBar();
};

document.getElementById("submit").addEventListener("click", pageGenerator);