Skip to content

Commit b40eccb

Browse files
tajulafreentajulafreen
authored
Merge pull request #23 from tajulafreen/Gradient_Background_Generator
Gradient background generator
2 parents 8067b61 + 4a2b255 commit b40eccb

File tree

4 files changed

+136
-0
lines changed

4 files changed

+136
-0
lines changed

Diff for: ‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,17 @@ In order to run this project you need:
232232
</details>
233233
</li>
234234

235+
<li>
236+
<details>
237+
<summary>Gradient Background Generator</summary>
238+
<p>The Gradient Background Generator is a user-friendly tool built using HTML, CSS, and JavaScript. This project allows users to create beautiful gradient backgrounds effortlessly. Users can select two colors to generate a gradient background and see the corresponding CSS code, which they can easily copy and use in their own projects. The tool is designed to be beginner-friendly, making it an excellent project for those new to web development.</p>
239+
<ul>
240+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/GradientBackgroundGenerator/">Live Demo</a></li>
241+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/GradientBackgroundGenerator">Source</a></li>
242+
</ul>
243+
</details>
244+
</li>
245+
235246
</ol>
236247

237248
<p align="right">(<a href="#readme-top">back to top</a>)</p>

Diff for: ‎Source-Code/GradientBackgroundGenerator/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Gradient Background Generator</title>
7+
<link rel="stylesheet" type="text/css" href="style.css" />
8+
</head>
9+
<body id="gradient">
10+
<h1>Background Generator</h1>
11+
<label for="color1">Choose Color 1:</label>
12+
<input
13+
class="color1"
14+
type="color"
15+
id="color1"
16+
name="color1"
17+
value="#ff0000"
18+
/>
19+
<label for="color2">Choose Color 2:</label>
20+
<input
21+
class="color2"
22+
type="color"
23+
id="color2"
24+
name="color2"
25+
value="#ffff00"
26+
/>
27+
<h2>Current CSS Background</h2>
28+
<div id="css-container">
29+
<h3 id="css-background"></h3>
30+
<button id="copy-btn">
31+
<span class="transition"></span>
32+
<span class="gradient"></span>
33+
Copy
34+
</button>
35+
</div>
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

Diff for: ‎Source-Code/GradientBackgroundGenerator/script.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const gradient = document.getElementById('gradient');
3+
const color1 = document.querySelector('.color1');
4+
const color2 = document.querySelector('.color2');
5+
const cssBackground = document.getElementById('css-background');
6+
const copyBtn = document.getElementById('copy-btn');
7+
8+
const updateBackground = () => {
9+
const color1Value = color1.value;
10+
const color2Value = color2.value;
11+
const background = `linear-gradient(to right, ${color1Value}, ${color2Value})`;
12+
13+
gradient.style.background = background;
14+
cssBackground.textContent = `background: ${background};`;
15+
};
16+
17+
const copyToClipboard = () => {
18+
const textToCopy = cssBackground.textContent;
19+
navigator.clipboard.writeText(textToCopy).then(
20+
() => {
21+
alert('CSS background value copied to clipboard!');
22+
},
23+
(err) => {
24+
console.error('Failed to copy: ', err);
25+
},
26+
);
27+
};
28+
color1.addEventListener('input', updateBackground);
29+
color2.addEventListener('input', updateBackground);
30+
copyBtn.addEventListener('click', copyToClipboard);
31+
// Initialize background on page load
32+
updateBackground();
33+
});

Diff for: ‎Source-Code/GradientBackgroundGenerator/style.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: Arial, sans-serif;
5+
text-align: center;
6+
background: linear-gradient(to right, #f00, #ff0);
7+
transition: 0.5s ease;
8+
}
9+
10+
h1 {
11+
margin-top: 20px;
12+
}
13+
14+
input {
15+
margin: 10px;
16+
border: none;
17+
height: 40px;
18+
width: 100px;
19+
}
20+
21+
h2,
22+
h3 {
23+
margin: 20px;
24+
}
25+
26+
button {
27+
width: 250px;
28+
height: 40px;
29+
background: #eeeff1;
30+
color: rgb(16, 16, 16);
31+
border: none;
32+
border-radius: 0.6em;
33+
cursor: pointer;
34+
font-size: large;
35+
font-weight: 500;
36+
margin-top: 1rem;
37+
transition: 0.5s, color 0.5s, transform 0.5s;
38+
}
39+
40+
button:hover {
41+
background: #8ce0ea;
42+
color: #eeeff1;
43+
transform: scale(1.1);
44+
}
45+
46+
@keyframes button-press {
47+
0% { transform: scale(1); }
48+
50% { transform: scale(0.9); }
49+
100% { transform: scale(1); }
50+
}
51+
52+
button:active {
53+
animation: button-press 0.2s;
54+
}

0 commit comments

Comments
 (0)