Masterclass Deck — AI-Assisted JavaScript Development

Goal: Create a JavaScript function that fetches users and displays them in a table with pagination.
Constraints: ES6+, Fetch API, no external libraries, modern browsers.
Expected: loading state, error state, stable pagination, id/name/email columns.

async function getProducts({ q = '', sort = 'price', page = 1, limit = 10 } = {}) {
  const params = new URLSearchParams({ q, sort, page, limit });
  const res = await fetch(`/api/products?${params}`);
  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
  return res.json();
}

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 8000);
try {
  const res = await fetch('/api/orders', { signal: controller.signal });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return await res.json();
} finally { clearTimeout(timeout); }

function calculateTotal(items, discount = 0) {
  return items
    .filter(item => item.active)
    .map(item => ({ ...item, price: item.price * (1 - discount / 100) }))
    .reduce((sum, item) => sum + item.price, 0);
}

const applyDiscount = (price, discount = 0) => price - price * discount / 100;
const toResultItem = item => ({ id: item.id, total: item.price });
const process = data => data
  .filter(item => item.active)
  .map(item => toResultItem({ ...item, price: applyDiscount(item.price, item.discount) }));

Normal: add(2, 3) => 5
Edge: add(0, 0) => 0
Failure: add(null, 3) => throws or handles safely

// Avoid
element.innerHTML = userInput;

// Prefer for plain text
element.textContent = userInput;