john-smilga · chamannarved · Aug 14, 2020 · Aug 14, 2020 · Aug 14, 2020 · Aug 14, 2020
diff --git a/1-color-flipper/final/hex.html b/1-color-flipper/final/hex.html
@@ -16,6 +16,8 @@ <h4>color flipper</h4>
        <ul class="nav-links">
          <li><a href="index.html">simple</a></li>
          <li><a href="hex.html">hex</a></li>
+          <li><a href="hsl.html">hsl</a></li>
+          <li><a href="rgb.html">rgb</a></li>
        </ul>
      </div>
    </nav>

diff --git a/1-color-flipper/final/hsl.html b/1-color-flipper/final/hsl.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Color Flipper || Hsl</title>
+
+    <!-- styles -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <div class="nav-center">
+        <h4>color flipper</h4>
+        <ul class="nav-links">
+          <li><a href="index.html">simple</a></li>
+          <li><a href="hex.html">hex</a></li>
+          <li><a href="hsl.html">hsl</a></li>
+          <li><a href="rgb.html">rgb</a></li>
+        </ul>
+      </div>
+    </nav>
+    <main>
+      <div class="container">
+        <h2>
+          background color :
+          <span class="color">
+            #f1f5f8
+          </span>
+        </h2>
+        <div class="container">
+          <button class="btn btn-hero" id="btn">click me</button>
+        </div>
+      </div>
+    </main>
+    <!-- javascript -->
+    <script src="hsl.js"></script>
+  </body>
+</html>
diff --git a/1-color-flipper/final/hsl.js 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
@@ -15,6 +15,8 @@ <h4>color flipper</h4>
        <ul class="nav-links">
          <li><a href="index.html">simple</a></li>
          <li><a href="hex.html">hex</a></li>
+          <li><a href="hsl.html">hsl</a></li>
+          <li><a href="rgb.html">rgb</a></li>
        </ul>
      </div>
    </nav>

diff --git a/1-color-flipper/final/rgb.html b/1-color-flipper/final/rgb.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Color Flipper || rgb</title>
+
+    <!-- styles -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <div class="nav-center">
+        <h4>color flipper</h4>
+        <ul class="nav-links">
+          <li><a href="index.html">simple</a></li>
+          <li><a href="hex.html">hex</a></li>
+          <li><a href="hsl.html">hsl</a></li>
+          <li><a href="rgb.html">rgb</a></li>
+        </ul>
+      </div>
+    </nav>
+    <main>
+      <div class="container">
+        <h2>
+          background color :
+          <span class="color">
+            #f1f5f8
+          </span>
+        </h2>
+        <div class="container">
+          <button class="btn btn-hero" id="btn">click me</button>
+        </div>
+      </div>
+    </main>
+    <!-- javascript -->
+    <script src="rgb.js"></script>
+  </body>
+</html>
diff --git a/1-color-flipper/final/rgb.js 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
@@ -18,6 +18,8 @@ <h4>color flipper</h4>
        <ul class="nav-links">
          <li><a href="index.html">simple</a></li>
          <li><a href="hex.html">hex</a></li>
+          <li><a href="hsl.html">hsl</a></li>
+          <li><a href="rgb.html">rgb</a></li>
        </ul>
      </div>
    </nav>

diff --git a/1-color-flipper/setup/hsl.html b/1-color-flipper/setup/hsl.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Color Flipper || Hsl</title>
+
+    <!-- styles -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <div class="nav-center">
+        <h4>color flipper</h4>
+        <ul class="nav-links">
+          <li><a href="index.html">simple</a></li>
+          <li><a href="hex.html">hex</a></li>
+          <li><a href="hsl.html">hsl</a></li>
+          <li><a href="rgb.html">rgb</a></li>
+        </ul>
+      </div>
+    </nav>
+    <main>
+      <div class="container">
+        <h2>
+          background color :
+          <span class="color">
+            #f1f5f8
+          </span>
+        </h2>
+        <div class="container">
+          <button class="btn btn-hero" id="btn">click me</button>
+        </div>
+      </div>
+    </main>
+    <!-- javascript -->
+    <script src="hsl.js"></script>
+  </body>
+</html>
diff --git a/1-color-flipper/setup/hsl.js 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
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Color Flipper || rgb</title>
+
+    <!-- styles -->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <nav>
+      <div class="nav-center">
+        <h4>color flipper</h4>
+        <ul class="nav-links">
+          <li><a href="index.html">simple</a></li>
+          <li><a href="hex.html">hex</a></li>
+          <li><a href="hsl.html">hsl</a></li>
+          <li><a href="rgb.html">rgb</a></li>
+        </ul>
+      </div>
+    </nav>
+    <main>
+      <div class="container">
+        <h2>
+          background color :
+          <span class="color">
+            #f1f5f8
+          </span>
+        </h2>
+        <div class="container">
+          <button class="btn btn-hero" id="btn">click me</button>
+        </div>
+      </div>
+    </main>
+    <!-- javascript -->
+    <script src="rgb.js"></script>
+  </body>
+</html>
diff --git a/1-color-flipper/setup/rgb.js 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()];