Gradient Generator

HuXn-WebDev · HuXn-WebDev · commit 396901c7e7a5 · 2022-08-27T00:40:16.000-07:00
diff --git a/64. Gradient Generator/app.js b/64. Gradient Generator/app.js
@@ -0,0 +1,24 @@
+let color1 = document.querySelector(".c1");
+let color2 = document.querySelector(".c2");
+let gradientCont = document.querySelector("#gradient-cont");
+let btn = document.querySelector(".randomColorBtn");
+
+function makeColor() {
+  let randomColor = Math.floor(Math.random() * 16777215).toString(16);
+  return randomColor;
+}
+
+function generateGradient() {
+  color1.value = "#" + makeColor();
+  color2.value = "#" + makeColor();
+  gradientCont.style.background = `linear-gradient(${color1.value}, ${color2.value})`;
+}
+
+function setGradient() {
+  gradientCont.style.background = `linear-gradient(${color1.value}, ${color2.value})`;
+}
+
+document.body.addEventListener("load", generateGradient());
+color1.addEventListener("input", setGradient);
+color2.addEventListener("input", setGradient);
+btn.addEventListener("click", generateGradient);
diff --git a/64. Gradient Generator/index.html b/64. Gradient Generator/index.html
@@ -0,0 +1,22 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gradient Generator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section>
+      <div class="cont" id="gradient-cont"></div>
+      <div class="cont">
+        <input type="color" class="colors c1" />
+        <input type="color" class="colors c2" />
+        <br />
+        <button class="randomColorBtn">Random</button>
+      </div>
+    </section>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/64. Gradient Generator/style.css b/64. Gradient Generator/style.css
@@ -0,0 +1,28 @@
+body {
+  display: flex;
+  justify-content: center;
+}
+
+section {
+  margin: 10vh 10vw;
+  display: flex;
+  flex-direction: row;
+}
+
+.cont {
+  width: 40vw;
+}
+
+.colors {
+  outline: none;
+  border: none;
+  width: 100px;
+  height: 100px;
+}
+
+.randomColorBtn {
+  margin-top: 20px;
+  padding: 10px 20px;
+  margin-left: 3rem;
+  cursor: pointer;
+}
