Работа с реальным API

<ul id="list"></ul>

const list = document.querySelector("#list");

async function loadProducts() {
  const response = await fetch("https://dummyjson.com/products?limit=5&select=title,price");
  const data = await response.json();
  // для каждого товара: создать li, записать текст, добавить в list
}

// --- проверка, не меняйте ---
loadProducts().then(() => {
  console.log(list.children.length);
  console.log(list.firstElementChild.textContent.includes(" — "));
});

<div id="grid" class="grid"></div>

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.card { border: 1px solid #ccc; border-radius: 10px; padding: 8px; text-align: center; font: 13px system-ui; }
.card img { width: 100%; height: 70px; object-fit: contain; }
.card h3 { font-size: 13px; margin: 4px 0 2px; }
.card p { margin: 0; font-weight: 700; }

const grid = document.querySelector("#grid");

async function loadCards() {
  const response = await fetch("https://dummyjson.com/products?limit=6&select=title,price,thumbnail");
  const data = await response.json();
  // ваш код: карточка = article.card + img + h3 + p
}

// --- проверка, не меняйте ---
loadCards().then(() => {
  console.log(grid.querySelectorAll(".card").length);
  console.log([...grid.querySelectorAll("img")].filter((img) => img.alt !== "").length);
});

<ul id="list"></ul>

const list = document.querySelector("#list");

async function loadProducts() {
  const response = await fetch("https://dummyjson.com/products?limit=3&select=title");
  const data = await response.json();
  data.products.forEach((product) => {
    const li = document.createElement("li");
    li.textContent = product.title;
    list.append(li);
  });
}

// --- проверка, не меняйте ---
loadProducts()
  .then(() => loadProducts())
  .then(() => console.log(list.children.length));

<ul id="list"></ul>

const list = document.querySelector("#list");

function renderList(items) {
  // ваш код
}

// --- проверка, не меняйте ---
renderList(["Самбуса", "Курутоб"]);
console.log(list.children.length);
renderList([]);
console.log(`${list.children.length} ${list.textContent}`);
renderList(["Чой"]);
console.log(list.textContent);

<input id="q" type="search" placeholder="Поиск">
<ul id="list"></ul>

const input = document.querySelector("#q");
let requests = 0;

function fakeSearch(text) {
  requests++;
  console.log(`запрос: ${text}`);
}

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

// ваш код: подписка на input через debounce


// --- имитация набора, не меняйте ---
[..."phone"].forEach((char, i) => {
  setTimeout(() => {
    input.value += char;
    input.dispatchEvent(new Event("input"));
  }, i * 50);
});
setTimeout(() => console.log(`всего запросов: ${requests}`), 1000);

<select id="category"></select>
<ul id="list"></ul>

const menu = [
  { title: "Самбуса с мясом", category: "выпечка" },
  { title: "Самбуса с тыквой", category: "выпечка" },
  { title: "Курутоб", category: "горячее" },
  { title: "Оши палав", category: "горячее" },
  { title: "Манту", category: "горячее" },
  { title: "Шакароб", category: "салаты" },
];
const select = document.querySelector("#category");
const list = document.querySelector("#list");

function addOption(value, text) {
  const option = document.createElement("option");
  option.value = value;
  option.textContent = text;
  select.append(option);
}

function renderList(items) {
  list.replaceChildren();
  for (const item of items) {
    const li = document.createElement("li");
    li.textContent = item.title;
    list.append(li);
  }
}

// 1) заполните select: «Все» + уникальные категории
// 2) покажите всё меню, затем подпишитесь на change


// --- проверка, не меняйте ---
console.log(`опций: ${select.options.length}`);
select.value = "горячее";
select.dispatchEvent(new Event("change"));
console.log(`горячее: ${list.children.length}`);
select.value = "";
select.dispatchEvent(new Event("change"));
console.log(`все: ${list.children.length}`);

<button id="prev">← Назад</button>
<span id="label"></span>
<button id="next">Вперёд →</button>

const total = 47;
const limit = 10;
const pages = Math.ceil(total / limit);
let page = 1;

const prev = document.querySelector("#prev");
const next = document.querySelector("#next");
const label = document.querySelector("#label");

function render() {
  // подпись и disabled для обеих кнопок
}

// подписки на click и первый вызов render()


// --- имитация кликов, не меняйте ---
const state = (b) => (b.disabled ? "выкл" : "вкл");
const report = () => console.log(`${label.textContent} | назад: ${state(prev)} | вперёд: ${state(next)}`);
report();
next.click(); next.click();
report();
next.click(); next.click(); next.click();
report();
prev.click();
report();

<div class="app">
  <div class="bar">
    <input id="q" type="search" placeholder="Поиск товара…">
    <select id="category"><option value="">Все категории</option></select>
  </div>
  <p id="status" class="status"></p>
  <ul id="list" class="grid"></ul>
  <div class="pager">
    <button id="prev">← Назад</button>
    <span id="info"></span>
    <button id="next">Вперёд →</button>
  </div>
</div>

body { font: 14px system-ui; margin: 8px; }
.bar { display: flex; gap: 8px; margin-bottom: 8px; }
.bar input { flex: 1; padding: 6px 8px; }
.status { color: #666; min-height: 1.2em; margin: 4px 0; }
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.card { border: 1px solid #ccc; border-radius: 8px; padding: 6px; text-align: center; }
.card img { width: 100%; height: 60px; object-fit: contain; }
.card h3 { font-size: 12px; margin: 4px 0 0; }
.card p { margin: 2px 0 0; font-weight: 700; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 10px; }

const API = "https://dummyjson.com/products";
const LIMIT = 6;
const state = { q: "", category: "", page: 1, pages: 1 };

const list = document.querySelector("#list");
const statusEl = document.querySelector("#status");
const info = document.querySelector("#info");
const prev = document.querySelector("#prev");
const next = document.querySelector("#next");
const qInput = document.querySelector("#q");
const catSelect = document.querySelector("#category");

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

function buildUrl() {
  const params = new URLSearchParams({
    limit: LIMIT,
    skip: (state.page - 1) * LIMIT,
    select: "title,price,thumbnail",
  });
  if (state.q) {
    params.set("q", state.q);
    return `${API}/search?${params}`;
  }
  if (state.category) return `${API}/category/${state.category}?${params}`;
  return `${API}?${params}`;
}

function render(products) {
  list.replaceChildren();
  if (products.length === 0) {
    statusEl.textContent = "Ничего не найдено";
    return;
  }
  statusEl.textContent = "";
  for (const product of products) {
    const li = document.createElement("li");
    li.className = "card";
    const img = document.createElement("img");
    img.src = product.thumbnail;
    img.alt = product.title;
    const name = document.createElement("h3");
    name.textContent = product.title;
    const price = document.createElement("p");
    price.textContent = `${product.price} $`;
    li.append(img, name, price);
    list.append(li);
  }
}

function updatePager() {
  // TODO: подпись «Страница N из M» и disabled для prev / next
}

let lastRequest = 0;
async function load() {
  const id = ++lastRequest;
  statusEl.textContent = "Загрузка…";
  try {
    const response = await fetch(buildUrl());
    if (!response.ok) throw new Error("HTTP " + response.status);
    const data = await response.json();
    if (id !== lastRequest) return;
    state.pages = Math.max(1, Math.ceil(data.total / LIMIT));
    render(data.products);
    updatePager();
  } catch (error) {
    if (id !== lastRequest) return;
    list.replaceChildren();
    statusEl.textContent = "Не удалось загрузить: " + error.message;
  }
}

async function go(page) {
  // TODO: проверить границы, сменить страницу, загрузить
}

async function search(text) {
  state.q = text.trim();
  state.category = "";
  catSelect.value = "";
  state.page = 1;
  await load();
}

async function pickCategory(value) {
  state.category = value;
  state.q = "";
  qInput.value = "";
  state.page = 1;
  await load();
}

async function loadCategories() {
  const response = await fetch(`${API}/category-list`);
  const names = await response.json();
  for (const name of names) {
    const option = document.createElement("option");
    option.value = name;
    option.textContent = name;
    catSelect.append(option);
  }
}

prev.addEventListener("click", () => go(state.page - 1));
next.addEventListener("click", () => go(state.page + 1));
catSelect.addEventListener("change", () => pickCategory(catSelect.value));
qInput.addEventListener("input", debounce(() => search(qInput.value), 400));

// --- проверка, не меняйте ---
async function check() {
  await loadCategories();
  await load();
  console.log(`карточек: ${list.children.length}`);
  console.log(`страниц больше одной: ${state.pages > 1}`);
  console.log(`на первой странице «Назад» ${prev.disabled ? "выкл" : "вкл"}`);
  await go(2);
  console.log(`страница ${state.page}, карточек: ${list.children.length}`);
  await go(0);
  console.log(`go(0) оставила страницу ${state.page}`);
  console.log(`назад ${prev.disabled ? "выкл" : "вкл"}, вперёд ${next.disabled ? "выкл" : "вкл"}`);
}
check();

<div class="app">
  <div class="bar">
    <input id="q" type="search" placeholder="Поиск товара…">
    <select id="category"><option value="">Все категории</option></select>
  </div>
  <p id="status" class="status"></p>
  <ul id="list" class="grid"></ul>
  <div class="pager">
    <button id="prev">← Назад</button>
    <span id="info"></span>
    <button id="next">Вперёд →</button>
  </div>
</div>

body { font: 14px system-ui; margin: 8px; }
.bar { display: flex; gap: 8px; margin-bottom: 8px; }
.bar input { flex: 1; padding: 6px 8px; }
.status { color: #666; min-height: 1.2em; margin: 4px 0; }
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.card { border: 1px solid #ccc; border-radius: 8px; padding: 6px; text-align: center; }
.card img { width: 100%; height: 60px; object-fit: contain; }
.card h3 { font-size: 12px; margin: 4px 0 0; }
.card p { margin: 2px 0 0; font-weight: 700; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 10px; }

const API = "https://dummyjson.com/products";
const LIMIT = 6;
const state = { q: "", category: "", page: 1, pages: 1 };

const list = document.querySelector("#list");
const statusEl = document.querySelector("#status");
const info = document.querySelector("#info");
const prev = document.querySelector("#prev");
const next = document.querySelector("#next");
const qInput = document.querySelector("#q");
const catSelect = document.querySelector("#category");

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

function buildUrl() {
  const params = new URLSearchParams({
    limit: LIMIT,
    skip: (state.page - 1) * LIMIT,
    select: "title,price,thumbnail",
  });
  if (state.q) {
    params.set("q", state.q);
    return `${API}/search?${params}`;
  }
  if (state.category) return `${API}/category/${state.category}?${params}`;
  return `${API}?${params}`;
}

function render(products) {
  list.replaceChildren();
  if (products.length === 0) {
    statusEl.textContent = "Ничего не найдено";
    return;
  }
  statusEl.textContent = "";
  for (const product of products) {
    const li = document.createElement("li");
    li.className = "card";
    const img = document.createElement("img");
    img.src = product.thumbnail;
    img.alt = product.title;
    const name = document.createElement("h3");
    name.textContent = product.title;
    const price = document.createElement("p");
    price.textContent = `${product.price} $`;
    li.append(img, name, price);
    list.append(li);
  }
}

function updatePager() {
  info.textContent = `Страница ${state.page} из ${state.pages}`;
  prev.disabled = state.page <= 1;
  next.disabled = state.page >= state.pages;
}

let lastRequest = 0;
async function load() {
  const id = ++lastRequest;
  statusEl.textContent = "Загрузка…";
  try {
    const response = await fetch(buildUrl());
    if (!response.ok) throw new Error("HTTP " + response.status);
    const data = await response.json();
    if (id !== lastRequest) return;
    state.pages = Math.max(1, Math.ceil(data.total / LIMIT));
    render(data.products);
    updatePager();
  } catch (error) {
    if (id !== lastRequest) return;
    list.replaceChildren();
    statusEl.textContent = "Не удалось загрузить: " + error.message;
  }
}

async function go(page) {
  if (page < 1 || page > state.pages) return;
  state.page = page;
  await load();
}

async function search(text) {
  // TODO: записать текст, сбросить категорию и страницу, загрузить
}

async function pickCategory(value) {
  state.category = value;
  state.q = "";
  qInput.value = "";
  state.page = 1;
  await load();
}

async function loadCategories() {
  const response = await fetch(`${API}/category-list`);
  const names = await response.json();
  for (const name of names) {
    const option = document.createElement("option");
    option.value = name;
    option.textContent = name;
    catSelect.append(option);
  }
}

prev.addEventListener("click", () => go(state.page - 1));
next.addEventListener("click", () => go(state.page + 1));
catSelect.addEventListener("change", () => pickCategory(catSelect.value));
qInput.addEventListener("input", debounce(() => search(qInput.value), 400));

// --- проверка, не меняйте ---
async function check() {
  await load();
  await go(3);
  console.log(`страница: ${state.page}`);
  await search("phone");
  console.log(`поиск: карточек больше нуля: ${list.children.length > 0}`);
  console.log(`страница после поиска: ${state.page}`);
  await search("zzzzqq");
  console.log(`пусто: ${list.children.length === 0}, сообщение: ${statusEl.textContent}`);
  await search("");
  console.log(`сброс поиска, карточек: ${list.children.length}`);
}
check();