diff --git a/css/styles.css b/css/styles.css index 3e86092..68c109c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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; @@ -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; } @@ -117,7 +116,7 @@ input:focus { .card { display: inline-block; padding: 30px; - margin: 5rem; + margin: 2rem; border-radius: 5%; } diff --git a/index.html b/index.html index ad92adf..847fa49 100644 --- a/index.html +++ b/index.html @@ -2,14 +2,14 @@ - - + + The Shade Generator @@ -18,50 +18,49 @@ - +

Welcome to The Shade Generator!

- +
- +
- +
- +
-
+
-
- - - + - +

Copyright © 2020 varlevi

+ diff --git a/js/script.js b/js/script.js index ae8c56f..3648601 100644 --- a/js/script.js +++ b/js/script.js @@ -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( '

rgb(' + red + ', ' + green + ', ' + blue + ')

' ); - } - - //Initial Color Print - rgbColor = baseColor(); - html = `
` - - print('

Here are your results:

'); - print( '

Base Color:

' ); - print( `

rgb(${red}, ${green}, ${blue})


${html}
` ); - for (i = 0; i < 5; i += 1) { - print( '
' ); - } - - //Sets color to the darkest Shade - - while ( red > 0 && green > 0 && blue > 0 ) { - red -= 1; - green -= 1; - blue -= 1; - } - - //Prints all Shades - print( '

Shades:

' ); - - while (red < 256 && green < 256 && blue < 256) { - - rgbColor = baseColor(); - html = `
` - - print( `

rgb(${red}, ${green}, ${blue})


${html}
` ); - - red += 2; - blue += 2; - green += 2; - } - - print('
'); - +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: `

Here are your results:

Base Color:

`, + shade: `

Shades:

` + }; + + return title[type]; +}; + +const addCard = ({ red, green, blue }) => { + const rgbColor = baseColor({ red, green, blue }); + + return ` +
+

rgb(${red}, ${green}, ${blue})

+
+
+
+
+ `; +}; + +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); });