Skip to content

Commit c25f6a6

Browse files
stupid-kid-afstupid-kid-af
committed
Final Commit
1 parent d3ec81a commit c25f6a6

File tree

3 files changed

+134
-65
lines changed

3 files changed

+134
-65
lines changed

‎index.html‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,53 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5-
<title>Random Gradient Generator</title>
6-
<!-- Google Font -->
7-
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
8-
<!-- Stylesheet -->
4+
<title>Gradient Generator</title>
5+
<!--Font Awesome-->
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
7+
<!--Google Fonts-->
8+
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap" rel="stylesheet">
9+
<!--Stylesheet-->
910
<link rel="stylesheet" href="style.css">
1011
</head>
1112
<body>
12-
<div class="wrapper">
13-
<div id="output-color"></div>
14-
<input type="text" id="output-code" readonly>
15-
<div class="btn-container">
16-
<button id="generate-btn">Generate</button>
17-
<button id="copy-btn">Copy</button>
13+
<div class="container">
14+
<div class="colors">
15+
<input type="color" id="color-a" value="#1488cc">
16+
<input type="color" id="color-b" value="#2b32b2">
17+
</div>
18+
<div class="buttons">
19+
<button onclick="setDirection('to top',this)">
20+
<i class="fas fa-arrow-up"></i>
21+
</button>
22+
<button class="active" onclick="setDirection('to bottom',this)">
23+
<i class="fas fa-arrow-down"></i>
24+
</button>
25+
<button onclick="setDirection('to right',this)">
26+
<i class="fas fa-arrow-right"></i>
27+
</button>
28+
<button onclick="setDirection('to left',this)">
29+
<i class="fas fa-arrow-left"></i>
30+
</button>
31+
<button class="rotate-icon" onclick="setDirection('to top right',this)">
32+
<i class="fas fa-arrow-up"></i>
33+
</button>
34+
<button class="rotate-icon" onclick="setDirection('to bottom left',this)">
35+
<i class="fas fa-arrow-down"></i>
36+
</button>
37+
<button class="rotate-icon" onclick="setDirection('to bottom right',this)">
38+
<i class="fas fa-arrow-right"></i>
39+
</button>
40+
<button class="rotate-icon" onclick="setDirection('to top left',this)">
41+
<i class="fas fa-arrow-left"></i>
42+
</button>
43+
</div>
44+
<button id="submit" onclick="generateCode()">Generate</button>
45+
<div class="output">
46+
<textarea id="code" rows="2"></textarea>
47+
<button id="copy" onclick="copyText()">Copy</button>
1848
</div>
1949
</div>
20-
<!-- Script -->
50+
<!--Script-->
2151
<script src="script.js"></script>
2252
</body>
2353
</html>

‎script.js‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
1-
let generateBtn = document.getElementById("generate-btn");
2-
let copyBtn = document.getElementById("copy-btn");
3-
let outputColor = document.getElementById("output-color");
4-
let outputCode = document.getElementById("output-code");
5-
let hexString = "0123456789abcdef";
1+
let colorOne = document.getElementById('color-a');
2+
let colorTwo = document.getElementById('color-b');
3+
let currentDirection = 'to bottom';
4+
let outputCode = document.getElementById('code');
65

7-
let randomColor = () => {
8-
let hexCode = "#";
9-
for( i=0; i<6; i++){
10-
hexCode += hexString[Math.floor(Math.random() * hexString.length)];
6+
function setDirection(value,_this){
7+
let directions = document.querySelectorAll(".buttons button");
8+
for(let i of directions){
9+
i.classList.remove('active');
1110
}
12-
return hexCode;
11+
_this.classList.add('active');
12+
currentDirection = value;
1313
}
1414

15-
let generateGrad = () => {
16-
let colorOne = randomColor();
17-
let colorTwo = randomColor();
18-
let angle = Math.floor(Math.random() * 360);
19-
outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
20-
outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo});`;
15+
function generateCode(){
16+
outputCode.value = `background-image: linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value});`
17+
18+
document.getElementsByTagName("BODY")[0].style.backgroundImage = `linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value})`;
2119
}
2220

23-
copyBtn.addEventListener("click", () => {
21+
function copyText(){
2422
outputCode.select();
25-
document.execCommand("copy");
26-
alert("Code Copied To Clipboard");
27-
});
23+
document.execCommand('copy');
24+
alert('Gradient Copied!');
25+
}
26+
27+
generateCode();
2828

29-
generateBtn.addEventListener("click", generateGrad);
30-
window.onload = generateGrad;

‎style.css‎

Lines changed: 72 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,96 @@
1-
*{
1+
*,
2+
*:before,
3+
*:after{
24
padding: 0;
35
margin: 0;
46
box-sizing: border-box;
57
border: none;
68
outline: none;
7-
font-family: "Poppins",sans-serif;
89
}
910
body{
1011
height: 100vh;
11-
background: linear-gradient(
12-
#f7f9fd 50%,
13-
#587ef4 50%
14-
);
1512
}
16-
.wrapper{
17-
width: 80vmin;
13+
.container{
1814
background-color: #ffffff;
15+
width: 400px;
1916
padding: 50px 30px;
20-
border-radius: 8px;
2117
position: absolute;
2218
transform: translate(-50%,-50%);
23-
left: 50%;
2419
top: 50%;
25-
box-shadow: 0 20px 25px rgba(60,60,100,0.15);
20+
left: 50%;
21+
border-radius: 10px;
22+
box-shadow: 0 20px 25px rgba(0,0,0,0.25);
23+
}
24+
.container *:not(i){
25+
font-family: "Rubik",sans-serif;
2626
}
27-
#output-color{
27+
.colors{
2828
width: 100%;
29-
height: 35vmin;
30-
border-radius: 5px;
29+
display: flex;
30+
justify-content: space-around;
3131
}
32-
#output-code{
33-
background-color: #f1f5fc;
34-
font-size: 2.3vmin;
35-
font-weight: 400;
36-
color: #3f415f;
32+
input[type="color"]{
33+
-webkit-appearance: none;
34+
background-color: transparent;
35+
width: 100px;
36+
height: 45px;
37+
cursor: pointer;
38+
}
39+
input[type="color"]::-webkit-color-swatch{
40+
border-radius: 20px;
41+
border: none;
42+
}
43+
.buttons{
3744
width: 100%;
38-
padding: 15px 10px;
45+
display: flex;
46+
justify-content: space-between;
47+
margin: 30px 0;
48+
}
49+
.buttons button{
50+
height: 35px;
51+
width: 35px;
52+
background-color: transparent;
53+
border: 2px solid #d5d5dc;
54+
color: #d5d5dc;
3955
border-radius: 5px;
40-
margin: 20px 0 40px 0;
56+
cursor: pointer;
4157
}
42-
.btn-container{
43-
display: flex;
44-
justify-content: space-around;
58+
.rotate-icon i{
59+
transform: rotate(45deg);
60+
}
61+
.buttons .active{
62+
border: none;
63+
background-color: #4a6ee0;
64+
color: #ffffff;
65+
}
66+
#submit{
67+
display: block;
68+
background-color: #4a6ee0;
69+
color: #ffffff;
70+
font-size: 16px;
71+
padding: 12px 70px;
72+
border-radius: 25px;
73+
margin: 0 auto 30px auto;
74+
cursor: pointer;
75+
}
76+
.output{
77+
background-color: #f0f2fc;
78+
}
79+
#code{
80+
width: 100%;
81+
resize: none;
82+
color: #30304a;
83+
padding: 10px 20px;
84+
background-color: transparent;
4585
}
46-
.btn-container button{
47-
background-color: #587ef4;
48-
min-width: 40%;
49-
padding: 15px 0;
86+
#copy{
87+
font-size: 14px;
88+
background-color: #4a6ee0;
5089
color: #ffffff;
51-
border-radius: 30px;
52-
font-size: 2.6vmin;
53-
font-weight: 500;
90+
position: relative;
91+
left: 85%;
92+
bottom: 10px;
93+
border-radius: 3px;
94+
padding: 5px;
5495
cursor: pointer;
5596
}

0 commit comments

Comments
 (0)