Senior Frontend Developer Interview Preparation Guide - Spotify

// create modal and attach handlers
function createModal() {
  const modal = document.createElement('div');
  modal.className = 'modal';
  modal.innerHTML = '<button class="close">Close</button>';
  document.body.appendChild(modal);

  function onResize() {
    // uses modal reference
    modal.style.top = (window.innerHeight - modal.offsetHeight) / 2 + 'px';
  }
  function onClick(e) {
    if (e.target.classList.contains('close')) close();
  }

  window.addEventListener('resize', onResize);
  window.addEventListener('click', onClick);
  onResize();

  function close() {
    window.removeEventListener('resize', onResize);
    window.removeEventListener('click', onClick);
    modal.remove(); // now GC can collect modal and handlers
  }

  return { close };
}

useEffect(() => {
  function onResize() { /* update state/refs */ }
  function onClick(e) { /* ... */ }

  window.addEventListener('resize', onResize);
  window.addEventListener('click', onClick);
  return () => {
    window.removeEventListener('resize', onResize);
    window.removeEventListener('click', onClick);
  };
}, []); // cleanup runs on unmount

useEffect(() => {
  const unsubscribe = store.subscribe(handle);
  return () => unsubscribe();
}, []);

// Observe #feed for newly added nodes and annotate .article elements
(function () {
  const MAX = 50;
  let counter = 0;

  const feed = document.getElementById('feed');
  if (!feed) {
    console.error("MutationObserver: container with id 'feed' not found");
    return;
  }

  // Helper: annotate an element if not already annotated
  function annotate(el) {
    try {
      if (!el || !el.classList || !el.classList.contains('article')) return;
      if (!el.hasAttribute('role')) el.setAttribute('role', 'article');
      if (!el.hasAttribute('aria-label')) {
        counter += 1;
        el.setAttribute('aria-label', `article-${counter}`);
      }
    } catch (err) {
      console.error('Annotate error', err, el);
    }
  }

  // Process nodes added in a mutation record
  function processAddedNodes(nodes) {
    for (const node of nodes) {
      if (node.nodeType !== Node.ELEMENT_NODE) continue;
      // If the added node itself is an article
      annotate(node);
      // Also find descendant .article elements
      const descendants = node.querySelectorAll?.('.article') || [];
      for (const d of descendants) {
        annotate(d);
        if (counter >= MAX) break;
      }
      if (counter >= MAX) break;
    }
  }

  const observer = new MutationObserver((mutations) => {
    try {
      for (const m of mutations) {
        if (m.type === 'childList' && m.addedNodes.length) {
          processAddedNodes(m.addedNodes);
          if (counter >= MAX) {
            observer.disconnect();
            console.info('MutationObserver: reached max articles, disconnected.');
            break;
          }
        }
      }
    } catch (err) {
      console.error('Observer callback error', err);
    }
  });

  observer.observe(feed, { childList: true, subtree: true });

  // Optional: safety timeout to disconnect after long time to avoid leaks
  const SAFETY_TIMEOUT_MS = 60_000 * 5; // 5 minutes
  setTimeout(() => {
    if (observer) {
      observer.disconnect();
      console.info('MutationObserver: disconnected by safety timeout.');
    }
  }, SAFETY_TIMEOUT_MS);
})();

/* Base: mobile — single column */
.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  padding: 16px;
}

/* Tablet: two columns (min-width: 768px) */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
  }
}

/* Desktop: four columns (min-width: 1200px) */
@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 24px;
  }
}

/* Simple card styling */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  padding: 16px;
}