Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Snippets] Added several new color snippets for JavaScript. #185

Merged
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/consolidated/c.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"numbers"
],
"contributors": [],
"code": "#include<stdio.h>\nvoid swap(int* num1,int* num2){\n *num1 = *num1 + *num2;\n *num2 = *num1 - *num2;\n *num1 = *num1 - *num2;\n}\n\n// Usage:\nint a = 3,b = 4;\nswap(&a,&b); // simply use printf after this to print swapped values\n"
"code": "#include<stdio.h>\nvoid swap(int* num1,int* num2){\n *num1 = *num1 + *num2;\n *num2 = *num1 - *num2;\n *num1 = *num1 - *num2;\n}\n\n// Usage:\nint a = 3,b = 4;\nswap(&a,&b); // swaps the values of the a and b variables\n"
}
]
}
Expand Down
33 changes: 33 additions & 0 deletions public/consolidated/javascript.json
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,28 @@
{
"categoryName": "Color Manipulation",
"snippets": [
{
"title": "Hex to RGB Color",
"description": "Converts hexadecimal color code to RGB color values.",
"author": "pvictordev",
"tags": [
"color",
"conversion"
],
"contributors": [],
"code": "function hexToRgb(r, g, b) {\n return (\n \"#\" +\n [r, g, b]\n .map((x) => {\n const hex = x.toString(16);\n return hex.length === 1 ? \"0\" + hex : hex;\n })\n .join(\"\")\n );\n},\n\n// Usage:\nconsole.log(hexToRgb(\"#ff5733\")); // { r: 255, g: 87, b: 51 }\nconsole.log(hexToRgb(\"#ffff\")); // { r: 0, g: 255, b: 255 }\n"
},
{
"title": "HSL to RGB Color",
"description": "Converts HSL color values to RGB color values.",
"author": "pvictordev",
"tags": [
"color",
"conversion"
],
"contributors": [],
"code": "function hslToRgb(h, s, l) {\n s /= 100;\n l /= 100;\n const c = (1 - Math.abs(2 * l - 1)) * s;\n const x = c * (1 - Math.abs((h / 60) % 2 - 1));\n const m = l - c / 2;\n\n const [r, g, b] = \n h < 60 ? [c, x, 0] :\n h < 120 ? [x, c, 0] :\n h < 180 ? [0, c, x] :\n h < 240 ? [0, x, c] :\n h < 300 ? [x, 0, c] :\n [c, 0, x];\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n };\n}\n\n// Usage:\nconsole.log(hslToRgb(14, 100, 60)); // { r: 255, g: 87, b: 51 }\nconsole.log(hslToRgb(0, 0, 100)); // { r: 255, g: 255, b: 255 }\n"
},
{
"title": "RGB to Hex Color",
"description": "Converts RGB color values to hexadecimal color code.",
Expand All @@ -90,6 +112,17 @@
],
"contributors": [],
"code": "function rgbToHex(r, g, b) {\n const toHex = (n) => {\n const hex = n.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n };\n \n return '#' + toHex(r) + toHex(g) + toHex(b);\n}\n\n// Usage:\nconsole.log(rgbToHex(255, 128, 0)); // Output: \"#ff8000\"\nconsole.log(rgbToHex(0, 255, 0)); // Output: \"#00ff00\"\n"
},
{
"title": "RGB to HSL Color",
"description": "Converts RGB color values to HSL color values.",
"author": "pvictordev",
"tags": [
"color",
"conversion"
],
"contributors": [],
"code": "function rgbToHsl(r, g, b) {\n [r, g, b] = [r, g, b].map((v) => v / 255);\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n const l = (max + min) / 2;\n\n if (delta === 0) return { h: 0, s: 0, l: Math.round(l * 100) };\n\n const s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);\n\n const h = \n max === r ? ((g - b) / delta + (g < b ? 6 : 0)) :\n max === g ? (b - r) / delta + 2 :\n (r - g) / delta + 4;\n\n return {\n h: Math.round(h * 60), \n s: Math.round(s * 100),\n l: Math.round(l * 100), \n };\n}\n\n// Usage:\nconsole.log(rgbToHsl(255, 87, 51)); // { h: 14, s: 100, l: 60 }\nconsole.log(rgbToHsl(255, 255, 255)); // { h: 0, s: 0, l: 100 }\n"
}
]
},
Expand Down
24 changes: 24 additions & 0 deletions snippets/javascript/color-manipulation/hex-to-rgb-color.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
title: Hex to RGB Color
description: Converts hexadecimal color code to RGB color values.
author: pvictordev
tags: color,conversion
---

```js
function hexToRgb(r, g, b) {
pvictordev marked this conversation as resolved.
Show resolved Hide resolved
return (
"#" +
[r, g, b]
.map((x) => {
const hex = x.toString(16);
return hex.length === 1 ? "0" + hex : hex;
})
.join("")
);
},

// Usage:
console.log(hexToRgb("#ff5733")); // { r: 255, g: 87, b: 51 }
console.log(hexToRgb("#ffff")); // { r: 0, g: 255, b: 255 }
```
34 changes: 34 additions & 0 deletions snippets/javascript/color-manipulation/hsl-to-rgb-color.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
title: HSL to RGB Color
description: Converts HSL color values to RGB color values.
author: pvictordev
tags: color,conversion
---

```js
function hslToRgb(h, s, l) {
s /= 100;
l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c / 2;

const [r, g, b] =
h < 60 ? [c, x, 0] :
h < 120 ? [x, c, 0] :
h < 180 ? [0, c, x] :
h < 240 ? [0, x, c] :
h < 300 ? [x, 0, c] :
[c, 0, x];

return {
r: Math.round((r + m) * 255),
g: Math.round((g + m) * 255),
b: Math.round((b + m) * 255),
};
}

// Usage:
console.log(hslToRgb(14, 100, 60)); // { r: 255, g: 87, b: 51 }
console.log(hslToRgb(0, 0, 100)); // { r: 255, g: 255, b: 255 }
```
37 changes: 37 additions & 0 deletions snippets/javascript/color-manipulation/rgb-to-hsl-color.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: RGB to HSL Color
description: Converts RGB color values to HSL color values.
author: pvictordev
tags: color,conversion
---

```js
function rgbToHsl(r, g, b) {
[r, g, b] = [r, g, b].map((v) => v / 255);

const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;

const l = (max + min) / 2;

if (delta === 0) return { h: 0, s: 0, l: Math.round(l * 100) };

const s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);

const h =
max === r ? ((g - b) / delta + (g < b ? 6 : 0)) :
max === g ? (b - r) / delta + 2 :
(r - g) / delta + 4;

return {
h: Math.round(h * 60),
s: Math.round(s * 100),
l: Math.round(l * 100),
};
}

// Usage:
console.log(rgbToHsl(255, 87, 51)); // { h: 14, s: 100, l: 60 }
console.log(rgbToHsl(255, 255, 255)); // { h: 0, s: 0, l: 100 }
```