Skip to content

Commit 38a6afd

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day #56
1 parent b99cff2 commit 38a6afd

File tree

7 files changed

+220
-0
lines changed

7 files changed

+220
-0
lines changed

‎Day #56 - Image Color Picker/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #56
2+
3+
### Image Color Picker
4+
In this tutorial ([Open in Youtube](https://youtu.be/ENFIrHO83Xg)), I am gonna showing to you how to code a image color picker app with html, css and javascript. with this color picker app you can open image and pick any color that you want with Eyedropper. in this video you will learn eyedropper api❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](screenshot.jpg)

‎Day #56 - Image Color Picker/bg.jpg

1.24 MB
Loading

‎Day #56 - Image Color Picker/index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Day #56 - Image Color Picker | AsmrProg</title>
10+
</head>
11+
12+
<body>
13+
14+
<div class="container">
15+
<div class="img-section">
16+
<img src="bg.jpg" id="image">
17+
</div>
18+
<div class="btns-container">
19+
<input type="file" id="file" accesskey="image/*">
20+
<label for="file">Open a Photo</label>
21+
<button id="pick-btn">Pick Color</button>
22+
</div>
23+
<div id="result" class="hide">
24+
<div>
25+
<input type="text" id="hex-input" readonly>
26+
<button onclick="copyToClipboard('hex-input')">
27+
<i class="fa-regular fa-copy"></i>
28+
</button>
29+
</div>
30+
<div>
31+
<input type="text" id="rgb-input" readonly>
32+
<button onclick="copyToClipboard('rgb-input')">
33+
<i class="fa-regular fa-copy"></i>
34+
</button>
35+
</div>
36+
<div id="picked-color"></div>
37+
</div>
38+
</div>
39+
40+
41+
<script src="script.js"></script>
42+
</body>
43+
44+
</html>

‎Day #56 - Image Color Picker/screenshot.jpg

92 KB
Loading

‎Day #56 - Image Color Picker/script.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const pickBtn = document.getElementById("pick-btn");
2+
const fileInput = document.getElementById("file");
3+
const image = document.getElementById("image");
4+
const hexInput = document.getElementById("hex-input");
5+
const rgbInput = document.getElementById("rgb-input");
6+
const pickedColor = document.getElementById("picked-color");
7+
8+
// Initialize Eyedropper if supported
9+
const initEyeDropper = () => {
10+
if ("EyeDropper" in window) {
11+
pickBtn.classList.remove("hide");
12+
const eyeDropper = new EyeDropper();
13+
// Event listener for color selection
14+
pickBtn.addEventListener("click", async () => {
15+
try {
16+
const colorValue = await eyeDropper.open();
17+
// Convert colorValue.sRGBHex to lowercase to ensure propper parsing
18+
const hexValue = colorValue.sRGBHex.toLowerCase();
19+
const rgbValue = hexToRgb(hexValue);
20+
result.style.display = "grid";
21+
hexInput.value = hexValue;
22+
rgbInput.value = rgbValue;
23+
pickedColor.style.backgroundColor = hexValue;
24+
} catch {
25+
alert("Your browser doesn't support Eyedropper Api!");
26+
}
27+
});
28+
} else {
29+
alert("Your browser doesn't support Eyedropper Api!");
30+
}
31+
};
32+
33+
// Event listener for file input
34+
fileInput.addEventListener("change", () => {
35+
result.style.display = "none";
36+
const reader = new FileReader();
37+
reader.onload = () => image.setAttribute("src", reader.result);
38+
reader.readAsDataURL(fileInput.files[0]);
39+
});
40+
41+
// Function to copy text to clipboard
42+
const copyToClipboard = (textId) => {
43+
const textElement = document.getElementById(textId);
44+
textElement.select();
45+
document.execCommand("copy");
46+
};
47+
48+
// RGB conversion function
49+
const hexToRgb = (hex) => {
50+
const r = parseInt(hex.slice(1, 3), 16);
51+
const g = parseInt(hex.slice(3, 5), 16);
52+
const b = parseInt(hex.slice(5, 7), 16);
53+
return `rgb(${r}, ${g}, ${b})`;
54+
};
55+
56+
// Initialize Eyedropper
57+
window.onload = initEyeDropper;

‎Day #56 - Image Color Picker/style.css

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
2+
3+
*{
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
10+
input,
11+
label,
12+
button {
13+
border: none;
14+
outline: none;
15+
}
16+
17+
body{
18+
background: linear-gradient(#27272a 50%, #075985 50%);
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
height: 100vh;
23+
}
24+
25+
.container{
26+
color: #000;
27+
background: #fff;
28+
width: 420px;
29+
padding: 32px;
30+
border-radius: 10px;
31+
border: 2px solid #27272a;
32+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
33+
}
34+
35+
img{
36+
width: 350px;
37+
display: block;
38+
height: 350px;
39+
object-fit: cover;
40+
margin-bottom: 26px;
41+
border-radius: 6px;
42+
border: 2px solid #27272a;
43+
}
44+
45+
.btns-container{
46+
display: flex;
47+
gap: 14px;
48+
}
49+
50+
input[type="file"]{
51+
display: none;
52+
}
53+
54+
label,
55+
button{
56+
display: block;
57+
font-size: 13px;
58+
background-color: #075985;
59+
color: #fff;
60+
text-align: center;
61+
padding: 8px;
62+
border-radius: 6px;
63+
cursor: pointer;
64+
}
65+
66+
.btns-container label,
67+
.btns-container button{
68+
flex: 1;
69+
}
70+
71+
#result{
72+
margin: 20px;
73+
grid-template-columns: 1fr 1fr;
74+
gap: 14px;
75+
}
76+
77+
#result div{
78+
position: relative;
79+
display: flex;
80+
align-items: center;
81+
justify-content: space-between;
82+
}
83+
84+
#result input{
85+
background-color: transparent;
86+
font-size: 13px;
87+
padding: 6px;
88+
border: 1px solid #075985;
89+
width: 100%;
90+
border-radius: 6px;
91+
}
92+
93+
#result button{
94+
position: absolute;
95+
right: 2px;
96+
background-color: transparent;
97+
color: #075985;
98+
}
99+
100+
#picked-color{
101+
grid-column: 2;
102+
grid-row: 1 / 3;
103+
border-radius: 6px;
104+
border: 1px solid #27272a;
105+
}
106+
107+
.hide{
108+
display: none;
109+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ Here we have list of projects:
6565
53. Url Shortner
6666
54. Glassmorphism Generator
6767
55. Alarm App
68+
56. Image Color Picker
6869

6970
## Where is rest 45 Projects
7071

0 commit comments

Comments
 (0)