Merge pull request #50 from Hetu1107/master

40 - Gradient Generator Added #4
swapnilsparsh · Oct 4, 2021 · 4645b8f · 4645b8f
2 parents ef44053 + 35ecc31
commit 4645b8f
Show file tree

Hide file tree

Showing 7 changed files with 277 additions and 8 deletions.
diff --git a/30DaysOfJavaScript/assets/40.png b/30DaysOfJavaScript/assets/40.png
diff --git a/40 - Gradient Generator/assests/grad.png b/40 - Gradient Generator/assests/grad.png
diff --git a/40 - Gradient Generator/font/sans.ttf b/40 - Gradient Generator/font/sans.ttf
diff --git a/40 - Gradient Generator/index.html b/40 - Gradient Generator/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<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" />
+    <link
+      rel="shortcut icon"
+      href="assests/grad.png"
+      type="image/x-icon"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>Gradient Generator</title>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css"
+      integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body id="body">
+    <div class="container">
+      <h1>Gradient Generator</h1>
+      <div class="selectcolrs">
+        <input type="color" name="color-one" id="color_one" value="#eb4034" />
+        <input type="color" name="color-two" id="color_two" value="#349beb" />
+      </div>
+      <div class="buttons">
+        <button onclick="setdirection('to top',this)" class="active">
+          <i class="fas fa-arrow-up"></i>
+        </button>
+        <button onclick="setdirection('to bottom',this)">
+          <i class="fas fa-arrow-down"></i>
+        </button>
+        <button onclick="setdirection('to left',this)">
+          <i class="fas fa-arrow-left"></i>
+        </button>
+        <button onclick="setdirection('to right',this)">
+          <i class="fas fa-arrow-right"></i>
+        </button>
+        <button onclick="setdirection('to top right',this)">
+          <i class="fas fa-arrow-up" style="transform: rotate(45deg)"></i>
+        </button>
+        <button onclick="setdirection('to bottom left',this)">
+          <i class="fas fa-arrow-down" style="transform: rotate(45deg)"></i>
+        </button>
+        <button onclick="setdirection('to top left',this)">
+          <i class="fas fa-arrow-left" style="transform: rotate(45deg)"></i>
+        </button>
+        <button onclick="setdirection('to bottom right',this)">
+          <i class="fas fa-arrow-right" style="transform: rotate(45deg)"></i>
+        </button>
+      </div>
+      <div class="submit" onclick="generate()">
+        <button id="submit">Generate</button>
+      </div>
+      <div class="output">
+        <textarea name="" id="code" rows="2"></textarea>
+        <button id="copy" onclick="copy()">Copy</button>
+      </div>
+    </div>
+    <footer>
+      <p>
+        &#x3c; &#47; &#x3e; with ❤️ by
+        <a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
+        <br />
+        <a
+          href="https://github.com/swapnilsparsh/30DaysOfJavaScript"
+          target="_blank"
+          >#30DaysOfJavaScript</a
+        >
+      </p>
+    </footer>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/40 - Gradient Generator/script.js b/40 - Gradient Generator/script.js
@@ -0,0 +1,20 @@
+let colorOne = document.getElementById('color_one');
+let colorTwo = document.getElementById('color_two');
+let currentdir = "to top";
+let outputcode = document.getElementById('code');
+
+function setdirection(value,_this){
+    let direction = document.querySelectorAll('.buttons button');
+    direction.forEach(e => {
+        e.classList.remove('active');
+    });
+    _this.classList.add('active');
+    currentdir = value;
+}
+function generate(){
+    outputcode.value = `background-image: linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value});`;
+    document.getElementById('body').style.backgroundImage = `linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value})`;
+}
+function copy(e){
+  e.clipboardData.setData("text/plain", outputcode);
+}
diff --git a/40 - Gradient Generator/style.css b/40 - Gradient Generator/style.css
@@ -0,0 +1,166 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "sans";
+}
+
+@font-face {
+  font-family: "sans";
+  src: url(font/sans.ttf);
+}
+
+body {
+  background-color: #19172e;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100vw;
+  overflow-x: hidden;
+  height: 100%;
+  min-height: 100vh;
+}
+
+.container {
+  width: 40%;
+  height: 500px;
+  margin: 3rem auto;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  backdrop-filter: blur(20px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative
+}
+.container h1{
+  position: absolute;
+  top: 5px;
+  color: white;
+  font-weight: 400;
+}
+.selectcolrs{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  height: fit-content;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+}
+.selectcolrs input{
+  width: 30%;
+  height: 45px;
+  margin: 0 5px;
+  outline: none;
+  border: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.selectcolrs input[type="color"]::-webkit-color-swatch{
+  border-radius: 10px;
+  border: none;
+}
+.buttons{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 95%;
+  padding: 5px 0;
+  height: fit-content;
+}
+.buttons button{
+  outline: none;
+  border: none;
+  width: 30px;
+  height: 30px;
+  border-radius: 5px;
+  margin: 4px;
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+.active{
+  background-color: rgb(52, 147, 255);
+}
+#submit{
+  width: 100px;
+    height: 35px;
+    outline: none;
+    border: none;
+    margin: 20px 0;
+    font-size: 18px;
+    border-radius: 3px;
+    background-color: white;
+    cursor: pointer;
+    transition: all 300ms ease;
+}
+#submit:hover{
+  background-color: rgb(253, 207, 78);
+}
+#submit:active{
+  background-color: #1e8e3e;
+}
+.output{
+  width: 100%;
+  height: fit-content;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.output textarea{
+  width: 90%;
+  height: 60px;
+  outline: none;
+  border: none;
+  font-size: 16px;
+  border-radius: 4px;
+}
+.output button{
+  width: 100px;
+    height: 35px;
+    outline: none;
+    border: none;
+    margin: 20px 0;
+    font-size: 18px;
+    border-radius: 3px;
+    background-color: white;
+    cursor: pointer;
+    transition: all 300ms ease;
+}
+.output button:hover{
+  background-color: rgb(253, 207, 78);
+}
+.output button:active{
+  background-color: #1e8e3e;
+}
+
+
+footer {
+  color: white;
+  position: absolute;
+  text-align: center;
+  font-size: 1rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 5px;
+  line-height: 3vh;
+}
+
+footer a:visited {
+  color: inherit;
+}
+
+
+@media (max-width: 800px){
+    .container{
+        width: 80%;
+    }
+}
diff --git a/index.html b/index.html
@@ -271,22 +271,22 @@ <h4>Snake Game</h4>
         <img src="30DaysOfJavaScript/assets/38.png" alt="Snake Game" />
       </a>
     </div>
-
-    <div class="item">
-      <a target="_blank" href="38 - Snake-Game/index.html">
-        <h4>Snake Game</h4>
-        <img src="30DaysOfJavaScript/assets/38.png" alt="Snake Game" />
-      </a>
-    </div>
     <div class="item">
       <a target="_blank" href="39 - Age Calculator/index.html">
         <h4>Age Calculator</h4>
         <img src="30DaysOfJavaScript/assets/39.png" alt="Age  Calculator" />
       </a>
     </div>
+    <div class="item">
+      <a target="_blank" href="40 - Gradient Generator/index.html">
+        <h4>Gradient Generator</h4>
+        <img src="30DaysOfJavaScript/assets/40.png" alt="Gradient Generator" />
+      </a>
+    </div>
 
 
   </div>
+
   </div>
 
   <footer>
@@ -298,4 +298,4 @@ <h4>Age Calculator</h4>
   </footer>
 </body>
 
-</html>
+</html>