Skip to content

Commit 63e3229

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1987 from yash-gharat/Random-Gradient-Generator
Random Gradient Generator
2 parents 90bfc7f + 065cd63 commit 63e3229

3 files changed

Lines changed: 144 additions & 0 deletions

File tree

‎Projects/Random-Gradient-Generator/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Random Gradient Generator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<header>Random Gradient Generator</header>
13+
<div id="gradient" class="gradient">
14+
<button id="generateButton">Generate Gradient</button>
15+
<div class="input-container">
16+
<input type="text" id="gradientCode" readonly>
17+
<button id="copyButton" class="copy-button">Copy</button>
18+
</div>
19+
</div>
20+
21+
<script src="script.js"></script>
22+
</body>
23+
24+
</html>

‎Projects/Random-Gradient-Generator/script.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
const gradientDiv = document.getElementById("gradient");
3+
const generateButton = document.getElementById("generateButton");
4+
const gradientCodeInput = document.getElementById("gradientCode");
5+
const copyButton = document.getElementById("copyButton");
6+
7+
// Function to generate a random color
8+
function generateRandomColor() {
9+
return '#' + Math.floor(Math.random() * 16777215).toString(16);
10+
}
11+
12+
// Function to generate random gradient and set as background
13+
function generateRandomGradient() {
14+
const color1 = generateRandomColor();
15+
const color2 = generateRandomColor();
16+
const gradientDirection = Math.random() < 0.5 ? "to right" : "to left"; // Random gradient direction
17+
const gradient = `linear-gradient(${gradientDirection}, ${color1}, ${color2})`;
18+
gradientDiv.style.background = gradient;
19+
gradientCodeInput.value = `background: ${gradient};`;
20+
}
21+
22+
// Event listener for the button click
23+
generateButton.addEventListener("click", generateRandomGradient);
24+
25+
// Event listener for the copy button click
26+
copyButton.addEventListener("click", function() {
27+
gradientCodeInput.select();
28+
document.execCommand("copy");
29+
});
30+
31+
// Initial random gradient
32+
generateRandomGradient();
33+
});
34+

‎Projects/Random-Gradient-Generator/style.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
header {
6+
height: 5rem;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
font-size: xx-large;
11+
color: white;
12+
background-color: #222;
13+
}
14+
.gradient {
15+
width: 100%;
16+
height: calc(100vh - 5rem);
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
}
22+
23+
button {
24+
margin-bottom: 20px;
25+
padding: 20px 20px;
26+
font-size: 16px;
27+
background-color: #222;
28+
color: #fff;
29+
border: none;
30+
border-radius: 1rem;
31+
cursor: pointer;
32+
transition: background-color 0.3s;
33+
}
34+
35+
button:hover {
36+
background-color: #515151;
37+
color: #fff;
38+
}
39+
40+
.input-container {
41+
position: relative;
42+
margin-bottom: 20px;
43+
}
44+
45+
.input-container input[type="text"] {
46+
width: 400px;
47+
height: 4rem;
48+
background-color: #717171;
49+
color: #fff;
50+
padding: 10px;
51+
font-size: 20px;
52+
border: 1px solid #ccc;
53+
border-radius: 50rem;
54+
outline: none;
55+
}
56+
57+
.input-container input[type="text"]:focus {
58+
border-color: #222;
59+
}
60+
61+
.copy-button {
62+
height: 4rem;
63+
width: 4rem;
64+
position: absolute;
65+
right: 10px;
66+
top: 50%;
67+
transform: translateY(-50%);
68+
padding: 6px 12px;
69+
font-size: 14px;
70+
background-color: #222;
71+
color: white;
72+
border: none;
73+
border-radius: 50rem;
74+
cursor: pointer;
75+
transition: background-color 0.3s;
76+
}
77+
78+
.copy-button:hover {
79+
background-color: #515151;
80+
}
81+
/* Media Query for responsiveness */
82+
@media screen and (max-width: 768px) {
83+
.input-container input[type="text"] {
84+
width: 90%; /* Adjusted width for smaller screens */
85+
}
86+
}

0 commit comments

Comments
 (0)