Init

mdashraful305 · Apr 30, 2023 · b77cba6 · b77cba6
commit b77cba6
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Gradient Generator</title>
+</head>
+
+<body>
+    <div class="container my-5">
+        <div class="row">
+            <div class="col-md-6">
+                <h1 class="mb-4">Gradient Generator</h1>
+                <form>
+                    <div class="form-group">
+                        <label for="color1">Color 1:</label>
+                        <div class="input-group">
+                            <input type="color" id="color1" value="#2980B9" class="form-control form-control-lg">
+                        </div>
+                        <span class="input-group-text" id="ct1">#2980B9</span>
+                    </div>
+                    <div class="form-group">
+                        <label for="color2">Color 2:</label>
+                        <div class="input-group">
+                            <input type="color" id="color2" value="#6DD5FA" class="form-control form-control-lg">
+                        </div>
+                        <span class="input-group-text" id="ct2">#6DD5FA</span>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-lg">Generate Gradient</button>
+                </form>
+            </div>
+            <div class="col-md-6">
+                <div class="gradient-container">
+                    <div class="gradient"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="script.js"></script>
+</body>
+
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,14 @@
+const form = document.querySelector('form');
+const gradientContainer = document.querySelector('.gradient-container');
+const gradient = document.querySelector('.gradient');
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+
+  const color1 = document.querySelector('#color1').value;
+  const color2 = document.querySelector('#color2').value;
+
+  gradient.style.background = `linear-gradient(to right, ${color1}, ${color2})`;
+    $('#ct1').text(color1);
+    $('#ct2').text(color2);
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,24 @@
+body {
+    background-color: #f9f9f9;
+  }
+
+  .gradient-container {
+    height: 400px;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .gradient {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right, #2980B9, #6DD5FA);
+  }
+
+  .input-group-text {
+    background-color: #fff;
+    border-color: #ced4da;
+    color: #495057;
+    width: 250px;
+    margin:5px 0;
+  }
+