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>
      {/* барои ҳар дарс аз массиви lessons як <li> нишон диҳед */}
    </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; }