JavaScript Utilities Demo

Demonstrating search, filter, and utility functions

Demo Data

1. Advanced Search

Search Demo (search.js)

Search Query:

Results: 4

Try these searches:
• "nightshift" → finds "Disable night shift" and "Configure nightshift"
• "shift night" → same results (order independent)
• "paint rect" → finds "Draw rectangle in Paint"
• "note" → finds "Open Notepad"

2. Multi-Field Filtering

Filter Demo (filters.js)

Domain:

Duration (seconds):

Filtered: 4

3. Format Utilities

Utilities Demo (utils.js)

Duration Formatting

45.5 →

Timestamp Formatting

Relative Time

Percentage Formatting

0.856 →

4. Search + Filter + Format (Combined)

Combined Demo

Results: 4

') * // "<script>alert("XSS")</script>" */ function escapeHTML(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } /** * Create element with attributes and children * * @param {string} tag - Element tag name * @param {Object} attrs - Element attributes * @param {Array|string} children - Child elements or text * @returns {HTMLElement} Created element * * @example * const div = createElement('div', * { class: 'container', id: 'main' }, * [ * createElement('h1', {}, 'Title'), * createElement('p', {}, 'Content') * ] * ); */ function createElement(tag, attrs = {}, children = []) { const element = document.createElement(tag); // Set attributes Object.entries(attrs).forEach(([key, value]) => { if (key === 'class') { element.className = value; } else if (key === 'style' && typeof value === 'object') { Object.assign(element.style, value); } else { element.setAttribute(key, value); } }); // Add children if (typeof children === 'string') { element.textContent = children; } else if (Array.isArray(children)) { children.forEach(child => { if (typeof child === 'string') { element.appendChild(document.createTextNode(child)); } else if (child instanceof HTMLElement) { element.appendChild(child); } }); } return element; } /* ========================================================================== Utility Helpers ========================================================================== */ /** * Deep clone an object * * @param {Object} obj - Object to clone * @returns {Object} Cloned object */ function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); } /** * Get nested property safely * * @param {Object} obj - Object to query * @param {string} path - Property path (e.g., "user.profile.name") * @param {*} defaultValue - Default value if not found * @returns {*} Property value or default * * @example * const user = { profile: { name: "Alice" } }; * getNestedProperty(user, "profile.name") // "Alice" * getNestedProperty(user, "profile.age", 25) // 25 */ function getNestedProperty(obj, path, defaultValue = undefined) { const keys = path.split('.'); let result = obj; for (const key of keys) { if (result && typeof result === 'object' && key in result) { result = result[key]; } else { return defaultValue; } } return result; } /** * Group array of objects by a field * * @param {Array