diff --git a/1-color-flipper/final/hex.html b/1-color-flipper/final/hex.html index fbcbfc65a..5ee4b234e 100644 --- a/1-color-flipper/final/hex.html +++ b/1-color-flipper/final/hex.html @@ -16,6 +16,8 @@

color flipper

diff --git a/1-color-flipper/final/hsl.html b/1-color-flipper/final/hsl.html new file mode 100644 index 000000000..28c29f637 --- /dev/null +++ b/1-color-flipper/final/hsl.html @@ -0,0 +1,39 @@ + + + + + + Color Flipper || Hsl + + + + + + +
+
+

+ background color : + + #f1f5f8 + +

+
+ +
+
+
+ + + + diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js new file mode 100644 index 000000000..4b9987d0f --- /dev/null +++ b/1-color-flipper/final/hsl.js @@ -0,0 +1,63 @@ +/* + hsl(hue,saturation,light,alpha) + hsl(0 - 360, 0 -100%,0 - 100%,0 - 1) + +*/ + +// get value for saturation and light (0-100) +function getValues() { + let value = []; + for (let i = 0; i <= 100; i++) { + value.push(i); + } + return value; +} + +//get values for hue (0 - 360) +function getHueValues() { + let value = []; + for (let i = 0; i <= 360; i++) { + value.push(i); + } + return value; +} + +// get values for alpha +function getAlphaValues() { + return Math.random().toFixed(2); +} + +// get all values in one array of color +const hsl = [getHueValues(), getValues(), getValues()]; + +const btn = document.getElementById("btn"); +const color = document.querySelector(".color"); + +btn.addEventListener("click", function () { + // hslColor = hsl(222, 50%, 70%, 0.24); + let hslColor = + "hsl(" + + hsl[0][getRandomNumberHue()] + + "," + + hsl[1][getRandomNumberSat()] + + "%," + + hsl[2][getRandomNumberLight()] + + "%," + + getAlphaValues() + + ")"; + + color.textContent = hslColor; + document.body.style.backgroundColor = hslColor; +}); + +function getRandomNumberHue() { + return Math.floor(Math.random() * hsl[0].length); +} + +function getRandomNumberSat() { + return Math.floor(Math.random() * hsl[1].length); +} + +function getRandomNumberLight() { + return Math.floor(Math.random() * hsl[2].length); +} diff --git a/1-color-flipper/final/index.html b/1-color-flipper/final/index.html index cc860cc2c..22615c39f 100644 --- a/1-color-flipper/final/index.html +++ b/1-color-flipper/final/index.html @@ -15,6 +15,8 @@

color flipper

diff --git a/1-color-flipper/final/rgb.html b/1-color-flipper/final/rgb.html new file mode 100644 index 000000000..52feed0e6 --- /dev/null +++ b/1-color-flipper/final/rgb.html @@ -0,0 +1,39 @@ + + + + + + Color Flipper || rgb + + + + + + +
+
+

+ background color : + + #f1f5f8 + +

+
+ +
+
+
+ + + + diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js new file mode 100644 index 000000000..ba9f65c49 --- /dev/null +++ b/1-color-flipper/final/rgb.js @@ -0,0 +1,45 @@ +/* + rgb(red,green,blue,alpha) + rgb(0 - 255, 0 -255,0 - 255,0 - 1) + +*/ + +// get values for red, green and blue (0-255) +function getValues() { + let value = []; + for (let i = 0; i <= 255; i++) { + value.push(i); + } + return value; +} + +// get value for alpha +function getAlphaValues() { + return Math.random().toFixed(2); +} + +// get all values in one array of color +const rgb = [getValues()]; + +const btn = document.getElementById("btn"); +const color = document.querySelector(".color"); + +btn.addEventListener("click", function () { + let rgbColor = + "rgba(" + + rgb[0][getRandomNumber()] + + "," + + rgb[0][getRandomNumber()] + + "," + + rgb[0][getRandomNumber()] + + "," + + getAlphaValues() + + ")"; + + color.textContent = rgbColor; + document.body.style.backgroundColor = rgbColor; +}); + +function getRandomNumber() { + return Math.floor(Math.random() * rgb[0].length); +} diff --git a/1-color-flipper/setup/hex.html b/1-color-flipper/setup/hex.html index 4b6878b79..43d9fd0cc 100644 --- a/1-color-flipper/setup/hex.html +++ b/1-color-flipper/setup/hex.html @@ -18,6 +18,8 @@

color flipper

diff --git a/1-color-flipper/setup/hsl.html b/1-color-flipper/setup/hsl.html new file mode 100644 index 000000000..28c29f637 --- /dev/null +++ b/1-color-flipper/setup/hsl.html @@ -0,0 +1,39 @@ + + + + + + Color Flipper || Hsl + + + + + + +
+
+

+ background color : + + #f1f5f8 + +

+
+ +
+
+
+ + + + diff --git a/1-color-flipper/setup/hsl.js b/1-color-flipper/setup/hsl.js new file mode 100644 index 000000000..5566a3af3 --- /dev/null +++ b/1-color-flipper/setup/hsl.js @@ -0,0 +1,31 @@ +/* + hsl(hue,saturation,light,alpha) + hsl(0 - 360, 0 -100%,0 - 100%,0 - 1) + +*/ + +// get value for saturation and light (0-100) +function getValues() { + let value = []; + for (let i = 0; i <= 100; i++) { + value.push(i); + } + return value; +} + +//get values for hue (0 - 360) +function getHueValues() { + let value = []; + for (let i = 0; i <= 360; i++) { + value.push(i); + } + return value; +} + +// get values for alpha +function getAlphaValues() { + return Math.random().toFixed(2); +} + +// get all values in one array of color +const hsl = [getHueValues(), getValues(), getValues(), [getAlphaValues(), 1]]; diff --git a/1-color-flipper/setup/rgb.html b/1-color-flipper/setup/rgb.html new file mode 100644 index 000000000..52feed0e6 --- /dev/null +++ b/1-color-flipper/setup/rgb.html @@ -0,0 +1,39 @@ + + + + + + Color Flipper || rgb + + + + + + +
+
+

+ background color : + + #f1f5f8 + +

+
+ +
+
+
+ + + + diff --git a/1-color-flipper/setup/rgb.js b/1-color-flipper/setup/rgb.js new file mode 100644 index 000000000..212cad8ba --- /dev/null +++ b/1-color-flipper/setup/rgb.js @@ -0,0 +1,22 @@ +/* + rgb(red,green,blue,alpha) + rgb(0 - 255, 0 -255,0 - 255,0 - 1) + +*/ + +// get values for red, green and blue (0-255) +function getValues() { + let value = []; + for (let i = 0; i <= 255; i++) { + value.push(i); + } + return value; +} + +// get value for alpha +function getAlphaValues() { + return Math.random().toFixed(2); +} + +// get all values in one array of color +const rgb = [getValues(), getAlphaValues()];