Skip to content

Commit dd249a6

Browse files
harshalhonde21harshalhonde21
authored
Merge branch 'thinkswell:master' into master
2 parents 46aeab6 + 30d4060 commit dd249a6

File tree

5 files changed

+189
-0
lines changed

5 files changed

+189
-0
lines changed

‎RandomColorGenerator/Vasunayak262/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Color Generator App
2+
3+
A simple web application that generates random colors and provides their HEX, RGB, and HSL values.
4+
5+
![Screenshot](images/Screenshot1.png)
6+
7+
8+
## Features
9+
10+
- Generates random colors with HEX, RGB, and HSL values.
11+
- Allows copying color values to the clipboard.
12+
- Displays a history of generated colors.

‎RandomColorGenerator/Vasunayak262/images/Screenshot1.png‎

83.8 KB
Loading

‎RandomColorGenerator/Vasunayak262/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>Random Color Generator</title>
7+
<link rel="stylesheet" href="style.css">
8+
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="color-box">
13+
<h1 class="color-heading">Color Picker</h1>
14+
<button id="generate-color">Generate Color</button>
15+
<div class="color-info">
16+
<p class="color-value" id="hex-value">#FFFFFF</p>
17+
<p class="color-value" id="rgb-value">rgb(255, 255, 255)</p>
18+
<p class="color-value" id="hsl-value">hsl(0%, 0%, 100%)</p>
19+
</div>
20+
<button id="copy-button" type="button" class="btn btn-light" >Copy to Clipboard</button>
21+
</div>
22+
</div>
23+
24+
<script src="script.js"></script>
25+
26+
</body>
27+
</html>

‎RandomColorGenerator/Vasunayak262/script.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const generateColorButton = document.getElementById("generate-color");
2+
const hexValue = document.getElementById("hex-value");
3+
const rgbValue = document.getElementById("rgb-value");
4+
const hslValue = document.getElementById("hsl-value");
5+
const copyButton = document.getElementById("copy-button");
6+
const colorBox = document.querySelector(".color-box");
7+
const colorHistory = document.querySelector(".color-history");
8+
9+
generateColorButton.addEventListener("click", generateRandomColor);
10+
copyButton.addEventListener("click", copyToClipboard);
11+
12+
function generateRandomColor() {
13+
// Generate a random color
14+
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
15+
16+
// Update color values
17+
hexValue.textContent = randomColor;
18+
const rgbColor = hexToRgb(randomColor);
19+
rgbValue.textContent = `rgb(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b})`;
20+
const hslColor = rgbToHsl(rgbColor.r, rgbColor.g, rgbColor.b);
21+
hslValue.textContent = `hsl(${hslColor.h}, ${hslColor.s}%, ${hslColor.l}%)`;
22+
23+
// Update color preview
24+
colorBox.style.backgroundColor = randomColor;
25+
26+
// Add the generated color to the history panel
27+
const colorHistoryItem = document.createElement("div");
28+
colorHistoryItem.classList.add("color-history-item");
29+
colorHistoryItem.style.backgroundColor = randomColor;
30+
colorHistory.appendChild(colorHistoryItem);
31+
}
32+
33+
function copyToClipboard() {
34+
const textToCopy = hexValue.textContent;
35+
36+
// Create a text area element, set its value, and select it for copying
37+
const textArea = document.createElement("textarea");
38+
textArea.value = textToCopy;
39+
document.body.appendChild(textArea);
40+
textArea.select();
41+
document.execCommand("copy");
42+
document.body.removeChild(textArea);
43+
44+
// Provide user feedback (e.g., change the button text temporarily)
45+
copyButton.textContent = "Copied!";
46+
setTimeout(() => {
47+
copyButton.textContent = "Copy to Clipboard";
48+
}, 2000);
49+
}
50+
51+
// Helper functions for color conversion
52+
function hexToRgb(hex) {
53+
const bigint = parseInt(hex.slice(1), 16);
54+
const r = (bigint >> 16) & 255;
55+
const g = (bigint >> 8) & 255;
56+
const b = bigint & 255;
57+
return { r, g, b };
58+
}
59+
60+
function rgbToHsl(r, g, b) {
61+
r /= 255;
62+
g /= 255;
63+
b /= 255;
64+
65+
const max = Math.max(r, g, b);
66+
const min = Math.min(r, g, b);
67+
let h, s, l = (max + min) / 2;
68+
69+
if (max === min) {
70+
h = s = 0; // grayscale
71+
} else {
72+
const d = max - min;
73+
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
74+
switch (max) {
75+
case r:
76+
h = (g - b) / d + (g < b ? 6 : 0);
77+
break;
78+
case g:
79+
h = (b - r) / d + 2;
80+
break;
81+
case b:
82+
h = (r - g) / d + 4;
83+
break;
84+
}
85+
h /= 6;
86+
}
87+
88+
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
89+
}

‎RandomColorGenerator/Vasunayak262/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-image: url('https://e0.pxfuel.com/wallpapers/20/892/desktop-wallpaper-firewatch-green-forest-mountains-minimal.jpg');
4+
display: flex;
5+
background-size: cover;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
margin: 0;
10+
}
11+
.container {
12+
text-align: center;
13+
}
14+
15+
16+
.color-box {
17+
background-color: #FFFFFF;
18+
width: 300px;
19+
height: 300px;
20+
border-radius: 20px;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
padding: 20px;
25+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
26+
position: relative; /* Add this for animation */
27+
overflow: hidden; /* Add this for animation */
28+
transition: transform 0.3s ease-in-out; /* Add this for animation */
29+
}
30+
31+
.color-box:hover {
32+
transform: scale(1.05); /* Add this for a smooth hover effect */
33+
}
34+
35+
.color-heading {
36+
font-size: 24px;
37+
font-weight: bold;
38+
margin: 0 0 20px;
39+
}
40+
41+
#generate-color {
42+
background-color: #3498db;
43+
color: #fff;
44+
border: none;
45+
padding: 10px 20px;
46+
margin-bottom: 10px;
47+
cursor: pointer;
48+
border-radius: 5px;
49+
font-weight: bold;
50+
}
51+
52+
#color-value {
53+
font-size: 20px;
54+
margin: 0;
55+
}
56+
57+
.color-box h1 {
58+
font-size: 24px;
59+
font-weight: bold;
60+
margin: 0 0 20px;
61+
}

0 commit comments

Comments
 (0)