39 - Gradient Generator Added Project · Ndblaze/30DaysOfJavaScript@ce9b0e0 · GitHub
Skip to content

Commit ce9b0e0

Browse files
Hetu1107Hetu1107
committed
39 - Gradient Generator Added Project
closes swapnilsparsh#4
1 parent d92d402 commit ce9b0e0

7 files changed

Lines changed: 276 additions & 1 deletion

File tree

‎30DaysOfJavaScript/assets/39.png‎

39.5 KB
Loading

‎39 - Gradient Generator/assests/grad.png‎

95.8 KB
Loading

‎39 - Gradient Generator/font/sans.ttf‎

54.5 KB
Binary file not shown.

‎39 - Gradient Generator/index.html‎

Lines changed: 83 additions & 0 deletions

‎39 - Gradient Generator/script.js‎

Lines changed: 20 additions & 0 deletions
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+
}

‎39 - Gradient Generator/style.css‎

Lines changed: 166 additions & 0 deletions
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‎

Lines changed: 7 additions & 1 deletion

0 commit comments

Comments
 (0)