-
-
Notifications
You must be signed in to change notification settings - Fork 279
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #311 from 05hiteshbansal/contribution
Linear_Gradient_background_creater as a micro JS Project
- Loading branch information
Showing
6 changed files
with
107 additions
and
1 deletion.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| const button =document.getElementsByClassName('btn')[0] | ||
| const text =document.getElementsByClassName('text')[0] | ||
| const container = document.getElementsByClassName('container')[0] | ||
| function displayDate(){ | ||
| 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) | ||
| } | ||
| let value =container.style.background =`linear-gradient(${Math.floor(Math.random() * 360)}deg, ${colours.join(',')})`; | ||
| text.innerHTML =value | ||
|
|
||
| } | ||
|
|
||
| button.addEventListener("click", displayDate); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters