Skip to content

Commit 2059df5

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1230 from Vidip-Ghosh/Issue#1182
Add HexToRGBA Project
2 parents dec7713 + 9929c7c commit 2059df5

2 files changed

Lines changed: 98 additions & 0 deletions

File tree

‎Projects/HexToRGBAConverter/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>Hex To RGBA Converter</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
</head>
9+
<body>
10+
<h1 class="font-semibold text-center text-3xl">
11+
Hex Color to RGBA Converter
12+
</h1>
13+
<div class="flex justify-center items-center h-screen">
14+
<form class="bg-white shadow-md rounded px-8 pt-6 mb-4">
15+
<div class="mb-4">
16+
<input
17+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
18+
id="hex-color"
19+
type="text"
20+
placeholder="Enter Hex Color Code"
21+
/>
22+
</div>
23+
<div class="mb-4">
24+
<input
25+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
26+
id="opacity"
27+
type="text"
28+
placeholder="Opacity"
29+
/>
30+
</div>
31+
<div class="flex justify-center h-100 align-items-center mb-4">
32+
<button
33+
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
34+
id="convert"
35+
type="button"
36+
onclick="hexToRGBA()"
37+
>
38+
Convert into RGBA
39+
</button>
40+
</div>
41+
<div class="mb-4">
42+
<input
43+
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
44+
id="rgb-color"
45+
type="text"
46+
placeholder="Output"
47+
/>
48+
</div>
49+
</form>
50+
</div>
51+
</body>
52+
<script src="HexToRGBA.js"></script>
53+
</html>

‎Projects/HexToRGBAConverter/script.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const hexToRGBA = (hexColor,opacity) => {
2+
var input = document.getElementById("hex-color").value;
3+
var output = document.getElementById("rgb-color");
4+
var hexRegx = /^#[a-fA-F0-9]{6}$|^#[a-fA-F0-9]{3}$/;
5+
6+
if (input.match(hexRegx)) {
7+
var hexColor = input.replace("#", "");
8+
var r, g, b;
9+
10+
if (hexColor.length === 3) {
11+
r = parseInt(hexColor[0] + hexColor[0], 16);
12+
g = parseInt(hexColor[1] + hexColor[1], 16);
13+
b = parseInt(hexColor[2] + hexColor[2], 16);
14+
} else if (hexColor.length === 6) {
15+
r = parseInt(hexColor.substring(0, 2), 16);
16+
g = parseInt(hexColor.substring(2, 4), 16);
17+
b = parseInt(hexColor.substring(4, 6), 16);
18+
}
19+
if(!isNaN(opacity) && opacity >= 0 && opacity <= 1)
20+
{
21+
output.value = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
22+
}
23+
else
24+
{
25+
output.value = "rgba(" + r + "," + g + "," + b + ")";
26+
}
27+
}
28+
else {
29+
alert('Enter Correct Color code');
30+
}
31+
}
32+
33+
const convert = () =>{
34+
var hexColor = document.getElementById("hex-color").value;
35+
var opacity = document.getElementById("opacity").value;
36+
37+
if(!isNaN(opacity) && opacity>=0 && opacity<=1)
38+
{
39+
hexToRGBA(hexColor,opacity)
40+
}
41+
else
42+
{
43+
alert('Opacity value should be between [0 - 1]');
44+
}
45+
}

0 commit comments

Comments
 (0)