Skip to content

Commit

Permalink
Merge branch 'master' into my-feature-branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@P-lavanya16
P-lavanya16 authored Aug 2, 2024
2 parents 85acdc0 + 4748ad5 commit 0bbab9b
Show file tree
Hide file tree
Showing 6,623 changed files with 639,751 additions and 1,761 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
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 0bbab9b

Please sign in to comment.