Props, списки и keys, useState

// Карточка блюда. Сейчас она всегда показывает одно и то же.
function DishCard() {
  return <div className="card">Самбуса — 5 сомони</div>;
}

export default function App() {
  return (
    <div>
      <DishCard name="Самбуса" price={5} />
      <DishCard name="Курутоб" price={35} />
      <DishCard name="Шакароб" price={15} />
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  document.querySelectorAll(".card").forEach((card) => console.log(card.textContent));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Панель-рамка: должна показывать заголовок И всё, что положили внутрь тегов
function Panel({ title }) {
  return (
    <section className="card">
      <h3>{title}</h3>
    </section>
  );
}

export default function App() {
  return (
    <Panel title="Сегодня в MakeFirstStep">
      <p>JavaScript, 18:00</p>
      <p>Практика с ИИ, 19:30</p>
    </Panel>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  const panel = document.querySelector(".card");
  console.log(panel.querySelector("h3").textContent);
  console.log(panel.querySelectorAll("p").length);
  console.log(panel.lastElementChild.textContent);
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Цена не показывается. Найдите и исправьте ОДНУ ошибку.
function Price({ value, currency }) {
  return <b>{value} {currency}</b>;
}

export default function App() {
  return (
    <p>
      Плов: <Price amount={45} currency="сомони" />
    </p>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  console.log(document.querySelector("b").textContent);
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Задайте значения по умолчанию: label = "Нажми", color = "gray"
function Button({ label, color }) {
  return <button style={{ background: color }}>{label}</button>;
}

export default function App() {
  return (
    <div>
      <Button label="Купить" color="green" />
      <Button />
      <Button label="Отмена" />
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  document.querySelectorAll("button").forEach((b) => console.log(b.textContent, b.style.background));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Field должен передавать «лишние» props на <input>. Сейчас placeholder, type и maxLength теряются.
function Field({ label }) {
  return (
    <label>
      {label}: <input />
    </label>
  );
}

export default function App() {
  return (
    <div>
      <Field label="Имя" placeholder="Мадина" maxLength={10} />
      <br />
      <Field label="Пароль" type="password" placeholder="••••" />
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  document.querySelectorAll("input").forEach((i) => console.log(i.type, i.placeholder, i.maxLength));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// 1) Предскажите, что покажет каждая из шести меток. 2) Запустите и сверьтесь.
// 3) Исправьте Label так, чтобы и для null показывалось «—».
function Label({ text = "—" }) {
  return <span>[{text}]</span>;
}

export default function App() {
  return (
    <div>
      <Label />
      <Label text="Плов" />
      <Label text={undefined} />
      <Label text={null} />
      <Label text={0} />
      <Label text="" />
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  document.querySelectorAll("span").forEach((s) => console.log(s.textContent));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

const lessons = ["HTML и CSS", "JavaScript", "React Lite"];

export default function App() {
  return (
    <ul>
      {/* выведите по одному <li> на каждый урок из массива lessons */}
    </ul>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  const items = document.querySelectorAll("li");
  console.log(items.length);
  items.forEach((li) => console.log(li.textContent));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

const menu = [
  { id: 1, name: "Самбуса", price: 5 },
  { id: 2, name: "Курутоб", price: 35 },
  { id: 3, name: "Шакароб", price: 15 },
  { id: 4, name: "Чой", price: 3 },
];

function MenuItem({ name, price }) {
  return <div className="card">{name} · {price} сомони</div>;
}

export default function App() {
  return (
    <div>
      {/* выведите все блюда из menu через MenuItem, не забыв про key */}
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  document.querySelectorAll(".card").forEach((c) => console.log(c.textContent));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

const orders = [
  { id: 1, client: "Рустам", total: 120, paid: true },
  { id: 2, client: "Зарина", total: 80, paid: false },
  { id: 3, client: "Далер", total: 45, paid: false },
  { id: 4, client: "Нилуфар", total: 200, paid: true },
];

export default function App() {
  // покажите только неоплаченные заказы и их количество
  return (
    <div>
      <p>Ждут оплаты: ?</p>
      <ul></ul>
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  console.log(document.querySelector("p").textContent);
  document.querySelectorAll("li").forEach((li) => console.log(li.textContent));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Теги не появляются на странице. Найдите причину.
const tags = ["react", "props", "state"];

export default function App() {
  return (
    <div>
      {tags.map((tag) => {
        <span key={tag} className="card">#{tag}</span>;
      })}
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  const cards = document.querySelectorAll(".card");
  console.log(cards.length);
  cards.forEach((c) => console.log(c.textContent));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Оживите счётчик: добавьте useState и обработчики для трёх кнопок.
// Не забудьте строку импорта в самом верху: import { useState } from "react";
export default function App() {
  return (
    <div>
      <p>Счёт: 0</p>
      <button>−</button> <button>+</button> <button>Сброс</button>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
const $ = (s) => document.querySelector(s);
const $$ = (s) => [...document.querySelectorAll(s)];
const btn = (t) => $$("button").find((b) => b.textContent.trim() === t);
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  await wait();
  console.log($("p").textContent);
  await click(btn("+"));
  await click(btn("+"));
  await click(btn("+"));
  await click(btn("−"));
  console.log($("p").textContent);
  await click(btn("Сброс"));
  console.log($("p").textContent);
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Кнопка «лайк»: по клику сердечко закрашивается и счётчик растёт на 1, по второму клику — всё возвращается.
// Подсказка по дизайну: хранить в состоянии нужно только liked, а число лайков можно вычислить.
export default function App() {
  const likes = 12;
  return <button>♡ {likes}</button>;
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const b = document.querySelector.bind(document);
  await wait();
  console.log(b("button").textContent);
  await click(b("button"));
  console.log(b("button").textContent);
  await click(b("button"));
  console.log(b("button").textContent);
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Кнопка «+3» прибавляет только 1. Почему? Исправьте, не меняя число вызовов setCount.
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  function addThree() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Счёт: {count}</p>
      <button onClick={addThree}>+3</button>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const p = () => document.querySelector("p").textContent;
  await wait();
  console.log(p());
  await click(document.querySelector("button"));
  console.log(p());
  await click(document.querySelector("button"));
  console.log(p());
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// 1) Предскажите: что покажут три счётчика, если нажать «+» два раза на первом и один раз на третьем?
// 2) Добавьте Counter prop step (по умолчанию 1): кнопка прибавляет step.
// 3) Третьему счётчику задайте step={10}.
import { useState } from "react";

function Counter({ step = 1 }) {
  const [n, setN] = useState(0);
  return (
    <div className="card">
      <span>Счёт: {n}</span> <button onClick={() => setN(n + 1)}>+</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
      <Counter />
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const buttons = () => [...document.querySelectorAll("button")];
  await wait();
  await click(buttons()[0]);
  await click(buttons()[0]);
  await click(buttons()[2]);
  document.querySelectorAll("span").forEach((s) => console.log(s.textContent));
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Кнопка «Добавить» ничего не делает. Исправьте обработчик addItem.
import { useState } from "react";

export default function App() {
  const [items, setItems] = useState(["Хлеб", "Молоко"]);

  function addItem() {
    items.push("Лук");
    setItems(items);
  }

  return (
    <div>
      <ul>
        {items.map((item) => <li key={item}>{item}</li>)}
      </ul>
      <button onClick={addItem}>Добавить</button>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
(async () => {
  await wait();
  console.log(document.querySelectorAll("li").length);
  document.querySelector("button").click();
  await wait();
  console.log(document.querySelectorAll("li").length);
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// 1) «С днём рождения» не меняет возраст на экране — исправьте.
// 2) Допишите rename: имя становится «Зарина», возраст остаётся прежним.
import { useState } from "react";

export default function App() {
  const [user, setUser] = useState({ name: "Мадина", age: 19 });

  function birthday() {
    user.age = user.age + 1;
    setUser(user);
  }

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

  return (
    <div>
      <p>{user.name}, {user.age}</p>
      <button onClick={birthday}>С днём рождения</button> <button onClick={rename}>Сменить имя</button>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const p = () => document.querySelector("p").textContent;
  const b = () => document.querySelectorAll("button");
  await wait();
  console.log(p());
  await click(b()[0]);
  console.log(p());
  await click(b()[1]);
  console.log(p());
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Допишите removeTask и toggleTask. Массив tasks менять «на месте» нельзя.
import { useState } from "react";

const start = [
  { id: 1, title: "Сделать зарядку", done: false },
  { id: 2, title: "Купить лепёшки", done: false },
  { id: 3, title: "Позвонить маме", done: false },
];

export default function App() {
  const [tasks, setTasks] = useState(start);

  function removeTask(id) {
    // уберите задачу с этим id
  }

  function toggleTask(id) {
    // переверните done у задачи с этим id, остальные не трогайте
  }

  return (
    <ul>
      {tasks.map((t) => (
        <li key={t.id}>
          <button className="toggle" onClick={() => toggleTask(t.id)}>{t.done ? "✓" : "○"}</button>{" "}
          <span>{t.title}</span>{" "}
          <button className="del" onClick={() => removeTask(t.id)}>✕</button>
        </li>
      ))}
    </ul>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const $$ = (s) => [...document.querySelectorAll(s)];
  const show = () =>
    console.log($$("li").map((li) => li.querySelector(".toggle").textContent + " " + li.querySelector("span").textContent).join(" | "));
  await wait();
  show();
  await click($$(".del")[1]);
  await click($$(".toggle")[0]);
  show();
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Заметки «переезжают» к другому человеку после удаления. Исправьте одну строку.
import { useState } from "react";

export default function App() {
  const [people, setPeople] = useState([
    { id: 1, name: "Мадина" },
    { id: 2, name: "Фарход" },
    { id: 3, name: "Зарина" },
  ]);

  return (
    <ul>
      {people.map((p, index) => (
        <li key={index}>
          <b>{p.name}</b> <input placeholder="заметка" />{" "}
          <button onClick={() => setPeople(people.filter((x) => x.id !== p.id))}>Удалить</button>
        </li>
      ))}
    </ul>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
(async () => {
  await wait();
  const notes = ["про Мадину", "про Фарход", "про Зарину"];
  document.querySelectorAll("input").forEach((input, i) => (input.value = notes[i]));
  document.querySelector("button").click(); // удаляем первого — Мадину
  await wait();
  document.querySelectorAll("li").forEach((li) => {
    console.log(li.querySelector("b").textContent + ": " + li.querySelector("input").value);
  });
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Сделайте поле управляемым: приветствие должно меняться по мере ввода имени.
export default function App() {
  const name = "";

  return (
    <div>
      <input placeholder="Ваше имя" />
      <p>Привет, {name || "гость"}!</p>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
function typeInto(el, value) {
  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set.call(el, value);
  el.dispatchEvent(new Event("input", { bubbles: true }));
}
(async () => {
  await wait();
  console.log(document.querySelector("p").textContent);
  typeInto(document.querySelector("input"), "Мадина");
  await wait();
  console.log(document.querySelector("p").textContent);
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Поле для поста с лимитом 20 символов.
// 1) Храните текст в состоянии (управляемое поле).
// 2) В <small> показывайте «длина/20».
// 3) Кнопка «Опубликовать» выключена (disabled), если текст пустой или длиннее 20 символов.
export default function App() {
  return (
    <div>
      <textarea placeholder="Что нового?" />
      <p><small>0/20</small></p>
      <button>Опубликовать</button>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
function typeInto(el, value) {
  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set.call(el, value);
  el.dispatchEvent(new Event("input", { bubbles: true }));
}
const state = () => document.querySelector("small").textContent + " " + document.querySelector("button").disabled;
(async () => {
  await wait();
  console.log(state());
  typeInto(document.querySelector("textarea"), "Салом");
  await wait();
  console.log(state());
  typeInto(document.querySelector("textarea"), "я".repeat(25));
  await wait();
  console.log(state());
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Допишите handleSubmit: отмените перезагрузку, не добавляйте пустые строки (и строки из одних пробелов),
// добавьте {id, text} в список и очистите поле.
import { useState } from "react";

export default function App() {
  const [items, setItems] = useState([]);
  const [text, setText] = useState("");

  function handleSubmit(event) {
    // ваш код
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Что купить?" />{" "}
      <button>Добавить</button>
      <ul>
        {items.map((item) => <li key={item.id}>{item.text}</li>)}
      </ul>
    </form>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
function typeInto(el, value) {
  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set.call(el, value);
  el.dispatchEvent(new Event("input", { bubbles: true }));
}
async function submitWith(value) {
  typeInto(document.querySelector("input"), value);
  await wait();
  document.querySelector("form").requestSubmit();
  await wait();
}
(async () => {
  await wait();
  await submitWith("Лепёшки");
  await submitWith("   ");
  await submitWith("Чой");
  console.log([...document.querySelectorAll("li")].map((li) => li.textContent).join(" | "));
  console.log("поле: [" + document.querySelector("input").value + "]");
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Живой поиск: показывайте только города, в названии которых есть введённый текст (без учёта регистра).
// Если ничего не найдено — выведите <p>Ничего не найдено</p>.
import { useState } from "react";

const cities = ["Душанбе", "Худжанд", "Бохтар", "Куляб", "Истаравшан"];

export default function App() {
  const [query, setQuery] = useState("");

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Поиск города" />
      <ul>
        {cities.map((city) => <li key={city}>{city}</li>)}
      </ul>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
function typeInto(el, value) {
  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), "value").set.call(el, value);
  el.dispatchEvent(new Event("input", { bubbles: true }));
}
(async () => {
  await wait();
  for (const q of ["ду", "УД", "xyz"]) {
    typeInto(document.querySelector("input"), q);
    await wait();
    const names = [...document.querySelectorAll("li")].map((li) => li.textContent).join(", ");
    console.log(q + ": " + (names || document.querySelector("p").textContent));
  }
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Покажите бейдж «Новинка» (<span>) только у блюд с isNew.
function Dish({ name, isNew }) {
  return <div className="card">{name}</div>;
}

export default function App() {
  return (
    <div>
      <Dish name="Манту" isNew />
      <Dish name="Плов" />
      <Dish name="Лагман" isNew={false} />
    </div>
  );
}

// ---- проверка (не менять) ----
setTimeout(() => {
  document.querySelectorAll(".card").forEach((c) => console.log(c.textContent.trim()));
}, 100);

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Пока корзина пуста, на экране появляется странный «0». Нужно:
// пустая корзина -> текст «Корзина пуста»; иначе -> список товаров.
import { useState } from "react";

export default function App() {
  const [cart, setCart] = useState([]);

  function addItem() {
    setCart([...cart, { id: cart.length + 1, title: "Лепёшка" }]);
  }

  return (
    <div>
      <button onClick={addItem}>Добавить лепёшку</button>
      <div id="cart">
        {cart.length && (
          <ul>
            {cart.map((item) => <li key={item.id}>{item.title}</li>)}
          </ul>
        )}
      </div>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
(async () => {
  await wait();
  console.log(document.querySelector("#cart").textContent);
  document.querySelector("button").click();
  await wait();
  console.log(document.querySelector("#cart").textContent);
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Profile падает, пока user === null. Добавьте ранний return:
// если пользователя нет — вернуть <p>Войдите в аккаунт</p>.
import { useState } from "react";

function Profile({ user }) {
  return <p>Привет, {user.name}!</p>;
}

export default function App() {
  const [user, setUser] = useState(null);

  return (
    <div>
      <Profile user={user} />
      <button onClick={() => setUser(user ? null : { name: "Мадина" })}>{user ? "Выйти" : "Войти"}</button>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
(async () => {
  const show = () => console.log(document.querySelector("p").textContent);
  await wait();
  show();
  document.querySelector("button").click();
  await wait();
  show();
  document.querySelector("button").click();
  await wait();
  show();
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// FAQ-аккордеон. Клик по вопросу открывает его ответ и закрывает остальные; повторный клик закрывает.
// Ответ — <p className="answer">. Подумайте: что хранить в состоянии, чтобы был открыт не больше одного?
import { useState } from "react";

const faq = [
  { id: 1, q: "Сколько стоит курс?", a: "Ответ про цену" },
  { id: 2, q: "Нужен ли свой ноутбук?", a: "Ответ про ноутбук" },
  { id: 3, q: "Будет ли сертификат?", a: "Ответ про сертификат" },
];

export default function App() {
  return (
    <div>
      {faq.map((item) => (
        <div key={item.id} className="card">
          <button>{item.q}</button>
          {/* здесь должен быть ответ */}
        </div>
      ))}
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const shown = () => [...document.querySelectorAll(".answer")].map((a) => a.textContent).join(", ") || "закрыто";
  const q = (i) => document.querySelectorAll(".card button")[i];
  await wait();
  console.log(shown());
  await click(q(0));
  console.log(shown());
  await click(q(1));
  console.log(shown());
  await click(q(1));
  console.log(shown());
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Этот список дел «написал ИИ». Он запускается, но работает неправильно. Найдите ВСЕ ошибки и исправьте.
// Признаки: после добавления список не обновляется; после удаления заметки уезжают к соседям;
// после «удалить, потом добавить» удаление сносит сразу две строки.
import { useState } from "react";

export default function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Позвонить маме" },
    { id: 2, text: "Купить лепёшки" },
  ]);

  function addTodo() {
    todos.push({ id: todos.length + 1, text: "Новая задача" });
    setTodos(todos);
  }

  return (
    <div>
      <ul>
        {todos.map((t, i) => (
          <li key={i}>
            <b>{t.text}</b> <input placeholder="заметка" />{" "}
            <button className="del" onClick={() => setTodos(todos.filter((x) => x.id !== t.id))}>✕</button>
          </li>
        ))}
      </ul>
      <button className="add" onClick={addTodo}>Добавить</button>
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const $ = (s) => document.querySelector(s);
  const $$ = (s) => [...document.querySelectorAll(s)];
  const count = () => console.log($$("li").length);
  await wait();
  await click($(".add"));
  count();
  $$("input").forEach((input, i) => (input.value = ["a", "b", "c"][i]));
  await click($$(".del")[0]);
  console.log($$("li").map((li) => li.querySelector("b").textContent + ": " + li.querySelector("input").value).join(" | "));
  await click($(".add"));
  count();
  await click($$(".del")[2]);
  count();
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }

// Каталог курсов. Сейчас на экране одна заглушка. Соберите всё, что мы разобрали:
// 1) CourseCard получает props title и likes и показывает название и кнопку «♡ число»;
// 2) App выводит все курсы из массива через map с key;
// 3) у каждой карточки своё состояние liked: клик → «♥ число+1», повторный клик → обратно «♡ число».
const courses = [
  { id: 1, title: "HTML и CSS", likes: 10 },
  { id: 2, title: "JavaScript", likes: 25 },
  { id: 3, title: "React Lite", likes: 7 },
];

function CourseCard() {
  return (
    <div className="card">
      <b>Курс</b> <button className="like">♡ 0</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <CourseCard />
    </div>
  );
}

// ---- проверка (не менять) ----
const wait = () => new Promise((r) => setTimeout(r, 60));
async function click(el) {
  el.click();
  await wait();
}
(async () => {
  const cards = () => [...document.querySelectorAll(".card")];
  const show = () =>
    console.log(cards().map((c) => c.querySelector("b").textContent + " " + c.querySelector(".like").textContent).join(" | "));
  await wait();
  show();
  await click(cards()[0].querySelector(".like"));
  await click(cards()[2].querySelector(".like"));
  show();
  await click(cards()[0].querySelector(".like"));
  show();
})();

body { font-family: system-ui, sans-serif; }
.card { border: 1px solid #d5dbe6; border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: #fff; }
button { padding: 6px 12px; font: inherit; cursor: pointer; }
input { padding: 6px 8px; font: inherit; }
ul { padding-left: 20px; }
.done { text-decoration: line-through; color: #8a93a6; }