DOM DOM Manipulation: Creating Dynamic Web Pages

// Add item to cart
function addToCart(product) {
  const cartItems = document.getElementById('cart-items');
  const cartItem = document.createElement('div');
  cartItem.className = 'cart-item';
  cartItem.innerHTML = `
    <img src="${product.image}" alt="${product.name}" />
    <div class="item-details">
      <h4>${product.name}</h4>
      <p>$${product.price.toFixed(2)}</p>
      <button class="remove-item" data-id="${product.id}">Remove</button>
    </div>
  `;
  cartItems.appendChild(cartItem);
  
  // Update cart count
  const cartCount = document.querySelector('.cart-count');
  cartCount.textContent = cartItems.children.length;
}

// Validate email field
function validateEmail() {
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById('email-error');
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if (!emailRegex.test(emailInput.value)) {
    emailInput.classList.add('is-invalid');
    emailError.textContent = 'Please enter a valid email address';
    emailError.style.display = 'block';
    return false;
  } else {
    emailInput.classList.remove('is-invalid');
    emailInput.classList.add('is-valid');
    emailError.style.display = 'none';
    return true;
  }
}

// Create lightbox for gallery images
function openLightbox(imageSrc, caption) {
  // Create lightbox container if it doesn't exist
  let lightbox = document.getElementById('lightbox');
  
  if (!lightbox) {
    lightbox = document.createElement('div');
    lightbox.id = 'lightbox';
    lightbox.className = 'lightbox';
    document.body.appendChild(lightbox);
    
    // Create close button
    const closeBtn = document.createElement('button');
    closeBtn.className = 'close-btn';
    closeBtn.innerHTML = '×';
    closeBtn.addEventListener('click', () => {
      lightbox.style.display = 'none';
    });
    lightbox.appendChild(closeBtn);
  }
  
  // Update lightbox content
  lightbox.innerHTML = `
    <button class="close-btn">×</button>
    <img src="${imageSrc}" alt="${caption}" />
    <p class="caption">${caption}</p>
  `;
  lightbox.style.display = 'flex';
}

// Add infinite scroll functionality
function setupInfiniteScroll() {
  let page = 1;
  let loading = false;
  const contentContainer = document.getElementById('content');
  const loadingIndicator = document.createElement('div');
  loadingIndicator.className = 'loading';
  loadingIndicator.innerHTML = 'Loading more items...';
  
  window.addEventListener('scroll', () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = window.scrollY;
    const clientHeight = window.innerHeight;
    
    if (scrollTop + clientHeight >= scrollHeight - 200 && !loading) {
      loading = true;
      page++;
      
      document.body.appendChild(loadingIndicator);
      
      // Fetch and add new content
      fetchMoreContent(page).then(newItems => {
        newItems.forEach(item => {
          const itemElement = document.createElement('div');
          itemElement.className = 'content-item';
          itemElement.innerHTML = `
            <h3>${item.title}</h3>
            <p>${item.description}</p>
          `;
          contentContainer.appendChild(itemElement);
        });
        
        loading = false;
        loadingIndicator.remove();
      });
    }
  });
}

// Cross-browser event listener
function addEvent(element, event, handler) {
  if (element.addEventListener) {
    element.addEventListener(event, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, handler);
  } else {
    element['on' + event] = handler;
  }
}

// Cross-browser class toggling
function toggleClass(element, className) {
  if (element.classList) {
    element.classList.toggle(className);
  } else {
    var classes = element.className.split(' ');
    var existingIndex = classes.indexOf(className);

    if (existingIndex >= 0)
      classes.splice(existingIndex, 1);
    else
      classes.push(className);

    element.className = classes.join(' ');
  }
}

// Cross-browser element removal
function removeElement(element) {
  if (element.remove) {
    element.remove();
  } else if (element.parentNode) {
    element.parentNode.removeChild(element);
  }
}

// Safer way to add text content
function setTextContent(element, text) {
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
  var textNode = document.createTextNode(text);
  element.appendChild(textNode);
}

// Accessible modal implementation
function createAccessibleModal(title, content) {
  const modal = document.createElement('div');
  modal.className = 'modal';
  modal.setAttribute('role', 'dialog');
  modal.setAttribute('aria-modal', 'true');
  modal.setAttribute('aria-labelledby', 'modal-title');
  
  modal.innerHTML = `
    <div class="modal-content">
      <h2 id="modal-title">${title}</h2>
      <div class="modal-body">${content}</div>
      <button class="close-button" aria-label="Close modal">Close</button>
    </div>
  `;
  
  // Add close functionality
  const closeButton = modal.querySelector('.close-button');
  closeButton.addEventListener('click', () => {
    modal.remove();
  });
  
  // Trap focus within modal
  trapFocus(modal);
  
  document.body.appendChild(modal);
  closeButton.focus();
}

// Defensive DOM manipulation with error handling
function safelyManipulateDOM(selector, manipulation) {
  try {
    const element = document.querySelector(selector);
    
    if (!element) {
      console.warn(`Element not found: ${selector}`);
      return false;
    }
    
    // Perform the manipulation function safely
    return manipulation(element);
  } catch (error) {
    console.error(`DOM manipulation error for ${selector}:`, error);
    return false;
  }
}

// Usage example
safelyManipulateDOM('#user-profile', (element) => {
  element.innerHTML = '<h2>User Profile</h2>';
  return true;
});

// Debug method to visualize DOM structure
function debugDOMStructure(element, depth = 0) {
  if (!element) return;
  
  const indent = ' '.repeat(depth * 2);
  const id = element.id ? `#${element.id}` : '';
  const classes = element.className ? `.${element.className.replace(/ /g, '.')}` : '';
  
  console.log(`${indent}${element.tagName.toLowerCase()}${id}${classes}`);
  
  // Recursively debug child elements
  for (const child of element.children) {
    debugDOMStructure(child, depth + 1);
  }
}

// Usage: debugDOMStructure(document.body);