Skip to content

Commit

Permalink
Merge pull request Sulagna-Dutta-Roy#2558 from ankit071105/master
Browse files Browse the repository at this point in the history 
Added ColorPicker
  • Loading branch information
@Sulagna-Dutta-Roy
Sulagna-Dutta-Roy authored Jul 30, 2024
2 parents 0523f27 + 7d0a17b commit 2d85af7
Show file tree
Hide file tree
Showing 3 changed files with 594 additions and 0 deletions.
82 changes: 82 additions & 0 deletions Gradients Picker/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker and Gradient Maker</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>
<body>
<div class="mu">
<div class="container">
<h1>Color Picker and Gradient Maker</h1>
<h2>Single Color Picker</h2>

<div class="single-color">

<input type="color" id="singleColor" value="#dcd0ff" >

<p id="singleColorValues"></p>

</div>
<h2>Color Display</h2>
<div class="my">
<div class="color-display" id="colorDisplay6" style="width: 90px; height: 40px; border-radius: 10%;"></div>
</div>
<br><br><hr>
<div class="gradient-maker">
<h2>Linear Gradient Maker</h2>
<div class="color-inputs">
<div class="color-picker-container">
<label for="gradientColor1" style="font-weight: bolder;">Choose Your First Color :</label>
<div class="color-picker">
<br>
<input type="color" id="gradientColor1" value="#CAFCFB" placeholder="choose Color">
<br><span class="color-text">Choose Color Here</span> <br>
</div>
<div class="color-display" id="colorDisplay1" style="width: 90px; height: 40px; border-radius: 10%;"></div>
<br>
<span>Adjust Your % Color</span>
<br>
<input type="range" id="color1Slider" min="0" max="100" value="20">
</div>
<div class="color-picker-container">
<label for="gradientColor2" style="font-weight: bolder;">Choose Your Second Color : </label>
<div class="color-picker">
<br>
<input type="color" id="gradientColor2" value="#f34fff" placeholder="choose Color">
<br><span class="color-text">Choose Color Here</span> <br>
</div>
<div class="color-display" id="colorDisplay2" style="width: 90px; height: 40px; border-radius: 10%;"></div>
<br>
<span>Adjust Your % Color</span>
<br>
<input type="range" id="color2Slider" min="0" max="100" value="80">
</div>
</div>
<div class="gradient-display">
<div class="gradient-box" id="gradientTop" data-direction="to top"></div>
<div class="gradient-box" id="gradientBottom" data-direction="to bottom"></div>
<div class="gradient-box" id="gradientLeft" data-direction="to left"></div>
<div class="gradient-box" id="gradientRight" data-direction="to right"></div>
<div class="gradient-box" id="gradientTopRight" data-direction="to top right"></div>
<div class="gradient-box" id="gradientBottomLeft" data-direction="to bottom left"></div>
<div class="gradient-box" id="gradientTopLeft" data-direction="to top left"></div>
<div class="gradient-box" id="gradientBottomRight" data-direction="to bottom right"></div>
</div>
<h2 style="background-color: #ccc; background-color: rgb(18, 13, 8);">CSS Code:</h2>
<div class="css-code">

<pre id="cssCode"></pre>
<button id="copyButton" title="Copy CSS Code">
<i class="fa fa-copy"></i>
</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
102 changes: 102 additions & 0 deletions Gradients Picker/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
function hexToRgb(hex) {
const bigint = parseInt(hex.slice(1), 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return { r, g, b };
}

function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

function updateSingleColor() {
const color = document.getElementById('singleColor').value;
const { r, g, b } = hexToRgb(color);
const hsl = rgbToHsl(r, g, b);

document.getElementById('singleColorValues').innerHTML = `
Hex: ${color}<br>
RGB: rgb(${r}, ${g}, ${b})<br>
HSL: hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)
`;

document.getElementById('colorDisplay6').style.backgroundColor = color;
}

let selectedDirection = 'to bottom';

function updateGradient() {
const color1 = document.getElementById('gradientColor1').value;
const color2 = document.getElementById('gradientColor2').value;
const color1Percent = document.getElementById('color1Slider').value;
const color2Percent = document.getElementById('color2Slider').value;

document.getElementById('colorDisplay1').style.backgroundColor = color1;
document.getElementById('colorDisplay2').style.backgroundColor = color2;

const gradients = [
{ element: 'gradientTop', direction: 'to top' },
{ element: 'gradientBottom', direction: 'to bottom' },
{ element: 'gradientLeft', direction: 'to left' },
{ element: 'gradientRight', direction: 'to right' },
{ element: 'gradientTopRight', direction: 'to top right' },
{ element: 'gradientBottomLeft', direction: 'to bottom left' },
{ element: 'gradientTopLeft', direction: 'to top left' },
{ element: 'gradientBottomRight', direction: 'to bottom right' },
];

gradients.forEach(gradient => {
const gradientCSS = `linear-gradient(${gradient.direction}, ${color1} ${color1Percent}%, ${color2} ${color2Percent}%)`;
document.getElementById(gradient.element).style.background = gradientCSS;
document.getElementById(gradient.element).innerText = gradient.direction.replace('to ', '').replace(' ', '-').toUpperCase();
});

const cssCode = `background: linear-gradient(${selectedDirection}, ${color1} ${color1Percent}%, ${color2} ${color2Percent}%);`;
document.getElementById('cssCode').innerText = cssCode;
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert('CSS Code copied to clipboard!');
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}

document.getElementById('copyButton').addEventListener('click', () => {
const cssCode = document.getElementById('cssCode').innerText;
copyToClipboard(cssCode);
});

document.getElementById('singleColor').addEventListener('input', updateSingleColor);
document.getElementById('gradientColor1').addEventListener('input', updateGradient);
document.getElementById('gradientColor2').addEventListener('input', updateGradient);
document.getElementById('color1Slider').addEventListener('input', updateGradient);
document.getElementById('color2Slider').addEventListener('input', updateGradient);

document.querySelectorAll('.gradient-box').forEach(box => {
box.addEventListener('click', (event) => {
selectedDirection = event.target.getAttribute('data-direction');
updateGradient();
});
});

window.onload = () => {
updateSingleColor();
updateGradient();
};
Loading

0 comments on commit 2d85af7

Please sign in to comment.