Premium
JAVASCRIPT Snippets.

Dynamically Update CSS Variables on an Element

Learn how to use JavaScript to dynamically set and update CSS custom properties (variables) on specific DOM elements, enabling powerful runtime styling and theming without class toggles.

Collect Form Data and Show Submission Feedback

Discover how to programmatically gather all input values from a form, prevent default submission, and update a specific DOM element to provide real-time user feedback on submission status.

Create and Manage Dynamic List Items with Removal

Generate multiple list items dynamically from an array of data, append them to the DOM, and empower users to remove individual items using event listeners attached to each element.

Detect Element Visibility Using IntersectionObserver

Implement the IntersectionObserver API to efficiently check when a specific DOM element enters or exits the user's viewport, ideal for lazy loading, analytics, or animations.

Validate Flexible International Phone Numbers

Validate various international phone number formats including optional country codes, spaces, and dashes using a robust JavaScript regex pattern.

Extract All Image Source URLs from HTML

Quickly extract all `src` attribute values from `<img>` tags within an HTML string using a regular expression in JavaScript.

Extract YouTube Video ID from URLs

Easily extract the unique video ID from standard, shortened, and embed YouTube URLs using a single, versatile regular expression.

Dynamically Creating and Appending a New Element

Learn how to programmatically create new HTML elements, set their attributes and text content, and append them to the DOM using vanilla JavaScript.

Toggle a CSS Class on Click

Implement interactive UI elements by toggling CSS classes on click using `classList.toggle()` for dynamic styling and behavior without complex state management.

Implementing Event Delegation

Optimize performance and simplify event handling for multiple child elements by attaching a single event listener to their common parent using event delegation.

Inserting HTML Content at Specific Positions

Learn to precisely inject HTML strings into the DOM at various positions relative to a reference element using `insertAdjacentHTML()`, offering fine-grained control over content placement.

Detecting Clicks Outside an Element

Implement common UI patterns like closing modals or dropdowns when a user clicks outside a specific element by leveraging `contains()` and global event listeners.