Skip to content

Commit 4645b8f

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #50 from Hetu1107/master
40 - Gradient Generator Added #4
2 parents ef44053 + 35ecc31 commit 4645b8f

File tree

7 files changed

+277
-8
lines changed

7 files changed

+277
-8
lines changed

‎30DaysOfJavaScript/assets/40.png

39.5 KB
Loading

‎40 - Gradient Generator/assests/grad.png

95.8 KB
Loading

‎40 - Gradient Generator/font/sans.ttf

54.5 KB
Binary file not shown.

‎40 - Gradient Generator/index.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
rel="shortcut icon"
9+
href="assests/grad.png"
10+
type="image/x-icon"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Gradient Generator</title>
14+
<link
15+
rel="stylesheet"
16+
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
17+
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
18+
crossorigin="anonymous"
19+
/>
20+
<link
21+
rel="stylesheet"
22+
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css"
23+
integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni"
24+
crossorigin="anonymous"
25+
/>
26+
</head>
27+
<body id="body">
28+
<div class="container">
29+
<h1>Gradient Generator</h1>
30+
<div class="selectcolrs">
31+
<input type="color" name="color-one" id="color_one" value="#eb4034" />
32+
<input type="color" name="color-two" id="color_two" value="#349beb" />
33+
</div>
34+
<div class="buttons">
35+
<button onclick="setdirection('to top',this)" class="active">
36+
<i class="fas fa-arrow-up"></i>
37+
</button>
38+
<button onclick="setdirection('to bottom',this)">
39+
<i class="fas fa-arrow-down"></i>
40+
</button>
41+
<button onclick="setdirection('to left',this)">
42+
<i class="fas fa-arrow-left"></i>
43+
</button>
44+
<button onclick="setdirection('to right',this)">
45+
<i class="fas fa-arrow-right"></i>
46+
</button>
47+
<button onclick="setdirection('to top right',this)">
48+
<i class="fas fa-arrow-up" style="transform: rotate(45deg)"></i>
49+
</button>
50+
<button onclick="setdirection('to bottom left',this)">
51+
<i class="fas fa-arrow-down" style="transform: rotate(45deg)"></i>
52+
</button>
53+
<button onclick="setdirection('to top left',this)">
54+
<i class="fas fa-arrow-left" style="transform: rotate(45deg)"></i>
55+
</button>
56+
<button onclick="setdirection('to bottom right',this)">
57+
<i class="fas fa-arrow-right" style="transform: rotate(45deg)"></i>
58+
</button>
59+
</div>
60+
<div class="submit" onclick="generate()">
61+
<button id="submit">Generate</button>
62+
</div>
63+
<div class="output">
64+
<textarea name="" id="code" rows="2"></textarea>
65+
<button id="copy" onclick="copy()">Copy</button>
66+
</div>
67+
</div>
68+
<footer>
69+
<p>
70+
&#x3c; &#47; &#x3e; with ❤️ by
71+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
72+
<br />
73+
<a
74+
href="https://github.com/swapnilsparsh/30DaysOfJavaScript"
75+
target="_blank"
76+
>#30DaysOfJavaScript</a
77+
>
78+
</p>
79+
</footer>
80+
81+
<script src="script.js"></script>
82+
</body>
83+
</html>

‎40 - Gradient Generator/script.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
let colorOne = document.getElementById('color_one');
2+
let colorTwo = document.getElementById('color_two');
3+
let currentdir = "to top";
4+
let outputcode = document.getElementById('code');
5+
6+
function setdirection(value,_this){
7+
let direction = document.querySelectorAll('.buttons button');
8+
direction.forEach(e => {
9+
e.classList.remove('active');
10+
});
11+
_this.classList.add('active');
12+
currentdir = value;
13+
}
14+
function generate(){
15+
outputcode.value = `background-image: linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value});`;
16+
document.getElementById('body').style.backgroundImage = `linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value})`;
17+
}
18+
function copy(e){
19+
e.clipboardData.setData("text/plain", outputcode);
20+
}

‎40 - Gradient Generator/style.css

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: "sans";
6+
}
7+
8+
@font-face {
9+
font-family: "sans";
10+
src: url(font/sans.ttf);
11+
}
12+
13+
body {
14+
background-color: #19172e;
15+
background-repeat: no-repeat;
16+
background-size: cover;
17+
width: 100vw;
18+
overflow-x: hidden;
19+
height: 100%;
20+
min-height: 100vh;
21+
}
22+
23+
.container {
24+
width: 40%;
25+
height: 500px;
26+
margin: 3rem auto;
27+
text-align: center;
28+
background: rgba(255, 255, 255, 0.05);
29+
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
30+
border-radius: 20px;
31+
backdrop-filter: blur(20px);
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
36+
position: relative
37+
}
38+
.container h1{
39+
position: absolute;
40+
top: 5px;
41+
color: white;
42+
font-weight: 400;
43+
}
44+
.selectcolrs{
45+
display: flex;
46+
flex-direction: row;
47+
flex-wrap: wrap;
48+
width: 100%;
49+
height: fit-content;
50+
justify-content: center;
51+
align-items: center;
52+
padding: 20px 0;
53+
}
54+
.selectcolrs input{
55+
width: 30%;
56+
height: 45px;
57+
margin: 0 5px;
58+
outline: none;
59+
border: none;
60+
-webkit-appearance: none;
61+
background-color: transparent;
62+
cursor: pointer;
63+
}
64+
.selectcolrs input[type="color"]::-webkit-color-swatch{
65+
border-radius: 10px;
66+
border: none;
67+
}
68+
.buttons{
69+
display: flex;
70+
flex-direction: row;
71+
justify-content: center;
72+
align-items: center;
73+
width: 95%;
74+
padding: 5px 0;
75+
height: fit-content;
76+
}
77+
.buttons button{
78+
outline: none;
79+
border: none;
80+
width: 30px;
81+
height: 30px;
82+
border-radius: 5px;
83+
margin: 4px;
84+
transition: all 200ms ease;
85+
cursor: pointer;
86+
}
87+
.active{
88+
background-color: rgb(52, 147, 255);
89+
}
90+
#submit{
91+
width: 100px;
92+
height: 35px;
93+
outline: none;
94+
border: none;
95+
margin: 20px 0;
96+
font-size: 18px;
97+
border-radius: 3px;
98+
background-color: white;
99+
cursor: pointer;
100+
transition: all 300ms ease;
101+
}
102+
#submit:hover{
103+
background-color: rgb(253, 207, 78);
104+
}
105+
#submit:active{
106+
background-color: #1e8e3e;
107+
}
108+
.output{
109+
width: 100%;
110+
height: fit-content;
111+
padding: 5px;
112+
display: flex;
113+
flex-direction: column;
114+
justify-content: center;
115+
align-items: center;
116+
}
117+
.output textarea{
118+
width: 90%;
119+
height: 60px;
120+
outline: none;
121+
border: none;
122+
font-size: 16px;
123+
border-radius: 4px;
124+
}
125+
.output button{
126+
width: 100px;
127+
height: 35px;
128+
outline: none;
129+
border: none;
130+
margin: 20px 0;
131+
font-size: 18px;
132+
border-radius: 3px;
133+
background-color: white;
134+
cursor: pointer;
135+
transition: all 300ms ease;
136+
}
137+
.output button:hover{
138+
background-color: rgb(253, 207, 78);
139+
}
140+
.output button:active{
141+
background-color: #1e8e3e;
142+
}
143+
144+
145+
footer {
146+
color: white;
147+
position: absolute;
148+
text-align: center;
149+
font-size: 1rem;
150+
left: 0;
151+
right: 0;
152+
bottom: 0;
153+
padding: 5px;
154+
line-height: 3vh;
155+
}
156+
157+
footer a:visited {
158+
color: inherit;
159+
}
160+
161+
162+
@media (max-width: 800px){
163+
.container{
164+
width: 80%;
165+
}
166+
}

‎index.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -271,22 +271,22 @@ <h4>Snake Game</h4>
271271
<img src="30DaysOfJavaScript/assets/38.png" alt="Snake Game" />
272272
</a>
273273
</div>
274-
275-
<div class="item">
276-
<a target="_blank" href="38 - Snake-Game/index.html">
277-
<h4>Snake Game</h4>
278-
<img src="30DaysOfJavaScript/assets/38.png" alt="Snake Game" />
279-
</a>
280-
</div>
281274
<div class="item">
282275
<a target="_blank" href="39 - Age Calculator/index.html">
283276
<h4>Age Calculator</h4>
284277
<img src="30DaysOfJavaScript/assets/39.png" alt="Age Calculator" />
285278
</a>
286279
</div>
280+
<div class="item">
281+
<a target="_blank" href="40 - Gradient Generator/index.html">
282+
<h4>Gradient Generator</h4>
283+
<img src="30DaysOfJavaScript/assets/40.png" alt="Gradient Generator" />
284+
</a>
285+
</div>
287286

288287

289288
</div>
289+
290290
</div>
291291

292292
<footer>
@@ -298,4 +298,4 @@ <h4>Age Calculator</h4>
298298
</footer>
299299
</body>
300300

301-
</html>
301+
</html>

0 commit comments

Comments
 (0)