Abhiraj-Sardar
diff --git a/‎64. Gradient Generator/app.js‎
Lines changed: 24 additions & 0 deletions b/‎64. Gradient Generator/app.js‎
Lines changed: 24 additions & 0 deletions
diff --git a/‎64. Gradient Generator/index.html‎
Lines changed: 22 additions & 0 deletions b/‎64. Gradient Generator/index.html‎
Lines changed: 22 additions & 0 deletions
diff --git a/‎64. Gradient Generator/style.css‎
Lines changed: 28 additions & 0 deletions b/‎64. Gradient Generator/style.css‎
Lines changed: 28 additions & 0 deletions
@@ -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);
@@ -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>
@@ -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;
+}