Skip to content

Commit 8feb0da

Browse files
MatheusCampagnoloMatheusCampagnolo
committed
Initial commit with functional color palette generator
1 parent fa152cb commit 8feb0da

File tree

3 files changed

+250
-0
lines changed

3 files changed

+250
-0
lines changed

‎index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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>Gerador de Paleta de Cores</title>
7+
<link rel="stylesheet" href="styles/style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Color palette Generator</h1>
12+
<p>This is a simple color palette generator. Click the button below to generate a random palette or choose a specific category.</p>
13+
<button id="generate-random-btn">generate random palette</button>
14+
<hr/>
15+
<button id="generate-by-feature-btn">generate by categories</button>
16+
<select id="feature-select">
17+
<option value="">choose a category</option>
18+
<option value="random">Random</option>
19+
<option value="red">Red Colors</option>
20+
<option value="blue">Blue Colors</option>
21+
<option value="orange">Orange Colors</option>
22+
<option value="yellow">Yellow Colors</option>
23+
<option value="pink">Pink Colors</option>
24+
<option value="green">Green Colors</option>
25+
</select>
26+
</header>
27+
28+
<section id="color-palette">
29+
</section>
30+
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎script.js

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
// Adds event listener to generate a random palette when the button is clicked
2+
document.getElementById('generate-random-btn').addEventListener('click', generateRandomPalette);
3+
// Adds event listener to generate a palette based on a selected feature
4+
document.getElementById('generate-by-feature-btn').addEventListener('click', generatePaletteByFeature);
5+
6+
// Function to generate a palette with random colors
7+
function generateRandomPalette() {
8+
generatePalette(generateRandomColor);
9+
}
10+
11+
// Function to generate a palette based on a selected feature
12+
function generatePaletteByFeature() {
13+
const featureSelect = document.getElementById('feature-select');
14+
const selectedFeature = featureSelect.value;
15+
16+
if (!selectedFeature) {
17+
alert('Please, choose a feature to generate the palette.');
18+
return;
19+
}
20+
21+
let colorGenerator;
22+
switch (selectedFeature) {
23+
case 'random':
24+
colorGenerator = generateRandomColor;
25+
break;
26+
case 'red':
27+
colorGenerator = generateRedColor;
28+
break;
29+
case 'blue':
30+
colorGenerator = generateBlueColor;
31+
break;
32+
case 'orange':
33+
colorGenerator = generateOrangeColor;
34+
break;
35+
case 'yellow':
36+
colorGenerator = generateYellowColor;
37+
break;
38+
case 'pink':
39+
colorGenerator = generatePinkColor;
40+
break;
41+
case 'green':
42+
colorGenerator = generateGreenColor;
43+
break;
44+
default:
45+
alert('feature not found. Please, choose a valid feature.');
46+
return;
47+
}
48+
49+
generatePalette(colorGenerator);
50+
}
51+
52+
// Function to generate a palette based on the provided color generator function
53+
function generatePalette(colorGenerator) {
54+
const colorPalette = document.getElementById('color-palette');
55+
colorPalette.innerHTML = ''; // Clears the existing palette
56+
const paletteColors = new Set(); // Set to store generated colors
57+
58+
for (let i = 0; i < 5; i++) {
59+
let color = colorGenerator();
60+
while (paletteColors.has(color)) {
61+
color = colorGenerator();
62+
}
63+
paletteColors.add(color);
64+
65+
const colorBox = document.createElement('div');
66+
colorBox.classList.add('color-box');
67+
colorBox.style.backgroundColor = color;
68+
colorBox.addEventListener('click', () => {
69+
const copyButton = colorBox.nextSibling;
70+
const oldColor = colorBox.style.backgroundColor;
71+
let newColor = colorGenerator();
72+
while (paletteColors.has(newColor)) {
73+
newColor = colorGenerator();
74+
}
75+
colorBox.style.backgroundColor = newColor;
76+
// Updates the displayed hex code
77+
copyButton.innerText = newColor;
78+
paletteColors.delete(oldColor); // Removes the previous color from the set
79+
paletteColors.add(newColor); // Adds the new color to the set
80+
});
81+
82+
// Adds a button to copy the hexadecimal code
83+
const copyButton = document.createElement('button');
84+
copyButton.innerText = color;
85+
copyButton.addEventListener('click', () => {
86+
copyToClipboard(color);
87+
alert('The hex code has been copied. ' + color);
88+
});
89+
90+
const colorInfo = document.createElement('div');
91+
colorInfo.appendChild(colorBox);
92+
colorInfo.appendChild(copyButton);
93+
colorPalette.appendChild(colorInfo);
94+
}
95+
}
96+
97+
// Function to generate a random hexadecimal color code
98+
function generateRandomColor() {
99+
return '#' + Math.floor(Math.random()*16777215).toString(16);
100+
}
101+
102+
// Function to generate a random red color
103+
function generateRedColor() {
104+
// Generates a hexadecimal value for red between 128 (80 in hex) and 255 (FF in hex)
105+
const red = Math.floor(Math.random() * (255 - 128) + 128).toString(16);
106+
// Keeps green and blue at low values to maintain the color close to red
107+
const green = Math.floor(Math.random() * 56).toString(16); // up to 55 (37 in hex)
108+
const blue = Math.floor(Math.random() * 56).toString(16); // up to 55 (37 in hex)
109+
return `#${red}${green.padStart(2, '0')}${blue.padStart(2, '0')}`;
110+
}
111+
112+
// Function to generate a random green color
113+
function generateGreenColor() {
114+
const red = Math.floor(Math.random() * 56).toString(16);
115+
const green = Math.floor(Math.random() * (255 - 128) + 128).toString(16);
116+
const blue = Math.floor(Math.random() * 56).toString(16);
117+
return `#${red.padStart(2, '0')}${green}${blue.padStart(2, '0')}`;
118+
}
119+
120+
// Function to generate a random orange color
121+
function generateOrangeColor() {
122+
const red = Math.floor(Math.random() * (255 - 200) + 200).toString(16);
123+
const green = Math.floor(Math.random() * (165 - 100) + 100).toString(16);
124+
const blue = Math.floor(Math.random() * 56).toString(16);
125+
return `#${red}${green}${blue.padStart(2, '0')}`;
126+
}
127+
128+
// Function to generate a random blue color
129+
function generateBlueColor() {
130+
const red = Math.floor(Math.random() * 56).toString(16);
131+
const green = Math.floor(Math.random() * 56).toString(16);
132+
const blue = Math.floor(Math.random() * (255 - 128) + 128).toString(16);
133+
return `#${red.padStart(2, '0')}${green.padStart(2, '0')}${blue}`;
134+
}
135+
136+
// Function to generate a random pink color
137+
function generatePinkColor() {
138+
const red = Math.floor(Math.random() * (255 - 200) + 200).toString(16);
139+
const green = Math.floor(Math.random() * (160 - 100) + 100).toString(16);
140+
const blue = Math.floor(Math.random() * (160 - 100) + 100).toString(16);
141+
return `#${red}${green}${blue}`;
142+
}
143+
144+
// Function to generate a random yellow color
145+
function generateYellowColor() {
146+
const red = Math.floor(Math.random() * (255 - 200) + 200).toString(16);
147+
const green = Math.floor(Math.random() * (255 - 200) + 200).toString(16);
148+
const blue = Math.floor(Math.random() * 56).toString(16);
149+
return `#${red}${green}${blue.padStart(2, '0')}`;
150+
}
151+
152+
// Function to copy text to clipboard
153+
function copyToClipboard(text) {
154+
const tempInput = document.createElement('input');
155+
tempInput.value = text;
156+
document.body.appendChild(tempInput);
157+
tempInput.select();
158+
document.execCommand('copy');
159+
document.body.removeChild(tempInput);
160+
}

‎styles/style.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #333333;
6+
color: #ffffff;
7+
}
8+
9+
header {
10+
text-align: center;
11+
padding: 20px;
12+
}
13+
14+
h1 {
15+
font-size: 2em;
16+
margin-bottom: 10px;
17+
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
18+
background-clip: content-box;
19+
-webkit-background-clip: text;
20+
-webkit-text-fill-color: transparent;
21+
display: inline;
22+
}
23+
24+
p {
25+
margin-bottom: 20px;
26+
color: #cccccc;
27+
}
28+
29+
button {
30+
padding: 10px 20px;
31+
font-size: 1em;
32+
background-color: #777777;
33+
color: #ffffff;
34+
border: none;
35+
border-radius: 5px;
36+
cursor: pointer;
37+
}
38+
39+
button:hover {
40+
background-color: #666666;
41+
}
42+
43+
#color-palette {
44+
display: flex;
45+
justify-content: center;
46+
flex-wrap: wrap;
47+
margin-top: 20px;
48+
}
49+
50+
.color-box {
51+
width: 100px;
52+
height: 100px;
53+
margin: 10px;
54+
border-radius: 5px;
55+
border: 1px solid #ffffff;
56+
cursor: pointer;
57+
}

0 commit comments

Comments
 (0)