Merge pull request #915 from 05hiteshbansal/random_linear_Gradient

PBJI · web-flow · commit 8c6820f80ef4 · 2023-10-15T09:48:22.000+05:30
Added Linear-Gradient as a micro Project
diff --git a/BackgroundGenerator/05hiteshbansal/copy.png b/BackgroundGenerator/05hiteshbansal/copy.png
diff --git a/BackgroundGenerator/05hiteshbansal/home.css b/BackgroundGenerator/05hiteshbansal/home.css
@@ -0,0 +1,59 @@
+*{
+    padding: 0%;
+    margin: 0%;
+    
+}
+
+.container{
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.text{
+    width: 50%;
+    text-align: center;
+    display: block;
+    font-size:1.5vmax;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+.box{
+    cursor: cell;
+    margin-top: 10px;
+display: flex;
+flex-direction: row;
+background-color: rgb(54, 50, 50);
+align-items: center;
+justify-items: center;
+}
+.box>img{
+    height:2vmax;
+    width: 2vmax;
+}
+.box>button{
+    background-color: initial;
+    border: 0cap;
+    color: white;
+    font-size: 1.5vmax;
+    font-size: medium;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    padding: 1vmax 0.5vmax ; 
+    cursor: cell;   
+}
+
+.box:hover{
+    background-color:rgb(30, 28, 28);
+}
+
+.inner{
+    width: 60%;
+    padding: 2vmax 0.5vmax;
+    background-color:color-mix(in hsl increasing hue, rgb(63, 62, 62) 20%, white 30%);
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    flex-direction: column;
+    border-radius: 10px;
+}
diff --git a/BackgroundGenerator/05hiteshbansal/home.html b/BackgroundGenerator/05hiteshbansal/home.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link
+      rel="stylesheet"
+     href="./home.css"
+      crossorigin="anonymous"
+    />
+    <title>Linear-Gradient</title>
+</head>
+<body>
+    <div class="container">
+        <div class="inner">
+        <div class="text">Click to Generate Gradient</div>
+        <div class="box">
+            <button class="btn">Change Colour</button>
+            <img src="./copy.png" alt="copy">
+        </div>
+    </div>
+    </div>
+    <script src="./home.js"></script>
+</body>
+</html>
diff --git a/BackgroundGenerator/05hiteshbansal/home.js b/BackgroundGenerator/05hiteshbansal/home.js
@@ -0,0 +1,23 @@
+const button =document.getElementsByClassName('btn')[0]
+const text =document.getElementsByClassName('text')[0]
+const container = document.getElementsByClassName('container')[0]
+
+async function displayDate(){ 
+console.log(1)
+    let colours =[];
+let m = Math.floor(Math.random()*6)+2;
+for(let i =0; i<m ; i++){
+    let colour=`rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
+    colours.push(colour)
+}
+console.log(colours)
+let value =container.style.background =`linear-gradient(${Math.floor(Math.random() * 360)}deg, ${colours.join(',')})`;
+text.innerHTML =value
+await navigator.clipboard.writeText(value).then(()=>{
+    alert("Gradient added in ClipBoard")
+});
+
+}
+
+console.log(2);
+button.addEventListener("click", displayDate);
diff --git a/BackgroundGenerator/05hiteshbansal/readme.md b/BackgroundGenerator/05hiteshbansal/readme.md
@@ -0,0 +1,5 @@
+## Linear-colour-Gradient
+
+### Javascript Linear-colour-Gradient
+
+This project is a javascript based Product. It allows you to click a cell and make a random Linear Gradient at random degree with random colours . Also number of colours are also not specific so a user can generate linear-Gradient with any number of colours 
