From fa60f0aa51b96c5a681199825d350acc3c906456 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Fri, 14 Aug 2020 21:10:26 +0530 Subject: [PATCH 01/39] added link to hsl.html --- 1-color-flipper/setup/hex.html | 1 + 1 file changed, 1 insertion(+) diff --git a/1-color-flipper/setup/hex.html b/1-color-flipper/setup/hex.html index 4b6878b79..d10f090d7 100644 --- a/1-color-flipper/setup/hex.html +++ b/1-color-flipper/setup/hex.html @@ -18,6 +18,7 @@

color flipper

From 2b2982d0b0ae7ab2836816f6d5b0ca040338279e Mon Sep 17 00:00:00 2001 From: chamannarved Date: Fri, 14 Aug 2020 21:14:22 +0530 Subject: [PATCH 02/39] create hsl.html and add setup content --- 1-color-flipper/setup/hsl.html | 38 ++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 1-color-flipper/setup/hsl.html diff --git a/1-color-flipper/setup/hsl.html b/1-color-flipper/setup/hsl.html new file mode 100644 index 000000000..a6e3b2f8f --- /dev/null +++ b/1-color-flipper/setup/hsl.html @@ -0,0 +1,38 @@ + + + + + + Color Flipper || Simple + + + + + + +
+
+

+ background color : + + #f1f5f8 + +

+
+ +
+
+
+ + + + From 45183ed4df4f4f5f2536c02e000aa59718357973 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Fri, 14 Aug 2020 21:18:07 +0530 Subject: [PATCH 03/39] create hsl.js and add hsl syntex in comment --- 1-color-flipper/setup/hsl.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 1-color-flipper/setup/hsl.js diff --git a/1-color-flipper/setup/hsl.js b/1-color-flipper/setup/hsl.js new file mode 100644 index 000000000..be6115ed8 --- /dev/null +++ b/1-color-flipper/setup/hsl.js @@ -0,0 +1,5 @@ +/* + hsl(hue,saturation,light,alpha) + hsl(0 - 360, 0 -100%,0 - 100%,0 - 1) + +*/ From c94ce86e7ef3d70509f93dca81862ef8c188cbe7 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Fri, 14 Aug 2020 21:19:29 +0530 Subject: [PATCH 04/39] create a getValues() function --- 1-color-flipper/setup/hsl.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/1-color-flipper/setup/hsl.js b/1-color-flipper/setup/hsl.js index be6115ed8..c7c5ccdca 100644 --- a/1-color-flipper/setup/hsl.js +++ b/1-color-flipper/setup/hsl.js @@ -3,3 +3,12 @@ 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; +} From d4490b461c749b91035524d8620e2b8dfc6f218d Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:36:46 +0530 Subject: [PATCH 05/39] create a function getHueValues() --- 1-color-flipper/setup/hsl.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/1-color-flipper/setup/hsl.js b/1-color-flipper/setup/hsl.js index c7c5ccdca..428ca6610 100644 --- a/1-color-flipper/setup/hsl.js +++ b/1-color-flipper/setup/hsl.js @@ -12,3 +12,12 @@ function getValues() { } return value; } + +//get values for hue (0 - 360) +function getHueValues() { + let value = []; + for (let i = 0; i <= 360; i++) { + value.push(i); + } + return value; +} From 46210100403099617308b42431cb236edea5d3ab Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:37:59 +0530 Subject: [PATCH 06/39] create a function getAlphaValue() --- 1-color-flipper/setup/hsl.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/1-color-flipper/setup/hsl.js b/1-color-flipper/setup/hsl.js index 428ca6610..22f6e6008 100644 --- a/1-color-flipper/setup/hsl.js +++ b/1-color-flipper/setup/hsl.js @@ -21,3 +21,8 @@ function getHueValues() { } return value; } + +// get values for alpha +function getAlphaValues() { + return Math.random().toFixed(2); +} From eadad8bfbb877464334bdd9ec797e7f2a8e660cc Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:39:01 +0530 Subject: [PATCH 07/39] create array of color --- 1-color-flipper/setup/hsl.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/1-color-flipper/setup/hsl.js b/1-color-flipper/setup/hsl.js index 22f6e6008..f679235b3 100644 --- a/1-color-flipper/setup/hsl.js +++ b/1-color-flipper/setup/hsl.js @@ -26,3 +26,10 @@ function getHueValues() { function getAlphaValues() { return Math.random().toFixed(2); } +// get all values in one array of color +const hsl = [ + [getHueValues()], + [getValues()], + [getValues()], + [getAlphaValues(), 1], +]; From fd530f61801a1f25335051278adead4a84660e9f Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:41:46 +0530 Subject: [PATCH 08/39] setup files added to final for hsl color --- 1-color-flipper/final/hsl.html | 38 ++++++++++++++++++++++++++++++++++ 1-color-flipper/final/hsl.js | 35 +++++++++++++++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 1-color-flipper/final/hsl.html create mode 100644 1-color-flipper/final/hsl.js diff --git a/1-color-flipper/final/hsl.html b/1-color-flipper/final/hsl.html new file mode 100644 index 000000000..a6e3b2f8f --- /dev/null +++ b/1-color-flipper/final/hsl.html @@ -0,0 +1,38 @@ + + + + + + Color Flipper || Simple + + + + + + +
+
+

+ 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..f679235b3 --- /dev/null +++ b/1-color-flipper/final/hsl.js @@ -0,0 +1,35 @@ +/* + 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], +]; From de3460435395bd655ca693ed0112f620b696bade Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:44:49 +0530 Subject: [PATCH 09/39] hsl link added to nav links --- 1-color-flipper/final/hex.html | 1 + 1-color-flipper/final/index.html | 1 + 2 files changed, 2 insertions(+) diff --git a/1-color-flipper/final/hex.html b/1-color-flipper/final/hex.html index fbcbfc65a..e6456151f 100644 --- a/1-color-flipper/final/hex.html +++ b/1-color-flipper/final/hex.html @@ -16,6 +16,7 @@

color flipper

diff --git a/1-color-flipper/final/index.html b/1-color-flipper/final/index.html index cc860cc2c..561d18d37 100644 --- a/1-color-flipper/final/index.html +++ b/1-color-flipper/final/index.html @@ -15,6 +15,7 @@

color flipper

From de57e9cfdde7fbb70267e075c99d7661e16c7712 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:49:58 +0530 Subject: [PATCH 10/39] fix Multidimensional array bug --- 1-color-flipper/final/hsl.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index f679235b3..5566a3af3 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -26,10 +26,6 @@ function getHueValues() { function getAlphaValues() { return Math.random().toFixed(2); } + // get all values in one array of color -const hsl = [ - [getHueValues()], - [getValues()], - [getValues()], - [getAlphaValues(), 1], -]; +const hsl = [getHueValues(), getValues(), getValues(), [getAlphaValues(), 1]]; From cebea0f694474d7b3fa931bc990e84da3971cb78 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:52:44 +0530 Subject: [PATCH 11/39] fix Multidimensional array bug --- 1-color-flipper/setup/hsl.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/1-color-flipper/setup/hsl.js b/1-color-flipper/setup/hsl.js index f679235b3..5566a3af3 100644 --- a/1-color-flipper/setup/hsl.js +++ b/1-color-flipper/setup/hsl.js @@ -26,10 +26,6 @@ function getHueValues() { function getAlphaValues() { return Math.random().toFixed(2); } + // get all values in one array of color -const hsl = [ - [getHueValues()], - [getValues()], - [getValues()], - [getAlphaValues(), 1], -]; +const hsl = [getHueValues(), getValues(), getValues(), [getAlphaValues(), 1]]; From 03017fea763e86d9ad1c04865d5f912404f1075e Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:54:30 +0530 Subject: [PATCH 12/39] select html elements to change --- 1-color-flipper/final/hsl.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 5566a3af3..acd024cb3 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -29,3 +29,6 @@ function getAlphaValues() { // get all values in one array of color const hsl = [getHueValues(), getValues(), getValues(), [getAlphaValues(), 1]]; + +const btn = document.getElementById("btn"); +const color = document.querySelector(".color"); From 9ba40a850a2563ce662b955380ff79fed7141746 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:55:25 +0530 Subject: [PATCH 13/39] add event listener to btn --- 1-color-flipper/final/hsl.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index acd024cb3..0190eece2 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -32,3 +32,5 @@ const hsl = [getHueValues(), getValues(), getValues(), [getAlphaValues(), 1]]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); + +btn.addEventListener("click", function () {}); From e75757778893fa1c41acc657326e8f9bec8f8ae1 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:56:57 +0530 Subject: [PATCH 14/39] add hard code for testing color format --- 1-color-flipper/final/hsl.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 0190eece2..82248bada 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -33,4 +33,18 @@ const hsl = [getHueValues(), getValues(), getValues(), [getAlphaValues(), 1]]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); -btn.addEventListener("click", function () {}); +btn.addEventListener("click", function () { + // hslColor = hsl(222, 50%, 70%, 0.24); + let hslColor = + "hsl(" + + hsl[0][222] + + "," + + hsl[1][50] + + "%," + + hsl[2][70] + + "%," + + hsl[3][0] + + ")"; + + console.log(hslColor); +}); From 53382febbd5993f5c08e83e7075e92f70a6a8820 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 08:58:51 +0530 Subject: [PATCH 15/39] create new function getRandomNumberHue() --- 1-color-flipper/final/hsl.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 82248bada..28d4a2931 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -37,7 +37,7 @@ btn.addEventListener("click", function () { // hslColor = hsl(222, 50%, 70%, 0.24); let hslColor = "hsl(" + - hsl[0][222] + + getRandomNumberHue() + "," + hsl[1][50] + "%," + @@ -48,3 +48,7 @@ btn.addEventListener("click", function () { console.log(hslColor); }); + +function getRandomNumberHue() { + return Math.floor(Math.random() * hsl[0].length); +} From 8e9dd3f1055848ed9b33a7776be54684b95f79aa Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 09:00:06 +0530 Subject: [PATCH 16/39] create new function getRandomNumberSat() --- 1-color-flipper/final/hsl.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 28d4a2931..6836935eb 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -39,7 +39,7 @@ btn.addEventListener("click", function () { "hsl(" + getRandomNumberHue() + "," + - hsl[1][50] + + getRandomNumberSat() + "%," + hsl[2][70] + "%," + @@ -52,3 +52,7 @@ btn.addEventListener("click", function () { function getRandomNumberHue() { return Math.floor(Math.random() * hsl[0].length); } + +function getRandomNumberSat() { + return Math.floor(Math.random() * hsl[1].length); +} From e9ac495b903b692dfbb5fd0840df10ac746555b3 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 09:01:16 +0530 Subject: [PATCH 17/39] create new function getRandomNumberLight() --- 1-color-flipper/final/hsl.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 6836935eb..053c3d43b 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -41,7 +41,7 @@ btn.addEventListener("click", function () { "," + getRandomNumberSat() + "%," + - hsl[2][70] + + getRandomNumberLight() + "%," + hsl[3][0] + ")"; @@ -56,3 +56,7 @@ function getRandomNumberHue() { function getRandomNumberSat() { return Math.floor(Math.random() * hsl[1].length); } + +function getRandomNumberLight() { + return Math.floor(Math.random() * hsl[2].length); +} From bbed6bcf80ca7110f29958ee0ad04ae6b18d2d17 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 09:02:31 +0530 Subject: [PATCH 18/39] create new function getRandomNumberAlpha() --- 1-color-flipper/final/hsl.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 053c3d43b..3b2fa8ab7 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -43,7 +43,7 @@ btn.addEventListener("click", function () { "%," + getRandomNumberLight() + "%," + - hsl[3][0] + + getRandomNumberAlpha() + ")"; console.log(hslColor); @@ -60,3 +60,7 @@ function getRandomNumberSat() { function getRandomNumberLight() { return Math.floor(Math.random() * hsl[2].length); } + +function getRandomNumberAlpha() { + return Math.random(hsl[3][0].length).toFixed(2); +} From 5ec41dc27925ca7b9f24d66f51f4a37b073a76f2 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 09:03:17 +0530 Subject: [PATCH 19/39] remove testing code --- 1-color-flipper/final/hsl.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 3b2fa8ab7..b3d27bae6 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -45,8 +45,6 @@ btn.addEventListener("click", function () { "%," + getRandomNumberAlpha() + ")"; - - console.log(hslColor); }); function getRandomNumberHue() { From b58216155eecfcd824da0a9773a9ec94c49e8347 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 09:06:24 +0530 Subject: [PATCH 20/39] change color value and body color on click --- 1-color-flipper/final/hsl.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index b3d27bae6..f85b36fd1 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -45,6 +45,9 @@ btn.addEventListener("click", function () { "%," + getRandomNumberAlpha() + ")"; + + color.textContent = hslColor; + document.body.style.backgroundColor = hslColor; }); function getRandomNumberHue() { From 45329229202dd5f3afb09e52b5e3d525c3790189 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 13:48:31 +0530 Subject: [PATCH 21/39] fix typo in title tag --- 1-color-flipper/final/hsl.html | 2 +- 1-color-flipper/setup/hsl.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/1-color-flipper/final/hsl.html b/1-color-flipper/final/hsl.html index a6e3b2f8f..88bdc7d97 100644 --- a/1-color-flipper/final/hsl.html +++ b/1-color-flipper/final/hsl.html @@ -3,7 +3,7 @@ - Color Flipper || Simple + Color Flipper || Hsl diff --git a/1-color-flipper/setup/hsl.html b/1-color-flipper/setup/hsl.html index a6e3b2f8f..88bdc7d97 100644 --- a/1-color-flipper/setup/hsl.html +++ b/1-color-flipper/setup/hsl.html @@ -3,7 +3,7 @@ - Color Flipper || Simple + Color Flipper || Hsl From d254bbad7cda109d60358822b9b0459ee54f1e85 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 13:50:37 +0530 Subject: [PATCH 22/39] added to setup rgb.htm and rgb.js --- 1-color-flipper/setup/rgb.html | 39 ++++++++++++++++++++++++++++++++++ 1-color-flipper/setup/rgb.js | 5 +++++ 2 files changed, 44 insertions(+) create mode 100644 1-color-flipper/setup/rgb.html create mode 100644 1-color-flipper/setup/rgb.js diff --git a/1-color-flipper/setup/rgb.html b/1-color-flipper/setup/rgb.html new file mode 100644 index 000000000..a182e56a8 --- /dev/null +++ b/1-color-flipper/setup/rgb.html @@ -0,0 +1,39 @@ + + + + + + Color Flipper || Simple + + + + + + +
+
+

+ 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..9331287c6 --- /dev/null +++ b/1-color-flipper/setup/rgb.js @@ -0,0 +1,5 @@ +/* + rgb(red,green,blue,alpha) + rgb(0 - 255, 0 -255,0 - 255,0 - 1) + +*/ From 162f368d21a711b6496077ccb8606a11bfe143d6 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 13:53:43 +0530 Subject: [PATCH 23/39] add rgb link in nav --- 1-color-flipper/setup/hex.html | 1 + 1-color-flipper/setup/hsl.html | 1 + 2 files changed, 2 insertions(+) diff --git a/1-color-flipper/setup/hex.html b/1-color-flipper/setup/hex.html index d10f090d7..43d9fd0cc 100644 --- a/1-color-flipper/setup/hex.html +++ b/1-color-flipper/setup/hex.html @@ -19,6 +19,7 @@

color flipper

  • simple
  • hex
  • hsl
    • +
  • rgb
    • diff --git a/1-color-flipper/setup/hsl.html b/1-color-flipper/setup/hsl.html index 88bdc7d97..28c29f637 100644 --- a/1-color-flipper/setup/hsl.html +++ b/1-color-flipper/setup/hsl.html @@ -16,6 +16,7 @@

    color flipper

  • simple
  • hex
  • hsl
    • +
  • rgb
    • From d7c72e447329956012c4af87677dd5267d83967c Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 13:59:40 +0530 Subject: [PATCH 24/39] create a functoin for rgb values --- 1-color-flipper/setup/rgb.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/1-color-flipper/setup/rgb.js b/1-color-flipper/setup/rgb.js index 9331287c6..c8ee8fe21 100644 --- a/1-color-flipper/setup/rgb.js +++ b/1-color-flipper/setup/rgb.js @@ -3,3 +3,12 @@ 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; +} From f23ec235b98c7b2d5fdb7f2d05a90a8bed8dca91 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 14:01:15 +0530 Subject: [PATCH 25/39] create a function for alpha values --- 1-color-flipper/setup/rgb.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/1-color-flipper/setup/rgb.js b/1-color-flipper/setup/rgb.js index c8ee8fe21..63e8e7e76 100644 --- a/1-color-flipper/setup/rgb.js +++ b/1-color-flipper/setup/rgb.js @@ -12,3 +12,8 @@ function getValues() { } return value; } + +// get value for alpha +function getAlphaValues() { + return Math.random().toFixed(2); +} From 58c5534c4723375b065a6045403c4c4c9faa4c24 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 14:02:44 +0530 Subject: [PATCH 26/39] create array of color values --- 1-color-flipper/setup/rgb.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/1-color-flipper/setup/rgb.js b/1-color-flipper/setup/rgb.js index 63e8e7e76..212cad8ba 100644 --- a/1-color-flipper/setup/rgb.js +++ b/1-color-flipper/setup/rgb.js @@ -17,3 +17,6 @@ function getValues() { function getAlphaValues() { return Math.random().toFixed(2); } + +// get all values in one array of color +const rgb = [getValues(), getAlphaValues()]; From e726e1b74308f34c2c97e45332b0f2f535801204 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 14:34:54 +0530 Subject: [PATCH 27/39] rgb setup files added to final --- 1-color-flipper/final/rgb.html | 39 ++++++++++++++++++++++++++++++++++ 1-color-flipper/final/rgb.js | 22 +++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 1-color-flipper/final/rgb.html create mode 100644 1-color-flipper/final/rgb.js diff --git a/1-color-flipper/final/rgb.html b/1-color-flipper/final/rgb.html new file mode 100644 index 000000000..a182e56a8 --- /dev/null +++ b/1-color-flipper/final/rgb.html @@ -0,0 +1,39 @@ + + + + + + Color Flipper || Simple + + + + + + +
    +
    +

    + 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..212cad8ba --- /dev/null +++ b/1-color-flipper/final/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()]; From a252121a84049ca8330513c8cf3d53f1052799ee Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:14:26 +0530 Subject: [PATCH 28/39] select html elements --- 1-color-flipper/final/rgb.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js index 212cad8ba..1bf1d2364 100644 --- a/1-color-flipper/final/rgb.js +++ b/1-color-flipper/final/rgb.js @@ -20,3 +20,6 @@ function getAlphaValues() { // get all values in one array of color const rgb = [getValues(), getAlphaValues()]; + +const btn = document.getElementById("btn"); +const color = document.querySelector(".color"); From 85e519752e17e2b2eabd89f66361544ce48452ad Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:17:10 +0530 Subject: [PATCH 29/39] add event listener for btn --- 1-color-flipper/final/rgb.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js index 1bf1d2364..169a2948d 100644 --- a/1-color-flipper/final/rgb.js +++ b/1-color-flipper/final/rgb.js @@ -23,3 +23,7 @@ const rgb = [getValues(), getAlphaValues()]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); + +btn.addEventListener("click", function () { + let rgbColor; +}); From 0c1e8a0acbde92d97355f386de0cba2d20039553 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:22:15 +0530 Subject: [PATCH 30/39] add hard code for testing --- 1-color-flipper/final/rgb.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js index 169a2948d..cd000fb36 100644 --- a/1-color-flipper/final/rgb.js +++ b/1-color-flipper/final/rgb.js @@ -25,5 +25,7 @@ const btn = document.getElementById("btn"); const color = document.querySelector(".color"); btn.addEventListener("click", function () { - let rgbColor; + let rgbColor = "rgb(" + 122 + "," + 124 + "," + 10 + "," + 0.89 + ")"; + + console.log(rgbColor); }); From 014b259ff60416749c1f362253bb1b9ce383da96 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:39:52 +0530 Subject: [PATCH 31/39] create new function getRandomNumber() --- 1-color-flipper/final/rgb.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js index cd000fb36..62dc199e6 100644 --- a/1-color-flipper/final/rgb.js +++ b/1-color-flipper/final/rgb.js @@ -25,7 +25,19 @@ const btn = document.getElementById("btn"); const color = document.querySelector(".color"); btn.addEventListener("click", function () { - let rgbColor = "rgb(" + 122 + "," + 124 + "," + 10 + "," + 0.89 + ")"; - + let rgbColor = + "rgba(" + + rgb[0][getRandomNumber()] + + "," + + rgb[0][getRandomNumber()] + + "," + + rgb[0][getRandomNumber()] + + "," + + 0.89 + + ")"; console.log(rgbColor); }); + +function getRandomNumber() { + return Math.floor(Math.random() * rgb[0].length); +} From c1dde8a56ab5292dab2fccc79f25d0a1597d45f7 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:44:12 +0530 Subject: [PATCH 32/39] edit color array and direct use function --- 1-color-flipper/final/rgb.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js index 62dc199e6..b820b0958 100644 --- a/1-color-flipper/final/rgb.js +++ b/1-color-flipper/final/rgb.js @@ -19,7 +19,7 @@ function getAlphaValues() { } // get all values in one array of color -const rgb = [getValues(), getAlphaValues()]; +const rgb = [getValues()]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); @@ -33,7 +33,7 @@ btn.addEventListener("click", function () { "," + rgb[0][getRandomNumber()] + "," + - 0.89 + + getAlphaValues() + ")"; console.log(rgbColor); }); From ef41d0bec073db0c22ad616a8970d7f66df2c73b Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:44:58 +0530 Subject: [PATCH 33/39] remove testing code --- 1-color-flipper/final/rgb.js | 1 - 1 file changed, 1 deletion(-) diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js index b820b0958..f23985463 100644 --- a/1-color-flipper/final/rgb.js +++ b/1-color-flipper/final/rgb.js @@ -35,7 +35,6 @@ btn.addEventListener("click", function () { "," + getAlphaValues() + ")"; - console.log(rgbColor); }); function getRandomNumber() { From 6451887e07023e5d840493b9445eb8d0a533e56d Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:50:13 +0530 Subject: [PATCH 34/39] change color value and body bg color on click --- 1-color-flipper/final/rgb.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/1-color-flipper/final/rgb.js b/1-color-flipper/final/rgb.js index f23985463..ba9f65c49 100644 --- a/1-color-flipper/final/rgb.js +++ b/1-color-flipper/final/rgb.js @@ -35,6 +35,9 @@ btn.addEventListener("click", function () { "," + getAlphaValues() + ")"; + + color.textContent = rgbColor; + document.body.style.backgroundColor = rgbColor; }); function getRandomNumber() { From fc51cf34585cc3c40478133aeafe826c09f2b36f Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:53:40 +0530 Subject: [PATCH 35/39] change title --- 1-color-flipper/final/rgb.html | 2 +- 1-color-flipper/setup/rgb.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/1-color-flipper/final/rgb.html b/1-color-flipper/final/rgb.html index a182e56a8..52feed0e6 100644 --- a/1-color-flipper/final/rgb.html +++ b/1-color-flipper/final/rgb.html @@ -3,7 +3,7 @@ - Color Flipper || Simple + Color Flipper || rgb diff --git a/1-color-flipper/setup/rgb.html b/1-color-flipper/setup/rgb.html index a182e56a8..52feed0e6 100644 --- a/1-color-flipper/setup/rgb.html +++ b/1-color-flipper/setup/rgb.html @@ -3,7 +3,7 @@ - Color Flipper || Simple + Color Flipper || rgb From 6f08233e7feda56f89975565955b9a88a049e8ce Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 15:58:12 +0530 Subject: [PATCH 36/39] add rgb link to nav in final --- 1-color-flipper/final/hex.html | 1 + 1-color-flipper/final/hsl.html | 1 + 1-color-flipper/final/index.html | 1 + 3 files changed, 3 insertions(+) diff --git a/1-color-flipper/final/hex.html b/1-color-flipper/final/hex.html index e6456151f..5ee4b234e 100644 --- a/1-color-flipper/final/hex.html +++ b/1-color-flipper/final/hex.html @@ -17,6 +17,7 @@

    color flipper

  • simple
  • hex
  • hsl
    • +
  • rgb
    • diff --git a/1-color-flipper/final/hsl.html b/1-color-flipper/final/hsl.html index 88bdc7d97..28c29f637 100644 --- a/1-color-flipper/final/hsl.html +++ b/1-color-flipper/final/hsl.html @@ -16,6 +16,7 @@

    color flipper

  • simple
  • hex
  • hsl
    • +
  • rgb
    • diff --git a/1-color-flipper/final/index.html b/1-color-flipper/final/index.html index 561d18d37..22615c39f 100644 --- a/1-color-flipper/final/index.html +++ b/1-color-flipper/final/index.html @@ -16,6 +16,7 @@

    color flipper

  • simple
  • hex
  • hsl
    • +
  • rgb
    • From dafb7c6507c14fea982d6dfde6761431b28e5d8a Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 16:19:57 +0530 Subject: [PATCH 37/39] change color values function to array --- 1-color-flipper/final/hsl.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index f85b36fd1..00e2d1bc9 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -37,11 +37,11 @@ btn.addEventListener("click", function () { // hslColor = hsl(222, 50%, 70%, 0.24); let hslColor = "hsl(" + - getRandomNumberHue() + + hsl[0][getRandomNumberHue()] + "," + - getRandomNumberSat() + + hsl[1][getRandomNumberSat()] + "%," + - getRandomNumberLight() + + hsl[2][getRandomNumberLight()] + "%," + getRandomNumberAlpha() + ")"; From 8bcf1737ce14d0d9d512e4a1bdb079f5e886994a Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 16:22:24 +0530 Subject: [PATCH 38/39] edit color array and direct use function --- 1-color-flipper/final/hsl.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 00e2d1bc9..4fe7c7f2d 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -28,7 +28,7 @@ function getAlphaValues() { } // get all values in one array of color -const hsl = [getHueValues(), getValues(), getValues(), [getAlphaValues(), 1]]; +const hsl = [getHueValues(), getValues(), getValues()]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); @@ -43,7 +43,7 @@ btn.addEventListener("click", function () { "%," + hsl[2][getRandomNumberLight()] + "%," + - getRandomNumberAlpha() + + getAlphaValues() + ")"; color.textContent = hslColor; From 0163ae4bf2558e3a275ec575d04af7b232032f48 Mon Sep 17 00:00:00 2001 From: chamannarved Date: Sat, 15 Aug 2020 16:24:03 +0530 Subject: [PATCH 39/39] remove getRandomNumberAlpha() --- 1-color-flipper/final/hsl.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/1-color-flipper/final/hsl.js b/1-color-flipper/final/hsl.js index 4fe7c7f2d..4b9987d0f 100644 --- a/1-color-flipper/final/hsl.js +++ b/1-color-flipper/final/hsl.js @@ -61,7 +61,3 @@ function getRandomNumberSat() { function getRandomNumberLight() { return Math.floor(Math.random() * hsl[2].length); } - -function getRandomNumberAlpha() { - return Math.random(hsl[3][0].length).toFixed(2); -}