The Ultimate
Snippet Library.

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.

Responsive Flexbox Navbar with Space Distribution

Craft a responsive navigation bar using CSS Flexbox, distributing items evenly and vertically centering them for a clean, modern look. Adapts to smaller screens.

Responsive CSS Grid Image Gallery with Auto-Fit

Build a responsive image gallery using CSS Grid's `repeat(auto-fit, minmax())` function to automatically adjust column counts based on screen size, ensuring a fluid layout.

CSS Flexbox Sticky Footer Layout

Implement a classic sticky footer layout with CSS Flexbox, ensuring your footer always remains at the bottom of the viewport even with minimal content above it.

Full-Page Layout with CSS Grid Areas

Design a comprehensive web page layout (header, nav, main, sidebar, footer) using CSS Grid's named areas for intuitive, semantic, and maintainable structure.

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.