Skip to content

Commit 0f9b282

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #36 from arun-kushwaha04/GradientGenerator
Added Gradient Generator Project
2 parents 82ef3f0 + 099c9f6 commit 0f9b282

3 files changed

Lines changed: 230 additions & 0 deletions

File tree

‎Gradient Generator/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="./style.css" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
10+
<title>Gradient-Generator</title>
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
<div class="main-heading-div">
16+
<h1 class="main-heading">Gradient Generator</h1>
17+
</div>
18+
<div class="color">
19+
<input type="color" class="left-color" value="#ff9ce3" title="color1" />
20+
<input type="color" class="right-color" value="#4ab3ff" title="color2" />
21+
</div>
22+
<div class="generate">
23+
<input type="number" class="deg" placeholder="90" /><button type="button" class="rotate" onclick="change()">
24+
Rotate Gradient
25+
</button>
26+
</div>
27+
<div class="generate">
28+
<button type="button" class="random">Generate Random Background</button>
29+
</div>
30+
<div class="css-code-div">
31+
<p class="css-code">
32+
background: linear-gradient(90deg, #ff9ce3, #4ab3ff);
33+
</p>
34+
&nbsp;&nbsp; <i class="fas fa-copy"></i>
35+
</div>
36+
</div>
37+
<script src="./index.js"></script>
38+
</body>
39+
40+
</html>

‎Gradient Generator/index.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const body = document.querySelector('body');
2+
const cssCode = document.querySelector('.css-code');
3+
const leftColor = document.querySelector('.left-color');
4+
const rightColor = document.querySelector('.right-color');
5+
const randomColor = document.querySelector('.random');
6+
const copy = document.querySelector('i');
7+
const deg = document.querySelector('.deg');
8+
9+
let lColor = leftColor.value;;
10+
let rColor = rightColor.value;;
11+
12+
leftColor.addEventListener("change", () => {
13+
console.log(leftColor.value);
14+
lColor = leftColor.value;
15+
changeBackground(90, lColor, rColor);
16+
});
17+
rightColor.addEventListener("change", () => {
18+
console.log(rightColor.value);
19+
rColor = rightColor.value;
20+
changeBackground(90, lColor, rColor);
21+
});
22+
randomColor.addEventListener("click", () => {
23+
let color = '0123456789abcdef';
24+
lColor = '#';
25+
rColor = '#';
26+
for (let i = 0; i < 6; i++) {
27+
let num = (Math.floor(Math.random() * 1000)) % 16;
28+
lColor += color[num];
29+
}
30+
for (let i = 0; i < 6; i++) {
31+
let num = (Math.floor(Math.random() * 1000)) % 16;
32+
rColor += color[num];
33+
}
34+
console.log(lColor, rColor);
35+
leftColor.value = lColor;
36+
rightColor.value = rColor;
37+
changeBackground(90, lColor, rColor);
38+
});
39+
copy.addEventListener("click", () => {
40+
var r = document.createRange();
41+
r.selectNode(cssCode);
42+
window.getSelection().removeAllRanges();
43+
window.getSelection().addRange(r);
44+
document.execCommand('copy');
45+
window.getSelection().removeAllRanges();
46+
alert('Gradient Code Copied');
47+
});
48+
49+
function change() {
50+
console.log("Hi");
51+
console.log(deg.value);
52+
if (deg.value == '') deg.value = 90;
53+
changeBackground(deg.value, lColor, rColor);
54+
}
55+
56+
57+
58+
function changeBackground(num, lColor, rColor) {
59+
const Code = `linear-gradient(${num}deg, ${lColor}, ${rColor})`;
60+
console.log(Code);
61+
body.style.background = Code;
62+
cssCode.textContent = `background: ${Code};`
63+
}

‎Gradient Generator/style.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600&display=swap');
2+
* {
3+
margin: 0;
4+
border: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
html {
9+
font-size: 62.5%;
10+
font-family: 'Poppins', sans-serif;
11+
}
12+
13+
body {
14+
background: linear-gradient(to right, #ff9ce3, #4ab3ff);
15+
background-repeat: no-repeat;
16+
height: 100vh;
17+
}
18+
19+
h1,
20+
h2 {
21+
color: #000;
22+
font-size: 3.5rem;
23+
}
24+
25+
.container {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
}
30+
31+
.main-heading {
32+
margin-top: 6rem;
33+
padding: 0.1em 0.5em;
34+
background: rgba( 255, 255, 255, 0.35);
35+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
36+
backdrop-filter: blur( 0.0px);
37+
-webkit-backdrop-filter: blur( 0.0px);
38+
border-radius: 10px;
39+
border: 1px solid rgba( 255, 255, 255, 0.18);
40+
}
41+
42+
.color {
43+
padding: 0.5em 1em;
44+
margin-top: 4rem;
45+
background: rgba( 255, 255, 255, 0.35);
46+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
47+
backdrop-filter: blur( 0.0px);
48+
-webkit-backdrop-filter: blur( 0.0px);
49+
border-radius: 10px;
50+
border: 1px solid rgba( 255, 255, 255, 0.18);
51+
}
52+
53+
.css-code-div {
54+
margin-top: 6rem;
55+
font-size: 2rem;
56+
padding: 0.2em 0.7em;
57+
background: rgba( 255, 255, 255, 0.35);
58+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
59+
backdrop-filter: blur( 0.0px);
60+
-webkit-backdrop-filter: blur( 0.0px);
61+
border-radius: 10px;
62+
border: 1px solid rgba( 255, 255, 255, 0.18);
63+
text-align: center;
64+
}
65+
66+
.css-code-div p {
67+
display: inline;
68+
}
69+
70+
.left-color {
71+
margin-right: 2rem;
72+
}
73+
74+
.generate {
75+
margin-top: 3rem;
76+
}
77+
78+
.rotate {
79+
font-size: 1.5rem;
80+
padding: 0.5em 1.3em;
81+
border-radius: 1em;
82+
}
83+
84+
.rotate:hover {
85+
font-weight: 600;
86+
background-color: rgb(194, 194, 194);
87+
}
88+
89+
i:hover {
90+
cursor: pointer;
91+
}
92+
93+
.deg {
94+
margin-right: 1rem;
95+
font-size: 1.5rem;
96+
padding: 0.5em 1.3em;
97+
border-radius: 1em;
98+
outline : none;
99+
}
100+
101+
.random {
102+
font-size: 1.5rem;
103+
padding: 0.5em 1.3em;
104+
border-radius: 1em;
105+
}
106+
107+
.random:hover {
108+
font-weight: 600;
109+
background-color: rgb(194, 194, 194);
110+
}
111+
112+
113+
/* media queries */
114+
115+
@media (max-width:550px) {
116+
html {
117+
font-size: 6px;
118+
}
119+
}
120+
121+
@media (min-width:550px) and (max-width:768px) {
122+
html {
123+
font-size: 9px;
124+
}
125+
}
126+
127+
@media (min-width:768px) and (max-width:1024px) {}

0 commit comments

Comments
 (0)