Code Snippets|WEB DEVELOPMENT

375px  (374.98px max) - Very small phones (iPhone SE, 12 mini)
480px  (479.98px max) - Small phones
640px  (639.98px max) - Large phones (landscape)
768px  (767.98px max) - Tablets
1024px (1023.98px max) - Laptops
1280px (1279.98px max) - Desktops

function extractStyledElement(selector) {
  const element = document.querySelector(selector);
  if (!element) {
    console.error('Element not found:', selector);
    console.log('Tip: Use "#id" for IDs or ".class" for classes');
    return;
  }
  console.log('Found element:', selector);

  // Comprehensive property list
  const properties = [
    // Layout
    'display', 'position', 'top', 'right', 'bottom', 'left', 'z-index',
    'float', 'clear', 'overflow', 'overflow-x', 'overflow-y',
    'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height',
    // Flexbox
    'flex', 'flex-direction', 'flex-wrap', 'flex-basis', 'flex-grow', 'flex-shrink',
    'justify-content', 'align-items', 'align-content', 'align-self', 'gap', 'row-gap', 'column-gap',
    // Grid
    'grid', 'grid-template-columns', 'grid-template-rows', 'grid-template-areas',
    'grid-column', 'grid-row', 'grid-auto-flow', 'grid-auto-columns', 'grid-auto-rows',
    // Box Model
    'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
    'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
    'border', 'border-width', 'border-style', 'border-color',
    'border-top', 'border-right', 'border-bottom', 'border-left',
    'border-radius', 'box-sizing',
    // Typography
    'font-family', 'font-size', 'font-weight', 'font-style', 'line-height',
    'letter-spacing', 'text-align', 'text-decoration', 'text-transform',
    'white-space', 'word-break', 'word-wrap', 'color',
    // Lists
    'list-style', 'list-style-type', 'list-style-position', 'list-style-image',
    // Background
    'background', 'background-color', 'background-image', 'background-size',
    'background-position', 'background-repeat', 'background-attachment',
    // Visual Effects
    'opacity', 'visibility', 'box-shadow', 'text-shadow', 'filter',
    'transform', 'transition', 'cursor',
    // Table
    'border-collapse', 'border-spacing', 'vertical-align'
  ];

  function getStylesForElement(el) {
    const computed = window.getComputedStyle(el);
    const styles = {};
    properties.forEach(prop => {
      const value = computed.getPropertyValue(prop);
      if (value &&
        value !== 'none' &&
        value !== 'auto' &&
        value !== 'normal' &&
        value !== '0px' &&
        value !== 'rgba(0, 0, 0, 0)' &&
        value !== 'rgb(0, 0, 0)' &&
        !value.startsWith('var(')) {
        styles[prop] = value;
      }
    });

    if (el.tagName === 'UL' || el.tagName === 'OL') {
      if (!styles['list-style-type']) {
        styles['list-style-type'] = computed.getPropertyValue('list-style-type') || 'none';
      }
    }
    return styles;
  }

  function buildStyledHTML(el) {
    // --- FEATURE 1: Handle Canvas (Convert dynamic drawings to static images) ---
    if (el.tagName === 'CANVAS') {
      const img = document.createElement('img');
      try {
        img.src = el.toDataURL(); // Bake the drawing into an image source
        // Copy layout styles from canvas to the new image so it fits correctly
        const styles = getStylesForElement(el);
        const styleString = Object.entries(styles)
          .map(([prop, val]) => `${prop}: ${val};`)
          .join(' ');
        img.setAttribute('style', styleString);
        return img;
      } catch (e) {
        console.warn('Could not export canvas data (likely security/CORS restricted)');
      }
    }

    const clone = el.cloneNode(false);

    // --- FEATURE 2: Handle Form Values (Freeze what the user typed) ---
    if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT') {
      if (el.type === 'checkbox' || el.type === 'radio') {
        if (el.checked) clone.setAttribute('checked', 'checked');
      } else {
        // This captures the text currently inside the box
        clone.setAttribute('value', el.value);
        if (el.tagName === 'TEXTAREA') clone.textContent = el.value;
      }
    }

    // --- STANDARD: Apply Computed Styles ---
    const styles = getStylesForElement(el);
    const styleString = Object.entries(styles)
      .map(([prop, val]) => `${prop}: ${val};`)
      .join(' ');

    if (styleString) {
      clone.setAttribute('style', styleString);
    }

    // --- RECURSION: Handle Children ---
    Array.from(el.children).forEach(child => {
      clone.appendChild(buildStyledHTML(child));
    });

    Array.from(el.childNodes).forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        clone.appendChild(node.cloneNode(true));
      }
    });

    return clone;
  }

  console.log('Extracting styles and flattening state...');
  const styledElement = buildStyledHTML(element);

  const html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extracted Element - ${selector}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; margin: 0; }
    ul, ol { list-style: none; margin: 0; padding: 0; }
    a { text-decoration: none; color: inherit; }
  </style>
</head>
<body>
${styledElement.outerHTML}
</body>
</html>`;

  console.log('%cExtraction complete!', 'color: green; font-weight: bold; font-size: 14px;');
  console.log('%cFile will download automatically...', 'color: blue; font-size: 12px;');

  const filename = selector.replace(/[^a-z0-9]/gi, '-') + '-extracted.html';
  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);

  console.log(`%cDownloaded as: ${filename}`, 'color: green; font-size: 12px;');
  return html;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Alejandra Bici "” Chicago Suburbs Real Estate</title>
  <!-- Fonts (headlines: Inter; body: Manrope) -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>