// Single element (first match) -- returns null if nothing matches
const header = document.querySelector('h1');
const button = document.querySelector('#submit-btn');
const card = document.querySelector('.card');

// Multiple elements (returns a static NodeList, NOT a live HTMLCollection)
const items = document.querySelectorAll('.item');
const links = document.querySelectorAll('a[href^="https"]');

// Iterate NodeList -- forEach works on NodeList, but map/filter do NOT
items.forEach(item => console.log(item.textContent));

// Convert to array first to use full array methods
const itemsArray = [...items]; // Spread operator converts NodeList to Array
const filtered = itemsArray.filter(item => item.classList.contains('active'));

document.getElementById('myId');           // Single element (fastest selector)
document.getElementsByClassName('myClass'); // HTMLCollection (LIVE -- updates automatically)
document.getElementsByTagName('div');      // HTMLCollection (LIVE)

// Live vs static -- the subtle bug:
const liveList = document.getElementsByClassName('item');
const staticList = document.querySelectorAll('.item');

// Removing items from a live collection while iterating skips elements:
for (let i = 0; i < liveList.length; i++) {
    liveList[i].remove(); // BUG: after removing index 0, index 1 becomes index 0,
                          // so you skip every other element!
}
// Fix: iterate backwards, or use the static querySelectorAll:
staticList.forEach(item => item.remove()); // Safe -- static snapshot

const item = document.querySelector('.item');

// Parents -- walking UP the tree
item.parentElement;             // Direct parent (one level up)
item.closest('.container');     // Closest ancestor matching a CSS selector
                                // Searches upward through parents, grandparents, etc.
                                // Returns null if no match (does NOT throw)

// Children -- walking DOWN the tree
item.children;                  // HTMLCollection of direct child elements only
item.firstElementChild;         // First child element (skips text nodes)
item.lastElementChild;          // Last child element

// Siblings -- walking SIDEWAYS
item.nextElementSibling;        // Next sibling element (or null if last)
item.previousElementSibling;    // Previous sibling element (or null if first)

const heading = document.querySelector('h1');

// textContent: Safe, no HTML parsing. Sets raw text only.
// This is what you should use 99% of the time.
heading.textContent = 'New Heading';

// innerHTML: Parses and renders HTML. Powerful but dangerous.
heading.innerHTML = '<span>New</span> Heading';

// outerHTML: Replaces the element ITSELF (including the tag)
// After this, the original 'heading' reference points to a detached node!
heading.outerHTML = '<h2>Replaced!</h2>';

// Edge case: innerHTML destroys all child elements and their event listeners
container.innerHTML += '<div>New</div>';
// BUG: This re-parses ALL existing HTML, destroying event listeners on
// existing children. Use insertAdjacentHTML or append instead:
container.insertAdjacentHTML('beforeend', '<div>New</div>'); // Safe: existing DOM untouched

const link = document.querySelector('a');

// Get/Set attributes
link.getAttribute('href');
link.setAttribute('href', 'https://example.com');
link.removeAttribute('target');
link.hasAttribute('rel');

// Direct property access (for standard attributes)
link.href = 'https://example.com';
link.id = 'main-link';

// Data attributes
// <div data-user-id="123" data-role="admin">
const div = document.querySelector('div');
div.dataset.userId;  // '123'
div.dataset.role;    // 'admin'
div.dataset.newProp = 'value'; // Adds data-new-prop="value"

const element = document.querySelector('.card');

// Modern classList API
element.classList.add('active', 'highlighted');
element.classList.remove('hidden');
element.classList.toggle('collapsed');
element.classList.contains('active');  // true/false
element.classList.replace('old', 'new');

// Multiple operations
element.className = 'card active';  // Overwrites all classes

const box = document.querySelector('.box');

// Inline styles (not recommended for many changes)
box.style.backgroundColor = 'blue';
box.style.marginTop = '20px';
box.style.cssText = 'color: red; font-size: 16px;';

// Get computed styles
const styles = getComputedStyle(box);
styles.width;  // '200px'

// Create element
const div = document.createElement('div');
div.className = 'card';
div.textContent = 'Hello World';

// Create from HTML string
const template = `
    <div class="card">
        <h2>Title</h2>
        <p>Content</p>
    </div>
`;
// Use insertAdjacentHTML (see below)

const container = document.querySelector('.container');
const newElement = document.createElement('div');

// Append/Prepend (multiple nodes allowed)
container.append(newElement);           // Add to end
container.prepend(newElement);          // Add to start
container.append('Text', anotherEl);    // Multiple items

// Insert at specific position
container.insertAdjacentElement('beforebegin', newElement); // Before container
container.insertAdjacentElement('afterbegin', newElement);  // First child
container.insertAdjacentElement('beforeend', newElement);   // Last child
container.insertAdjacentElement('afterend', newElement);    // After container

// Insert HTML string
container.insertAdjacentHTML('beforeend', '<div class="new">New</div>');

const element = document.querySelector('.to-remove');

// Remove
element.remove();

// Replace
const newEl = document.createElement('span');
element.replaceWith(newEl);

// Clone
const clone = element.cloneNode(true);  // true = deep clone
container.append(clone);

const button = document.querySelector('button');

// Standard way
button.addEventListener('click', (event) => {
    console.log('Clicked!', event);
});

// With options
button.addEventListener('click', handler, {
    once: true,     // Remove after first trigger
    passive: true,  // Never calls preventDefault (scroll perf)
    capture: true   // Trigger during capture phase
});

// Remove listener
button.removeEventListener('click', handler);

document.addEventListener('click', (event) => {
    event.target;          // Element that triggered the event
    event.currentTarget;   // Element the listener is attached to
    event.type;            // 'click'
    event.timeStamp;       // When it happened
    
    event.preventDefault();  // Stop default behavior (e.g., form submit)
    event.stopPropagation(); // Stop bubbling to parent elements
});

// Example: click a <span> inside a <button> inside a <div>
// div has the listener, span was clicked
div.addEventListener('click', (e) => {
    e.target;        // <span> -- the actual element clicked
    e.currentTarget; // <div> -- where the listener lives
});

// Event propagation phases:
// 1. CAPTURE: window -> document -> html -> body -> div -> button -> span (top-down)
// 2. TARGET: the event reaches the target element (span)
// 3. BUBBLE: span -> button -> div -> body -> html -> document -> window (bottom-up)
// Most events bubble. Some (focus, blur, mouseenter, mouseleave) do NOT bubble.

// stopPropagation vs stopImmediatePropagation:
// stopPropagation: prevents the event from reaching parent elements
// stopImmediatePropagation: prevents OTHER listeners on the SAME element too

// BAD: Listener on each item. If you have 1000 items, that is 1000 listeners.
// Worse: dynamically added items will NOT have the listener.
document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('click', handleClick);
});

// GOOD: Delegate to parent. One listener handles all items, including future ones.
document.querySelector('.list').addEventListener('click', (event) => {
    // event.target is the actual element that was clicked
    if (event.target.matches('.item')) {
        handleClick(event.target);
    }
    // For nested elements (e.g., a <span> inside .item), use closest():
    const item = event.target.closest('.item');
    if (item) handleClick(item);
});

// Mouse
element.addEventListener('click', fn);
element.addEventListener('dblclick', fn);
element.addEventListener('mouseenter', fn);  // No bubble
element.addEventListener('mouseleave', fn);  // No bubble
element.addEventListener('mouseover', fn);   // Bubbles

// Keyboard
document.addEventListener('keydown', (e) => {
    console.log(e.key);     // 'Enter', 'a', 'ArrowUp'
    console.log(e.code);    // 'Enter', 'KeyA', 'ArrowUp'
    console.log(e.ctrlKey); // true if Ctrl held
});

// Form
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(form);
});
input.addEventListener('input', fn);   // Every change
input.addEventListener('change', fn);  // On blur/enter

// Window
window.addEventListener('load', fn);          // All resources loaded
window.addEventListener('DOMContentLoaded', fn); // DOM ready
window.addEventListener('resize', fn);
window.addEventListener('scroll', fn);

// Store -- localStorage only accepts strings, so you must serialize objects
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));

// Retrieve -- always returns a string (or null if key does not exist)
const user = JSON.parse(localStorage.getItem('user'));

// GOTCHA: getItem returns null for missing keys, and JSON.parse(null) returns null
// (it does not throw), so this pattern is safe.

// Remove a single key
localStorage.removeItem('user');

// Clear ALL localStorage for this origin (use with caution!)
localStorage.clear();

// Session storage -- same API, but cleared when the tab closes
sessionStorage.setItem('temp', 'data');

// Edge case: localStorage is not available in all contexts
// Private/incognito mode in some browsers throws on setItem.
// Service workers and Web Workers have NO access to localStorage.
function safeSetItem(key, value) {
    try {
        localStorage.setItem(key, value);
    } catch (e) {
        // QuotaExceededError (storage full) or SecurityError (private mode)
        console.warn('localStorage unavailable:', e.message);
    }
}

const response = await fetch('/api/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' })
});
const data = await response.json();

navigator.geolocation.getCurrentPosition(
    (position) => {
        console.log(position.coords.latitude);
        console.log(position.coords.longitude);
    },
    (error) => {
        console.error(error.message);
    }
);

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Element is at least 50% visible in the viewport
            entry.target.classList.add('visible');
            observer.unobserve(entry.target); // Stop observing after first trigger
        }
    });
}, {
    threshold: 0.5  // Trigger when 50% of the element is visible
    // Other options: root (scroll container), rootMargin (expand/shrink trigger area)
});

// Observe all elements you want to animate on scroll
document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});

// Copy to clipboard
await navigator.clipboard.writeText('Copied text!');

// Read from clipboard
const text = await navigator.clipboard.readText();

// Add a new entry to the browser history stack (without a page reload).
// The URL in the address bar changes, but no HTTP request is made.
history.pushState({ page: 1 }, 'Title', '/new-url');

// Replace the current entry (useful for redirects where you do not want
// the user to hit "back" and land on the intermediate URL)
history.replaceState({ page: 2 }, 'Title', '/updated-url');

// Listen for back/forward navigation.
// IMPORTANT: pushState/replaceState do NOT trigger popstate.
// Only the browser's back/forward buttons (or history.go()) trigger it.
window.addEventListener('popstate', (event) => {
    console.log(event.state); // { page: 1 } -- the state you passed to pushState
    // Re-render your app to match the new URL here
});

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    
    const formData = new FormData(form);
    
    // Get values
    formData.get('username');
    formData.get('email');
    
    // Convert to object
    const data = Object.fromEntries(formData);
    
    // Send to server
    fetch('/api/submit', {
        method: 'POST',
        body: formData  // Automatically sets Content-Type
    });
});

const input = document.querySelector('input[name="email"]');

// Built-in validation
input.required = true;
input.pattern = '[a-z]+@[a-z]+\\.[a-z]+';

// Check validity
input.checkValidity();      // true/false
input.validity.valid;       // true/false
input.validity.valueMissing; // true if empty but required
input.validity.patternMismatch; // true if doesn't match pattern

// Custom validation
input.setCustomValidity('Please enter a valid email');
input.setCustomValidity(''); // Clear error