Skip to content

Commit

Permalink
Merge pull request #24 from cdrani/refactor/script
Browse files Browse the repository at this point in the history 
refactor/script
  • Loading branch information
@varlevi
varlevi authored Feb 20, 2020
2 parents 4b44851 + f42aaba commit 57e5429
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 125 deletions.
5 changes: 2 additions & 3 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
/*General*/
body {
margin: 0;
padding: 0 2%;
padding: 0;
font: 'Muli', 'Helvetica Neue', 'Helvectica', 'Arial', serif;
font-weight: 100;
font-size: 1em;
Expand Down Expand Up @@ -103,7 +103,6 @@ input:focus {
transition: border-radius 0.5s ease;
width: 100px;
height: 100px;
display: inline-block;
border-radius: 15% 25%;
margin: 15px;
}
Expand All @@ -117,7 +116,7 @@ input:focus {
.card {
display: inline-block;
padding: 30px;
margin: 5rem;
margin: 2rem;
border-radius: 5%;
}

Expand Down
69 changes: 34 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-158580752-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-158580752-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-158580752-1');
</script>
</script>

<meta charset="UTF-8">
<title>The Shade Generator</title>
Expand All @@ -18,50 +18,49 @@
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:200,300,400,600" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

</head>

<body>
<div id="intro">
<h1>Welcome to The Shade Generator!</h1>

<input type="number" max="255" min="0"class="red" placeholder="Red Value"></input>
<input type="number" max="255" min="0"class="red" placeholder="Red Value">
<br>
<input type="number" max="255" min="0" class="green" placeholder="Green Value"></input>
<input type="number" max="255" min="0" class="green" placeholder="Green Value">
<br>
<input type="number" max="255" min="0" class="blue" placeholder="Blue Value"></input>
<input type="number" max="255" min="0" class="blue" placeholder="Blue Value">
<br>
<button type="button" class="submit">Generate!</button>
<button type="button" id="submit">Generate!</button>
</div>

<div id="add-js">
<div id="add-js"></div>

</div>

<script src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script src="js/script.js" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js" />
<script>
//This uses the cdn above and calls Dark mode and shows widget
new Darkmode().showWidget();
//These are all you widget options
var options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
//This uses the cdn above and calls Dark mode and shows widget
new Darkmode().showWidget();
//These are all you widget options
var options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();
</script>

</script>
<footer>
<p class="footer">Copyright &copy 2019 varlevi</p>
</footer>
<p class="footer">Copyright &copy 2020 varlevi</p>
</footer>
</body>
</html>
186 changes: 99 additions & 87 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,100 @@
document.getElementsByClassName('submit')[0].addEventListener('click', (event) => {

//removes any previously generated shade Sets

let addJs = document.getElementById("add-js");
while (addJs.hasChildNodes()) {
addJs.removeChild(addJs.firstChild);
}

//get color values
let red = document.getElementsByClassName('red')[0].value;
let green = document.getElementsByClassName('green')[0].value;
let blue = document.getElementsByClassName('blue')[0].value;

//check for valid values
if (isNaN(red) || red > 256 || red < 0) {
document.getElementsByClassName("red")[0].classList.add('error');
} else {
document.getElementsByClassName("red")[0].classList.remove('error');
}
if (isNaN(green) || green > 256 || green < 0) {
document.getElementsByClassName("green")[0].classList.add('error');
} else {
document.getElementsByClassName("green")[0].classList.remove('error');
}
if (isNaN(blue) || blue > 256 || blue < 0) {
document.getElementsByClassName("blue")[0].classList.add('error');
} else {
document.getElementsByClassName("blue")[0].classList.remove('error');
}
if (isNaN(blue) || blue > 256 || blue < 0 || isNaN(green) || green > 256 || green < 0 || isNaN(red) || red > 256 || red < 0) {
alert("Make sure all color inputs are valid numbers between 0 and 255.");
}

//functions
var baseColor = () => {
var color = 'rgb(';
color += red + ',';
color += green + ',';
color += blue + ')';
return color;
}

var print = (message) => {
document.getElementById("add-js").innerHTML += `${message}`;
}

var printRGB = () => {
print( '<p>rgb(' + red + ', ' + green + ', ' + blue + ')<br></p>' );
}

//Initial Color Print
rgbColor = baseColor();
html = `<div style="background-color: ${rgbColor}" class="darkmode-ignore colors"></div>`

print('<h2>Here are your results:</h2>');
print( '<h3>Base Color: <br></h3>' );
print( `<section class="card"></br> <p>rgb(${red}, ${green}, ${blue})</p> </br> ${html} </br></section>` );
for (i = 0; i < 5; i += 1) {
print( ' </br>' );
}

//Sets color to the darkest Shade

while ( red > 0 && green > 0 && blue > 0 ) {
red -= 1;
green -= 1;
blue -= 1;
}

//Prints all Shades
print( '<h3>Shades: <br></h3><section class="colors-div">' );

while (red < 256 && green < 256 && blue < 256) {

rgbColor = baseColor();
html = `<div style="background-color: ${rgbColor}" class="darkmode-ignore colors"></div>`

print( `<section class="card"></br> <p>rgb(${red}, ${green}, ${blue})</p> </br> ${html} </br></section>` );

red += 2;
blue += 2;
green += 2;
}

print('</section>');

const getRGBValues = colors => {
return colors.map(color => {
return parseInt(document.getElementsByClassName(color)[0].value, 10);
});
};

const isValid = value => !isNaN(value) && value < 256 && value >= 0;

const valuesValidators = (colors, values) => {
colors.forEach((color, index) => {
const element = document.getElementsByClassName(color)[0].classList;
element.remove("error");
!isValid(values[index]) && element.add("error");
});
};

const baseColor = ({ red, blue, green }) => {
return `rgb(${red}, ${green}, ${blue})`;
};

const showAlert = () => {
const hasErrors = document.getElementsByClassName("error").length;
return (
hasErrors &&
alert("Make sure all color inputs are valid numbers between 0 and 255.")
);
};

const resetShades = () => {
const addJs = document.getElementById("add-js");
while (addJs.hasChildNodes()) {
addJs.removeChild(addJs.firstChild);
}
};

const printContent = content => {
document.getElementById("add-js").innerHTML += `${content}`;
};

const addTitle = (type = "base") => {
const title = {
base: `<h2>Here are your results:</h2><h3>Base Color:</h3>`,
shade: `<h3>Shades:</h3>`
};

return title[type];
};

const addCard = ({ red, green, blue }) => {
const rgbColor = baseColor({ red, green, blue });

return `
<section class="card">
<p>rgb(${red}, ${green}, ${blue})</p>
<div>
<div
style="background-color: ${rgbColor}"
class="darkmode-ignore colors"
/>
</div>
</section>
`;
};

document.getElementById("submit").addEventListener("click", event => {
//removes any previously generated shade Sets
resetShades();

let content = "";
const colors = ["red", "blue", "green"];
const values = getRGBValues(colors);
let [red, green, blue] = values;

valuesValidators(colors, values);
showAlert();

//Initial Color Print
content += addTitle("base");
content += addCard({ red, green, blue });
content += addTitle("shade");

//Sets color to the darkest Shade
while (red > 0 && green > 0 && blue > 0) {
red--;
green--;
blue--;
}

//Prints all Shades

while (red < 256 && green < 256 && blue < 256) {
content += addCard({ red, green, blue });

red += 2;
blue += 2;
green += 2;
}

printContent(content);
});

0 comments on commit 57e5429

Please sign in to comment.