[Snippets] Added 20 new JavaScript snippets across multiple categories #229

JanluOfficial · 2025-01-10T22:39:17Z

Description

Added 20 new code snippets for JavaScript across 6 categories.

Validation

Email Validation
Phone Number Validation (US)
Phone Number Validation (International)
URL Validation
Credit card number validation

Color Manipulation

Hex to HSL Color
HSL to Hex Color
Random Hex Color
Random HSL Color
Random RGB Color

Local Storage

Clear all items from localStorage
Get all keys from localStorage
Update item in localStorage

DOM Manipulation

Add CSS Class to an Element
Remove CSS Class from an Element
Toggle a CSS Class on an Element
Get computed style from an Element

Array Manipulation

Combine Arrays
Union Arrays

Object Manipulation

Combine Objects

Type of Change

Checklist

I have tested my code and verified it works as expected.
My code follows the style and contribution guidelines of this project.
Comments are added where necessary for clarity.
Documentation has been updated (if applicable).
There are no new warnings or errors from my changes.

Related Issues

None

Additional Context

I tried to cram a lot into this one because I want to help out a lot. I will probably make something for different languages soon though, so be on the look out.

ACR1209 · 2025-01-10T22:58:30Z

snippets/javascript/array-manipulation/combine-arrays.md

+
+```js
+function combineArrays(array1, array2) {
+    return array1.concat(array2);


This snippet does not quite align with QuickSnip guidelines, as is simply a wrapper for a standard library of JS

I'll remove this one if requested by a reviewer with write access

@ACR1209 i right, this doesn't align at all with quicksnip guidelines, Please read them it's something that's written in them

ACR1209 · 2025-01-10T23:01:14Z

snippets/javascript/dom-manipulation/add-a-css-class-to-an-element.md

+```js
+function addClass(element, className) {
+    if (element && className) {
+        element.classList.add(className);


The classList.add() method already does the intended functionality you're presenting

typing element.classList.add() is longer than addClass() which is why I'm including it this way

I get it! 💯

This is the same as my response on .remove(), so we could just keep the thread there if you'll like as is an interesting boundary to comment on 😀

Snippet shouldn't wrap around an std functionality, even if the function name is 10x longer, Also valid for the .remove() one too

ACR1209 · 2025-01-10T23:05:33Z

snippets/javascript/dom-manipulation/remove-a-css-class-from-an-element.md

+```js
+function removeClass(element, className) {
+    if (element && className) {
+        element.classList.remove(className);


The classList.remove() method already does the intended functionality you're presenting

typing element.classList.remove() is longer than removeClass() which is why I'm including it this way

I understand your point 💯

But at the end of the day, is a difference of 4 characters and removes the option of multi argument class removal. Plus adds a bit more bloat to the code base.

This was common with IE10 as it did throw errors

Same as for add-a-css-class-to-an-element.

ACR1209 · 2025-01-10T23:15:13Z

snippets/javascript/local-storage/clear-all-items-from-localstorage.md

+---
+
+```js
+localStorage.clear();


This is simply a usage of a language standard function

I included this considering that C:\xampp\htdocs\quicksnip\snippets\javascript\basics\hello-world.md is essentially also just a standard language function

Yeah, you're definitely right on that, hello worlds are a kinda of the exception to the rule I think.

But for the rest of snippets we do consider the contributing guidelines "Does the standard library of my language provide an easy way of doing this ?" boundary

If requested by a reviewer with write access, I will remove this

ACR is right, Btw I've noticed you are not taking feedback from the community Even when it's backed by the guidelines, The community has an important role into the reviewing process, please take them a bit more into account.

Hello world, is infact a specific snippet, and it should be (in most cases) the only one of it's "type", so no, as per the guidelines, this doesn't qualify as a snippet

Mcbencrafter · 2025-01-11T09:55:38Z

I think the validation snippets would be better placed under the regex category

Mathys-Gasnier

Thanks for the contribution, please take a look at my feedbacks bellow.

I've noticed some other issues:

all of the stuff in the validation category doesn't really belong here, and fits more the scope of the regex language.
You've created lots of snippets that just wrap over something an std function, your argument of length of call isn't really something we take into account.

Please take into account feedback of the community, and avoid responding "Waiting for a write access reviewer to confirm". Yes we have the "final" say in what to do or not do, but when the feedback is backed by the guidelines take it into account

Mathys-Gasnier · 2025-01-12T15:37:22Z

snippets/javascript/array-manipulation/combine-arrays.md

+
+```js
+function combineArrays(array1, array2) {
+    return array1.concat(array2);


@ACR1209 i right, this doesn't align at all with quicksnip guidelines, Please read them it's something that's written in them

Mathys-Gasnier · 2025-01-12T19:41:14Z

snippets/javascript/dom-manipulation/add-a-css-class-to-an-element.md

+```js
+function addClass(element, className) {
+    if (element && className) {
+        element.classList.add(className);


Snippet shouldn't wrap around an std functionality, even if the function name is 10x longer, Also valid for the .remove() one too

Mathys-Gasnier · 2025-01-12T19:41:51Z

snippets/javascript/dom-manipulation/remove-a-css-class-from-an-element.md

+```js
+function removeClass(element, className) {
+    if (element && className) {
+        element.classList.remove(className);


Same as for add-a-css-class-to-an-element.

Mathys-Gasnier · 2025-01-12T19:42:14Z

snippets/javascript/dom-manipulation/toggle-a-css-class-on-an-element.md

Same as add-a-css-class-to-an-element

Mathys-Gasnier · 2025-01-12T19:44:02Z

snippets/javascript/local-storage/clear-all-items-from-localstorage.md

+---
+
+```js
+localStorage.clear();


ACR is right, Btw I've noticed you are not taking feedback from the community Even when it's backed by the guidelines, The community has an important role into the reviewing process, please take them a bit more into account.

Hello world, is infact a specific snippet, and it should be (in most cases) the only one of it's "type", so no, as per the guidelines, this doesn't qualify as a snippet

Mathys-Gasnier · 2025-01-12T19:45:17Z

snippets/javascript/local-storage/update-item-in-localstorage.md

Same as for the others, it just wraps over an std function, it adds a little bit of functionnality over it... But this functionnality isn't the main goal of the snippet, so in it's current state it's not valid

Mathys-Gasnier · 2025-01-12T19:45:57Z

snippets/javascript/object-manipulation/combine-objects.md

Already exists as merge-objects-deeply

JanluOfficial · 2025-01-18T17:42:16Z

Closed, will make a different pr at a later date.

JanluOfficial added 7 commits January 10, 2025 19:21

Validation Functions

43cac96

Color Functions

e123867

Fix examples and returns on random-color snippets

a112313

localStorage snippets

391e1f9

DOM Manipulation Snippets

ba46e47

Array Functions

cc068ae

Combine Objects and adjustments to combine/union arrays

7807036

JanluOfficial requested review from psychlone77 and saminjay as code owners January 10, 2025 22:39

JanluOfficial added 2 commits January 10, 2025 23:43

Title fix, forgor to commit this 💀

694b08d

Fix description too bruh im stoobid

75ae16e

ACR1209 reviewed Jan 10, 2025

View reviewed changes

Mathys-Gasnier requested changes Jan 12, 2025

View reviewed changes

majvax added the Snippets label Jan 17, 2025

JanluOfficial closed this Jan 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Snippets] Added 20 new JavaScript snippets across multiple categories #229

[Snippets] Added 20 new JavaScript snippets across multiple categories #229

JanluOfficial commented Jan 10, 2025

ACR1209 Jan 10, 2025

JanluOfficial Jan 10, 2025 •

edited

Loading

Mathys-Gasnier Jan 12, 2025

ACR1209 Jan 10, 2025

JanluOfficial Jan 10, 2025

ACR1209 Jan 10, 2025

Mathys-Gasnier Jan 12, 2025

ACR1209 Jan 10, 2025

JanluOfficial Jan 10, 2025

ACR1209 Jan 10, 2025 •

edited

Loading

Mathys-Gasnier Jan 12, 2025

ACR1209 Jan 10, 2025

JanluOfficial Jan 10, 2025

ACR1209 Jan 10, 2025

JanluOfficial Jan 10, 2025

Mathys-Gasnier Jan 12, 2025

Mcbencrafter commented Jan 11, 2025

Mathys-Gasnier left a comment

Mathys-Gasnier Jan 12, 2025

Mathys-Gasnier Jan 12, 2025

Mathys-Gasnier Jan 12, 2025

Mathys-Gasnier Jan 12, 2025

Mathys-Gasnier Jan 12, 2025

Mathys-Gasnier Jan 12, 2025

Mathys-Gasnier Jan 12, 2025

JanluOfficial commented Jan 18, 2025

[Snippets] Added 20 new JavaScript snippets across multiple categories #229

[Snippets] Added 20 new JavaScript snippets across multiple categories #229

Conversation

JanluOfficial commented Jan 10, 2025

Description

Validation

Color Manipulation

Local Storage

DOM Manipulation

Array Manipulation

Object Manipulation

Type of Change

Checklist

Related Issues

Additional Context

Choose a reason for hiding this comment

JanluOfficial Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ACR1209 Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Mcbencrafter commented Jan 11, 2025

Mathys-Gasnier left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JanluOfficial commented Jan 18, 2025

JanluOfficial Jan 10, 2025 •

edited

Loading

ACR1209 Jan 10, 2025 •

edited

Loading