Лоиҳаи хурд: трекери вазифаҳо ё одатҳо

01 Супориш: вариантро интихоб кунед

Лоиҳа аз он чи шумо дар дарсҳои 8–11 кардаед, ҷамъ мешавад: рӯйхат дар DOM, ҳодисаҳо, шакл, ҳолат дар як объект ва захира. Имрӯз мо ҳама чизро то барномаи корӣ мерасонем, якдигарро месанҷем ва ҳимоя мекунем. Яке аз ду вариантро интихоб кунед — мувофиқи ҳамон меъёрҳо баҳо медиҳем.

Вариантҳо аз рӯи мураккабӣ қариб баробаранд: дар одатҳо мантиқ мураккабтар (санаҳо ва силсила), дар вазифаҳо — ҳолатҳои намоиши бештар (филтрҳо). Агар шумо танҳо навакак бо эътимод код навиштан оғоз карда бошед — вазифаҳоро гиред. Мехоҳед чолиш — одатҳо. Ғояи худро пешниҳод кардан мумкин аст, аммо танҳо дар сурате ки аз рӯи ҳаҷм ҳамон қадар бошад ва шумо онро бо омӯзгор пеш аз оғози кор мувофиқа карда бошед.

Шумо дар охир чиро нишон медиҳед

1. Барномаи кор — дар браузер бе хато дар консол кушода мешавад.
2. Репозиторий дар GitHub бо код ва README (ин чист, чӣ тавр оғоз кардан, скриншот).
3. Ҳимоя дар 5 дақиқа — намоиш, шарҳи код ва ҷавоб ба саволҳо.

02 Талабот: MVP ва бонусҳо

MVP (minimum viable product) — версияи ҳадди ақал, ки аллакай муфид аст ва аз аввал то охир кор мекунад. Аввал онро пурра месозем, ва танҳо баъд вақтро ба оро сарф мекунем. Лоиҳа бе MVP баҳои баланд намегирад, ҳар қадар бонус дошта бошад.

MVP — ҳатмӣ барои ҳар ду вариант

Бонусҳо — баъди MVP

• Таҳрир: клики дучанда ба матн онро ба майдони воридкунӣ табдил медиҳад (Enter — захира, Esc — бекор).
• Тугмаи «Очистить выполненные» бо тасдиқ.
• Ҷустуҷӯ дар рӯйхат дар вақти воқеӣ (ҳодисаи input).
• Афзалиятҳо ё категорияҳо бо нишонаҳои рангин.
• Мавзӯи торик бо захираи интихоб.
• Мураттабсозӣ: аз рӯи алифбо, аз рӯи санаи илова.
• Барои одатҳо: ҳафта дар шакли 7 нуқта бо қайдҳо аз рӯи рӯзҳо ва «беҳтарин силсила».

03 Лоиҳа чӣ тавр баҳо дода мешавад (0–100)

Лоиҳаи хурд аз рӯи шкалаи 0–100 баҳо дода мешавад, чунон ки дар қоидаҳои курс навишта шудааст. Баҳо аз ҳафт меъёр иборат аст:

Бонусҳо то +5 хол илова мекунанд, аммо натиҷа аз 100 зиёд буда наметавонад. Яъне бонусҳо метавонанд талафоти хурдро дар меъёрҳои асосӣ ҷуброн кунанд.

Чӣ холҳоро кам мекунад

• Кодро шарҳ дода наметавонед — дар меъёре, ки қисми нофаҳмо ба он тааллуқ дорад, холҳо гум мекунед (қоидаи курс №2 ва №3).
• Ба мӯҳлат супорида нашуд — то −10 хол, бо мувофиқа бо омӯзгор.
• Код пурра аз донишҷӯи дигар ё аз чат бе фаҳмиш нусха шудааст — 0 барои лоиҳа. Ба якдигар кӯмак кардан мумкин ва лозим аст, аммо ҳар кас аз они худро менависад ва мефаҳмад.

Ин ба баҳои ниҳоии курс чӣ тавр таъсир мерасонад

Мисол: барои лоиҳаи хурди 1 шумо 82 гирифтед, барои лоиҳаи хурди 2 — 90. Миёна — 86, ва ба натиҷаи курс 86 × 25% = 21.5 хол меравад. Барои сертификат ҳар ду лоиҳаи хурдро супурдан лозим аст.

04 Декомпозитсия: лоиҳаро якҷоя бо ЗС тақсим мекунем

Хатои асосии навомӯз пеш аз лоиҳаи калон — нишаста «ҳама чизро якбора» навиштан оғоз кардан. Баъди як соат код ба бесаранҷомӣ табдил меёбад, нофаҳмо аст, ки чӣ аллакай кор мекунад, ва мехоҳӣ ҳамаро партоӣ. Касбиён дигар хел мекунанд: аввал вазифаро ба қадамҳои хурд тақсим мекунанд, вақти ҳар кадомро баҳо медиҳанд ва пай дар пай мераванд. Ин декомпозитсия номида мешавад.

Промпти аввал суханони умумӣ медиҳад ва шояд фавран тамоми кодро, ки шумо шарҳ дода наметавонед. Дуюм нақшае медиҳад, ки бо он кор кардан мумкин аст. Аммо ин танҳо чернавик аст. Ба намунаи натиҷа баъди ислоҳи шумо нигоҳ кунед:

Намунаи нақша барои варианти А (дар маҷмӯъ 6 соат)

Бо ҷавоби ЗС чӣ мекунед — қадам ба қадам

1. Зиёдатиро хат занед. Агар ЗС «Webpack-ро танзим кун» ё «React-ро пайваст кун»-ро пешниҳод кард — ин дар бораи лоиҳаи мо нест. Мо бо JS-и холис.
2. Тартибро санҷед. «Захира»-ро пеш аз «ҳолат» кардан мумкин нест: аввал бояд донист, чиро захира кардан. Ҳар қадам бояд ба қадамҳои тайёри пешина такя кунад.
3. Вақтро худатон баҳо диҳед. ЗС намедонад, ки барои шумо чӣ қадар вақт меравад. То ҳол таҷриба нест, баҳои ӯро ба 1.5 зарб кунед. Ҳар қадаме, ки аз 40 дақиқа дарозтар аст — боз тақсим кунед.
4. Ҳар қадам бояд натиҷаи намоён диҳад. «Дар бораи меъморӣ фикр кардан» — қадам нест. «Функсияи addTask санҷишро дар консол мегузарад» — қадам аст.
5. MVP-ро аз бонусҳо ҷудо кунед. Бонусҳоро танҳо вақте иҷро мекунем, ки ҳама чизи MVP кор мекунад.
6. Нақшаро нависед дар файли PLAN.md ё шарҳ — ва иҷрошударо қайд кунед. Ҳар нишона — пешрафти намоён, ва он ангезаро нигоҳ медорад.

const plan = [
  { title: "Разметка страницы", min: 20 },
  { title: "Объект состояния", min: 25 },
  { title: "Функция render", min: 40 },
  { title: "Форма добавления", min: 30 },
  { title: "Отметка выполненных", min: 25 },
  { title: "Сохранение в localStorage", min: 35 },
];

// ҷамъи дақиқаҳоро ҳисоб кунед ва сатри натиҷавиро чоп кунед

Всего: 175 мин = 2.9 ч

const plan = [
  { title: "Разметка", min: 20 },
  { title: "Фильтры и счётчики", min: 90 },
  { title: "Форма", min: 30 },
  { title: "Сохранение и загрузка", min: 60 },
  { title: "Стили", min: 25 },
];

// қадамҳои аз 40 дақиқа дарозтарро ёбед

Разбить: Фильтры и счётчики (90 мин)
Разбить: Сохранение и загрузка (60 мин)
Нужно разделить: 2

const plan = [
  { title: "Разметка", min: 20, bonus: false },
  { title: "Функция render", min: 40, bonus: false },
  { title: "Форма добавления", min: 30, bonus: false },
  { title: "Сохранение", min: 50, bonus: false },
  { title: "Тёмная тема", min: 25, bonus: true },
  { title: "Поиск по задачам", min: 30, bonus: true },
];

// const sumMin = (list) => ...
// console.log(`MVP: ... мин`);
// console.log(`Бонус: ... мин`);

MVP: 140 мин
Бонус: 55 мин

05 Гармкунии 1. Ҳолат — дили трекер

Нақша ҳаст, ба код мегузарем. Аз асосӣ оғоз мекунем — ҳолат (дарси 11). Ҳар чизе, ки барнома «медонад», дар як объект ҷой дорад: рӯйхати вазифаҳо, филтри интихобшуда, рақами навбатӣ. Саҳифа — танҳо тасвири ин объект аст.

const state = {
  tasks: [
    { id: 1, title: "Купить лепёшки", done: false },
    { id: 2, title: "Сделать ДЗ", done: true },
  ],
  filter: "all",   // "all" | "active" | "done"
  nextId: 3,       // кадом id-ро вазифаи навбатӣ мегирад
};

console.log(state.tasks.length);
console.log(state);

Чаро майдони алоҳидаи nextId? Агар tasks.length + 1 гиранд, баъди нест кардани вазифа рақамҳо такрор мешаванд. Дар ин бора мо боз дар вақти аз назар гузаронӣ сухан меронем. Ҳоло — қоидаи асосӣ: функсияҳо болои ҳолат объекти кӯҳнаро намерасонанд, балки навро бармегардонанд.

function addTask(state, title) {
  return {
    ...state,                                                    // ҳама дигарро нусха мекунем
    tasks: [...state.tasks, { id: state.nextId, title, done: false }],  // массиви нав
    nextId: state.nextId + 1,
  };
}

const s1 = { tasks: [], filter: "all", nextId: 1 };
const s2 = addTask(s1, "Плов");

console.log(s1.tasks.length, s2.tasks.length);  // 0 1 — ҳолати кӯҳна тағйир наёфт

Барои муфассалтар хондан: learn.javascript.ru — методы массивов · MDN — оператор расширения (spread)

const state = {
  tasks: [{ id: 1, title: "Купить лепёшки", done: false }],
  filter: "all",
};
state.tasks.push({ id: 2, title: "Сделать ДЗ", done: true });
state.filter = "done";
// дар ин ҷо вазифаи сеюмро илова кунед

console.log(state.tasks.length);
console.log(state.tasks[1].title);
console.log(state.filter);
console.log(state.tasks.filter((t) => t.done).length);

3
Сделать ДЗ
done
2

// function createState() { ... }

const a = createState();
const b = createState();
a.tasks.push({ id: 1, title: "тест", done: false });
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

{"tasks":[{"id":1,"title":"тест","done":false}],"filter":"all","nextId":1}
{"tasks":[],"filter":"all","nextId":1}

const createState = () => ({ tasks: [], filter: "all", nextId: 1 });

// function addTask(state, title) { ... }

let s = createState();
s = addTask(s, "  Купить лепёшки  ");
s = addTask(s, "   ");
s = addTask(s, "Сделать ДЗ");
console.log(s.tasks.map((t) => `${t.id}:${t.title}`).join(" | "));
console.log(s.nextId);

const before = s;
const after = addTask(s, "Позвонить маме");
console.log(before.tasks.length, after.tasks.length);

1:Купить лепёшки | 2:Сделать ДЗ
3
2 3

function toggleTask(state, id) {
  return {
    ...state,
    tasks: state.tasks.map((t) => {
      if (t.id = id) {
        t.done = !t.done;
      }
      return t;
    }),
  };
}

const show = (s) => s.tasks.map((t) => t.id + (t.done ? "✓" : "✗")).join(" ");
const s1 = {
  tasks: [
    { id: 1, title: "Плов", done: false },
    { id: 2, title: "Чой", done: false },
    { id: 3, title: "Самбуса", done: true },
  ],
};
const s2 = toggleTask(s1, 2);
console.log("до:", show(s1));
console.log("после:", show(s2));

до: 1✗ 2✗ 3✓
после: 1✗ 2✓ 3✓

const s = {
  tasks: [
    { id: 1, title: "Плов", done: true },
    { id: 2, title: "Чой", done: false },
    { id: 3, title: "Самбуса", done: true },
    { id: 4, title: "Курутоб", done: false },
  ],
};

// removeTask, clearDone, getStats

const ids = (st) => st.tasks.map((t) => t.id).join(" ");
console.log(ids(removeTask(s, 2)));
console.log(ids(clearDone(s)));
const st = getStats(s);
console.log(`Всего: ${st.total}, сделано: ${st.done}, осталось: ${st.left}`);
console.log(s.tasks.length);

1 3 4
2 4
Всего: 4, сделано: 2, осталось: 2
4

06 Гармкунии 2. Функсияи render

Ҳолат худ ба худ дар экран намоён нест. Функсияе лозим аст, ки ҳолатро мегирад ва онро дар DOM мекашад. Қоидаи ин функсия оддӣ аст: рӯйхатро пок кардан ва аз нав сохтани он аз ҳолат. Намеҷӯем, ки кадом элемент тағйир ёфт, якто-якто ислоҳ намекунем — ҳама чиз аз сифр. Барои трекери хурд ин зуд ва боэътимод аст.

Ҳар блоки код дар ин саҳифа дар «саҳифа»-и холии худ кор мекунад, ки дар он document ҳаст. Бинобар ин мо метавонем элементҳоро тавассути document.createElement созем ва он чиро, ки мехоҳем санҷем, ба консол чоп кунем.

function createTaskItem(task) {
  const li = document.createElement("li");
  li.textContent = task.title;
  if (task.done) li.classList.add("done");
  return li;
}

function render(state, list) {
  list.innerHTML = "";                                   // 1. пок кардем
  state.tasks.forEach((task) => list.append(createTaskItem(task)));  // 2. аз нав сохтем
}

const list = document.createElement("ul");
render({ tasks: [{ title: "Плов" }, { title: "Чой" }] }, list);
render({ tasks: [{ title: "Плов" }, { title: "Чой" }] }, list);   // бори дуюм: такрор нест

console.log(list.children.length);   // 2, на 4

function render(tasks, list) {
  tasks.forEach((title) => {
    const li = document.createElement("li");
    li.textContent = title;
    list.append(li);
  });
}

const list = document.createElement("ul");
render(["Плов", "Чой"], list);
render(["Плов", "Чой"], list);
console.log(list.children.length);   // 4 — такрор!

Барои муфассалтар хондан: learn.javascript.ru — изменение документа · MDN — textContent

// function createTaskItem(task) { ... }

const li1 = createTaskItem({ id: 7, title: "Купить лепёшки", done: false });
const li2 = createTaskItem({ id: 8, title: "Сделать ДЗ", done: true });
console.log(li1.tagName, li1.className, li1.dataset.id, li1.textContent);
console.log(li2.className);

LI task 7 Купить лепёшки
task done

function createTaskItem(task) {
  const li = document.createElement("li");
  li.textContent = task.title;
  return li;
}

// function render(state, list) { ... }

const list = document.createElement("ul");
const titles = () => [...list.children].map((li) => li.textContent).join(", ");

render({ tasks: [{ title: "Плов" }, { title: "Чой" }, { title: "Самбуса" }] }, list);
console.log(list.children.length, titles());
render({ tasks: [{ title: "Чой" }, { title: "Самбуса" }] }, list);
console.log(list.children.length, titles());

3 Плов, Чой, Самбуса
2 Чой, Самбуса

function createTaskItem(task) {
  const li = document.createElement("li");
  li.className = "task";
  li.textContent = task.title;
  return li;
}

function render(state, list) {
  list.innerHTML = "";
  // агар вазифаҳо набошанд — паёмро нишон диҳед ва бароед
  state.tasks.forEach((task) => list.append(createTaskItem(task)));
}

const list = document.createElement("ul");
const info = () =>
  `${list.children.length} ${list.firstElementChild.className} ${list.firstElementChild.textContent}`;

render({ tasks: [] }, list);
console.log(info());
render({ tasks: [{ title: "Купить хлеб" }] }, list);
console.log(info());
render({ tasks: [] }, list);
console.log(info());

1 empty Пока нет задач. Добавьте первую!
1 task Купить хлеб
1 empty Пока нет задач. Добавьте первую!

function createTaskItem(task) {
  const li = document.createElement("li");
  li.innerHTML = task.title;
  return li;
}

const li = createTaskItem({ title: "<b>срочно!</b>" });
console.log(li.children.length);     // чанд элементи дарунмонда?
console.log(li.textContent);
console.log(li.querySelector("b"));  // бояд null бошад

0
<b>срочно!</b>
null

07 Гармкунии 3. Шакл, клик ва вакилкунӣ

Ҳолат ҳаст, кашидан ҳаст. Боқӣ мондааст, ки интерфейсро зинда кунем: ирсоли шакл ва кликҳо ба вазифаҳоро бигирем. Дар лоиҳа айнан ду коркардкунандаи муҳим хоҳад буд: submit дар шакл ва click дар рӯйхат.

Шакл: submit + preventDefault + санҷиш

const form = document.createElement("form");
form.innerHTML = '<input name="title"><button>Добавить</button>';
const input = form.querySelector("input");

form.addEventListener("submit", (event) => {
  event.preventDefault();               // намегузорем, ки браузер саҳифаро аз нав бор кунад
  const title = input.value.trim();
  if (!title) {
    console.log("Введите название");    // дар лоиҳа — паём дар зери майдон
    return;
  }
  console.log("Добавляем:", title);
  input.value = "";
});

input.value = "   ";
form.dispatchEvent(new Event("submit", { cancelable: true }));  // пахшро тақлид мекунем
input.value = "Купить хлеб";
form.dispatchEvent(new Event("submit", { cancelable: true }));

Ҳодисаи submit ҳам ҳангоми клик ба тугма ва ҳам ҳангоми пахши Enter дар майдон кор мекунад: алоҳида шунидани клавиша лозим нест. Дар ин ҷо мо тугмаро тавассути dispatchEvent «мепахшем», зеро дар машқҳо саҳифаи зинда нест.

Рӯйхат: як коркардкунанда барои ҳама (вакилкунӣ)

Хатои аз ҳама маъмули навомӯзон — ба ҳар тугмаи «✕» ҳангоми сохтан addEventListener овехтан. Аммо ҳангоми ҳар render элементҳо аз нав сохта мешаванд, ва коркардкунандаҳо гум мешаванд ё зиёд мешаванд. Ҳалли дарси 9 — вакилкунӣ: як коркардкунанда дар падари умумии <ul>, ва дар дохил мебинем, ки маҳз ба куҷо клик карданд (event.target).

const list = document.createElement("ul");
list.innerHTML = `
  <li data-id="1">Плов <button data-action="delete">✕</button></li>
  <li data-id="2">Чой <button data-action="delete">✕</button></li>`;

list.addEventListener("click", (event) => {
  const btn = event.target.closest("button[data-action='delete']");
  if (!btn) return;                     // на ба тугмаи нест кардан клик карданд
  const li = btn.closest("li");
  console.log("Удаляем задачу", li.dataset.id);
  li.remove();
});

list.querySelector("button").click();
console.log(list.children.length);      // 1

Барои муфассалтар хондан: learn.javascript.ru — делегирование событий · learn.javascript.ru — событие submit

const btn = document.createElement("button");
let clicks = 0;

// коркардкунандаи click-ро овезед

btn.click();
btn.click();
btn.click();
console.log(clicks);
console.log(btn.textContent);

3
Нажато: 3

const form = document.createElement("form");
form.innerHTML = '<input name="title"><button>Добавить</button>';
const input = form.querySelector("input");
const tasks = [];

// коркардкунандаи submit-ро ба form овезед

function submit(value) {
  input.value = value;
  const notCancelled = form.dispatchEvent(new Event("submit", { cancelable: true }));
  console.log("отправка отменена:", !notCancelled);
}

submit("Купить лепёшки");
submit("   ");
submit("Сделать ДЗ");
console.log(tasks.join(" | "));
console.log(JSON.stringify(input.value));

отправка отменена: true
отправка отменена: true
отправка отменена: true
Купить лепёшки | Сделать ДЗ
""

const list = document.createElement("ul");
list.innerHTML = `
  <li data-id="1">Плов <button data-action="delete">✕</button></li>
  <li data-id="2">Чой <button data-action="delete">✕</button></li>
  <li data-id="3">Самбуса <button data-action="delete">✕</button></li>`;
const removed = [];

// як коркардкунандаи click дар list

list.querySelectorAll("button")[1].click();   // «Чой»-ро нест мекунем
list.querySelector("button").click();         // «Плов»-ро нест мекунем
list.querySelector("li").click();             // клик ба матн — чизе рӯй намедиҳад
console.log(removed.join(","));
console.log(list.children.length);
console.log(list.firstElementChild.dataset.id);

2,1
1
3

const root = document.createElement("div");
root.innerHTML = `
  <form><input><button>Добавить</button></form>
  <ul></ul>`;
const form = root.querySelector("form");
const input = root.querySelector("input");
const list = root.querySelector("ul");

let state = { tasks: [], nextId: 1 };

const addTask = (s, title) => ({
  tasks: [...s.tasks, { id: s.nextId, title, done: false }],
  nextId: s.nextId + 1,
});
const toggleTask = (s, id) => ({
  ...s,
  tasks: s.tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
});
const removeTask = (s, id) => ({ ...s, tasks: s.tasks.filter((t) => t.id !== id) });

function createTaskItem(task) {
  const li = document.createElement("li");
  li.dataset.id = task.id;
  if (task.done) li.classList.add("done");
  const span = document.createElement("span");
  span.textContent = task.title;
  const del = document.createElement("button");
  del.dataset.action = "delete";
  del.textContent = "✕";
  li.append(span, del);
  return li;
}

// 1) function render() { ... }
// 2) form.addEventListener("submit", ...)
// 3) list.addEventListener("click", ...)

// --- санҷиш: амалҳои корбарро тақлид мекунем ---
const add = (text) => {
  input.value = text;
  form.dispatchEvent(new Event("submit", { cancelable: true }));
};
add("Плов");
add("Чой");
add("Самбуса");
console.log(list.children.length);
list.children[1].querySelector("span").click();      // «Чой»-ро қайд кардем
list.children[0].querySelector("button").click();    // «Плов»-ро нест кардем
const summary = [...list.children]
  .map((li) => li.querySelector("span").textContent + (li.classList.contains("done") ? " ✓" : ""))
  .join(" | ");
console.log(list.children.length);
console.log(summary);

3
2
Чой ✓ | Самбуса

08 Гармкунии 4. Филтрҳо, ҳисобкунакҳо ва силсилаҳо

Филтр нест кардани вазифаҳо нест, балки назари дигар ба ҳамон ҳолат аст. Мо ҳамаи вазифаҳоро ва реҷаи интихобшудаи state.filter-ро нигоҳ медорем, ва render танҳо мувофиқҳоро нишон медиҳад. Бинобар ин иваз кардани филтр ҳеҷ гоҳ чизеро гум намекунад.

const tasks = [
  { title: "Плов", done: true },
  { title: "Чой", done: false },
];

function getVisible(tasks, filter) {
  if (filter === "active") return tasks.filter((t) => !t.done);
  if (filter === "done") return tasks.filter((t) => t.done);
  return tasks;   // "all" ва ҳама дигар
}

console.log(getVisible(tasks, "active").length);
console.log(tasks.length);   // массиви аслӣ зарар надид

Ҳисобкунакҳо аз ҳолат ҳисоб мешаванд, нигоҳ дошта намешаванд

Адади «Осталось: 3 из 5»-ро бо майдони алоҳида нигоҳ доштан ва ҳангоми ҳар амал бо даст нав кардан лозим нест. Онро ҳамеша аз массив ҳисоб кардан мумкин аст. Агар ду бор нигоҳ доранд, дер ё зуд қиматҳо ихтилоф мекунанд.

Барои варианти Б: одатҳо ва силсилаҳо

Одат «ба таври абадӣ иҷро шуда» надорад: он ҳар рӯз иҷро мешавад. Бинобар ин ба ҷои done массиви санаҳои days: ["2026-10-14", "2026-10-15"]-ро нигоҳ медорем. «Имрӯз анҷом шуд» — ин санҷиши days.includes(today) аст, ва силсила — чанд рӯз пай дар пай қайдҳо мераванд.

Барои муфассалтар хондан: learn.javascript.ru — методы массивов (filter, find, includes)

const tasks = [
  { title: "Плов", done: true },
  { title: "Чой", done: false },
  { title: "Самбуса", done: true },
  { title: "Курутоб", done: false },
];

// function getVisible(tasks, filter) { ... }

for (const f of ["all", "active", "done"]) {
  console.log(f + ":", getVisible(tasks, f).map((t) => t.title).join(", "));
}

all: Плов, Чой, Самбуса, Курутоб
active: Чой, Курутоб
done: Плов, Самбуса

// function counterText(tasks) { ... }

console.log(counterText([]));
console.log(counterText([{ done: true }, { done: false }, { done: false }, { done: true }]));
console.log(counterText([{ done: true }, { done: true }]));

Задач пока нет
Осталось: 2 из 4
Всё сделано!

const state = { filter: "all" };
const box = document.createElement("div");
box.innerHTML = `
  <button data-filter="all" class="active">Все</button>
  <button data-filter="active">Активные</button>
  <button data-filter="done">Готовые</button>`;

// як коркардкунандаи click дар box

const report = () => {
  const act = [...box.querySelectorAll(".active")].map((b) => b.textContent);
  console.log(state.filter, act.join(","));
};
report();
box.querySelector("[data-filter='done']").click();
report();
box.querySelector("[data-filter='active']").click();
report();

all Все
done Готовые
active Активные

const prevDay = (str) => {
  const d = new Date(str + "T00:00:00Z");
  d.setUTCDate(d.getUTCDate() - 1);
  return d.toISOString().slice(0, 10);
};

// function streak(dates, today) { ... }

const today = "2026-10-15";
console.log(streak(["2026-10-12", "2026-10-13", "2026-10-14", "2026-10-15"], today));
console.log(streak(["2026-10-10", "2026-10-13", "2026-10-14"], today));
console.log(streak(["2026-10-01", "2026-10-02"], today));
console.log(streak([], today));
console.log(streak(["2026-10-15", "2026-10-14", "2026-10-14", "2026-10-11"], today));

4
2
0
0
2

09 Гармкунии 5. Захира: localStorage ва JSON

Хишти охирини MVP — то маълумот баъди бастани ҷадвал гум нашавад. localStorage — ин анбори хурд бевосита дар браузер аст: ҷуфтҳои «калид — қимат». Се усул, ки қариб ҳамеша лозиманд: setItem(key, value), getItem(key) ва removeItem(key).

Маҳдудияти асосӣ: танҳо сатрҳо нигоҳ дошта мешаванд. Адад ба сатри "10" табдил меёбад, ва объект ба "[object Object]"-и бефоида. Бинобар ин ҳолатро пеш аз навиштан ба сатри JSON табдил медиҳем (JSON.stringify), ва баъди хондан — боз ба объект (JSON.parse).

try {
  localStorage.setItem("test", "1");
  console.log("localStorage работает");
} catch (error) {
  console.log("localStorage недоступен:", error.name);
}

Одатан шумо SecurityError-ро мебинед. Ин муқаррарӣ аст: маҳз бинобар ин мо дар зер тавассути ивазкунак кор мекунем. Онро нусха кунед — он дар ҳар машқи ин бахш лозим аст:

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },   // мисли воқеӣ: ҳама чиз ба сатр
  removeItem(key) { delete this.data[key]; },
};

storage.setItem("score", 10);
console.log(typeof storage.getItem("score"));   // string, на number
console.log(storage.getItem("нет такого"));     // null — калид нест

const state = { tasks: [{ id: 1, title: "Плов", done: false }], nextId: 2 };
storage.setItem("tracker:v1", JSON.stringify(state));   // объект → сатр
console.log(storage.getItem("tracker:v1"));
const back = JSON.parse(storage.getItem("tracker:v1")); // сатр → объект
console.log(back.tasks[0].title);

Маълумотро бехатар мехонем

Маълумот дар localStorage метавонад вайрон шуда бошад, онро корбар метавонист дастӣ ислоҳ кунад, ва ҳангоми оғози аввал он танҳо нест. Агар бешубҳа JSON.parse-ро даъват кунед, барнома ҳанӯз пеш аз кадри аввал меафтад. Бинобар ин чунин мехонем: try/catch + санҷиши шакл + варианти эҳтиётӣ.

const storage = { data: {}, getItem(k) { return k in this.data ? this.data[k] : null; }, setItem(k, v) { this.data[k] = String(v); } };
const KEY = "tracker:v1";

function loadState() {
  try {
    const state = JSON.parse(storage.getItem(KEY));     // null ё JSON-и шикаста
    if (state && Array.isArray(state.tasks)) return state;  // шаклро месанҷем
  } catch {
    // JSON-и шикаста — тарсе нест, аз варақи тоза оғоз мекунем
  }
  return { tasks: [], filter: "all", nextId: 1 };
}

console.log(loadState().tasks.length);     // 0 — маълумот ҳанӯз нест
storage.setItem(KEY, "{oops");
console.log(loadState().tasks.length);     // 0 — JSON шикаста, барнома зинда

Барои муфассалтар хондан: learn.javascript.ru — localStorage, sessionStorage · learn.javascript.ru — JSON · MDN — localStorage

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};

storage.setItem("score", 10);
const score = storage.getItem("score");
console.log(score + 5);   // мехоҳем 15

15

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";

// const saveState = (state) => ...
// const loadState = () => ...

saveState({
  tasks: [{ id: 1, title: "Плов", done: false }, { id: 2, title: "Чой", done: true }],
  filter: "all",
  nextId: 3,
});
console.log(typeof storage.getItem(KEY));
const loaded = loadState();
console.log(loaded.tasks.length);
console.log(loaded.tasks[1].title, loaded.tasks[1].done);
console.log(loaded.nextId);

string
2
Чой true
3

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";

function loadState() {
  return JSON.parse(storage.getItem(KEY));
}

console.log("пусто:", loadState().tasks.length);
storage.setItem(KEY, "{oops, не JSON");
console.log("сломано:", loadState().tasks.length);
storage.setItem(KEY, JSON.stringify({ tasks: [{ id: 1 }, { id: 2 }], filter: "all", nextId: 3 }));
console.log("нормально:", loadState().tasks.length);
storage.setItem(KEY, JSON.stringify({ tasks: "oops" }));
console.log("странно:", loadState().tasks.length);

пусто: 0
сломано: 0
нормально: 2
странно: 0

const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";
const fresh = () => ({ tasks: [], nextId: 1 });
const add = (s, title) => ({
  tasks: [...s.tasks, { id: s.nextId, title, done: false }],
  nextId: s.nextId + 1,
});
const toggle = (s, id) => ({
  ...s,
  tasks: s.tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
});

// function load() { ... }
// function save(state) { ... }

const boot = () => load();   // барнома баъди F5 ҳамин тавр оғоз мешавад

let s = boot();
s = add(s, "Плов"); save(s);
s = add(s, "Чой"); save(s);
s = boot();                    // «саҳифаро аз нав бор кард»
console.log(s.tasks.length, s.nextId);
s = add(s, "Самбуса"); save(s);
s = boot();
console.log(s.tasks.map((t) => t.id + ":" + t.title).join(" "));
s = toggle(s, 2); save(s);
s = boot();
console.log(s.tasks.filter((t) => t.done).map((t) => t.title).join());
storage.setItem(KEY, '{"tasks": "oops"}');   // маълумотро вайрон кард
console.log(boot().tasks.length);

2 3
1:Плов 2:Чой 3:Самбуса
Чой
0

10 Қолаби оғозии лоиҳа

Дар зер — скелети кории трекери вазифаҳо. Он аллакай вазифаҳоро илова карда ва кашида метавонад, ва боқӣ — «TODO»-и шумо. Код ба шаш блок ҷудо шудааст бо тартибе, ки хондан ва шарҳ додан дар ҳимоя қулай аст: анбор → ҳолат → элементҳои саҳифа → кашидан → нуқтаи ягонаи тағйирот → ҳодисаҳо.

1. Анбор. Дар қуттии санҷиш — ивазкунак, дар лоиҳа — localStorage-и воқеӣ.
2. Ҳолат ва функсияҳо болои он. Функсияҳои тоза: ҳолат гирифтем — навро баргардонидем.
3. Элементҳои саҳифа. Як маротиба ҳама чизи лозимро тавассути querySelector меёбем.
4. Кашидан. render() интерфейсро аз state месозад. Дигар касе DOM-ро намерасонад.
5. Нуқтаи ягонаи тағйирот. commit(next): ҳолати навро навиштан, захира кардан, аз нав кашидан. Ҳар амали корбар бо он анҷом меёбад.
6. Ҳодисаҳо. Шакл, рӯйхат (вакилкунӣ), филтрҳо.

▶ Запустить-ро пахш кунед, якчанд вазифа илова кунед — ва мебинед, ки қайд, нест кардан ва филтрҳо ҳоло кор намекунанд. Ин вазифа барои шумост.

<main class="app">
  <h1>Трекер задач</h1>
  <form id="form">
    <input id="title" placeholder="Что нужно сделать?" autocomplete="off">
    <button>Добавить</button>
  </form>
  <div class="filters" id="filters">
    <button data-filter="all">Все</button>
    <button data-filter="active">Активные</button>
    <button data-filter="done">Готовые</button>
  </div>
  <ul id="list"></ul>
  <p id="counter"></p>
</main>

.app { max-width: 420px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 12px; }
form { display: flex; gap: 8px; }
input { flex: 1; padding: 8px 10px; border: 1px solid #c7ccd6; border-radius: 8px; font: inherit; }
button { padding: 8px 12px; border: 0; border-radius: 8px; background: #1f6feb; color: #fff; font: inherit; cursor: pointer; }
.filters { display: flex; gap: 6px; margin: 12px 0; }
.filters button { background: #eef1f6; color: #1c2230; }
.filters button.active { background: #1c2230; color: #fff; }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid #e6e9f0; cursor: pointer; }
li.done span { text-decoration: line-through; color: #8a93a6; }
li.empty { justify-content: center; color: #8a93a6; cursor: default; }
li button { background: transparent; color: #d1344f; padding: 2px 8px; }
#counter { color: #5b6477; font-size: 14px; }

// ===== 1. Анбор =====
// localStorage-и воқеӣ дар қуттии санҷиш банд аст, бинобар ин ивазкунакро бо ҳамон API мегирем.
// Дар лоиҳаи худатон тамоми ин блок бо як сатр иваз мешавад: const storage = localStorage;
const storage = {
  data: {},
  getItem(key) { return key in this.data ? this.data[key] : null; },
  setItem(key, value) { this.data[key] = String(value); },
  removeItem(key) { delete this.data[key]; },
};
const KEY = "tracker:v1";

// ===== 2. Ҳолат ва функсияҳо болои он (ҳар кадом ҳолати НАВ-ро бармегардонад) =====
const createState = () => ({ tasks: [], filter: "all", nextId: 1 });

function addTask(state, title) {
  const clean = title.trim();
  if (!clean) return state;
  return {
    ...state,
    tasks: [...state.tasks, { id: state.nextId, title: clean, done: false }],
    nextId: state.nextId + 1,
  };
}

// TODO 1: done-ро дар вазифа бо id-и лозимӣ баръакс кунед
function toggleTask(state, id) {
  return state;
}

// TODO 2: вазифаро бо id-и лозимӣ бардоред
function removeTask(state, id) {
  return state;
}

// TODO 3: вазифаҳоро мувофиқи state.filter баргардонед ("all" | "active" | "done")
function getVisible(state) {
  return state.tasks;
}

function counterText(tasks) {
  if (tasks.length === 0) return "Задач пока нет";
  const left = tasks.filter((t) => !t.done).length;
  if (left === 0) return "Всё сделано!";
  return `Осталось: ${left} из ${tasks.length}`;
}

// TODO 4: ҳолатро аз storage хонед. Холӣ ё шикаста — createState()-ро баргардонед
function load() {
  return createState();
}

// TODO 4: ҳолатро ба storage захира кунед
function save(state) {
}

// ===== 3. Элементҳои саҳифа =====
const form = document.querySelector("#form");
const titleInput = document.querySelector("#title");
const filters = document.querySelector("#filters");
const list = document.querySelector("#list");
const counter = document.querySelector("#counter");

// ===== 4. Кашидан: интерфейс пурра аз state сохта мешавад =====
function createTaskItem(task) {
  const li = document.createElement("li");
  li.dataset.id = task.id;
  if (task.done) li.classList.add("done");
  const span = document.createElement("span");
  span.textContent = task.title;
  const del = document.createElement("button");
  del.dataset.action = "delete";
  del.textContent = "✕";
  li.append(span, del);
  return li;
}

function render() {
  const visible = getVisible(state);
  list.innerHTML = "";
  if (visible.length === 0) {
    const empty = document.createElement("li");
    empty.className = "empty";
    empty.textContent = "Здесь пока пусто";
    list.append(empty);
  }
  visible.forEach((task) => list.append(createTaskItem(task)));
  filters.querySelectorAll("button").forEach((b) => {
    b.classList.toggle("active", b.dataset.filter === state.filter);
  });
  counter.textContent = counterText(state.tasks);
}

// ===== 5. Нуқтаи ягонаи тағйирот =====
let state = load();

function commit(next) {
  state = next;
  save(state);
  render();
}

// ===== 6. Ҳодисаҳо =====
form.addEventListener("submit", (event) => {
  event.preventDefault();
  commit(addTask(state, titleInput.value));
  titleInput.value = "";
  titleInput.focus();
});

list.addEventListener("click", (event) => {
  const li = event.target.closest("li[data-id]");
  if (!li) return;
  const id = Number(li.dataset.id);
  if (event.target.closest("button[data-action='delete']")) commit(removeTask(state, id));
  else commit(toggleTask(state, id));
});

// TODO 5: коркардкунандаи click дар filters. Тугма бо data-filter → commit({ ...state, filter: ... })

render();

// ===== Худсанҷӣ барои вазифаи 10.1 (ба лоиҳаи худ нусха накунед) =====
{
  const add = (text) => {
    titleInput.value = text;
    form.dispatchEvent(new Event("submit", { cancelable: true }));
  };
  add("Плов");
  add("Чой");
  add("Самбуса");
  console.log("добавление:", list.children.length);
  list.children[1].querySelector("span").click();
  console.log("отметка:", list.querySelectorAll("li.done").length);
  list.children[0].querySelector("button").click();
  console.log("удаление:", list.children.length);
  filters.querySelector("[data-filter='done']").click();
  console.log("фильтр:", list.children.length);
  console.log("хранилище:", (JSON.parse(storage.getItem(KEY) || "{}").tasks || []).length);
  commit(createState());   // аз паси худ тоза мекунем
}

добавление: 3
отметка: 1
удаление: 2
фильтр: 1
хранилище: 2

Қолабро ба лоиҳаи худ чӣ тавр интиқол додан

1. Дар VS Code папкаи лоиҳа ва се файл созед: index.html, style.css, script.js. Аломатгузориро аз ҷадвали index.html ба дохили <body> гузоред, ҷадвалҳои боқимонда — ба файлҳои ҳамном.
2. Дар index.html услубҳо ва скриптро пайваст кунед: <link rel="stylesheet" href="style.css"> ва дар охири body — <script src="script.js"></script>.
3. Блоки «Анбор»-ро бо як сатр иваз кунед: const storage = localStorage;.
4. Блоки худсанҷиро дар поёни файл нест кунед.
5. Агар шумо аллакай лоиҳа аз дарсҳои 9–11 дошта бошед — онро напартоед. Сохтори онро бо қолаб муқоиса кунед ва аз рӯи нақшаи «ҳолат → render → commit → ҳодисаҳо» аз нав созед.

Варианти Б: дар қолаб барои одатҳо чӣ тағйир меёбад

const toggleToday = (state, id, today) => ({
  ...state,
  habits: state.habits.map((h) => {
    if (h.id !== id) return h;
    const days = h.days.includes(today)
      ? h.days.filter((d) => d !== today)   // қайд аллакай буд — мебардорем
      : [...h.days, today];                 // қайд набуд — мегузорем
    return { ...h, days };
  }),
});

const state = { habits: [{ id: 1, name: "Читать 20 минут", days: ["2026-10-14"] }] };
const today = "2026-10-15";   // дар барнома: new Date().toISOString().slice(0, 10)

const s1 = toggleToday(state, 1, today);
console.log(s1.habits[0].days.join(", "));
const s2 = toggleToday(s1, 1, today);
console.log(s2.habits[0].days.join(", "));

Қайд: toISOString() санаро аз рӯи UTC ҳисоб мекунад. Барои лоиҳаи таълимӣ ин иҷозат аст, аммо наздики нисфишаб «имрӯз» метавонад аз рӯзи маҳаллии шумо ба якчанд соат фарқ кунад. Инро дар ҳимоя ҳамчун маҳдудияти маълум зикр кардан мумкин аст.

11 Амалиёт дар дарс: 90 дақиқа

Дар машғулот шумо лоиҳаро то MVP мерасонед, якдигарро месанҷед ва ҳимояҳоро оғоз мекунед. Вақт маҳдуд аст, бинобар ин аз рӯи нақша амал мекунем.

1. 0–10 дақ · Декомпозитсия. Шумо вариантро (А ё Б) интихоб кардед, бо ЗС нақшаи 10–15 қадамро тартиб додед ва онро аз рӯи қоидаҳои бахши 04 ислоҳ кардед. Нақшаро ба ҳамсоя нишон диҳед: 1 дақиқа барои саволи «қадами аз ҳама хатарнок дар ту кадом аст?». Омӯзгор вариантҳо ва нақшаҳоро тасдиқ мекунад.
2. 10–50 дақ · Такмили лоиҳа. Бо нақшаи худ аз боло ба поён мегузаред. Қоидаи понздаҳ дақиқа: ҳар 15 дақиқа — истед, F5, санҷиш дар браузер ва дар консол. Монда шудед — аввал худатон 15 дақиқа, баъд ҳамсоя, баъд ЗС, баъд омӯзгор.
3. 50–70 дақ · Code review дар ҷуфт. Барои ҳар лоиҳа 10 дақиқа. Баррасикунанда аз рӯи чек-листи бахши 12 мегузарад, муаллиф гӯш мекунад ва менависад. Баъд ҷой иваз мекунед.
4. 70–90 дақ · Ислоҳот ва оғози ҳимояҳо. Эродҳои ревьюро ислоҳ мекунед. Ҳимояҳо ба навбат мегузаранд (5 дақиқа + як дақиқа барои иваз), тартибро омӯзгор муайян мекунад. Он ки имрӯз муваффақ нашуд — дар оғози машғулоти оянда ё бо мувофиқа ҳимоя мекунад.

Нуқтаҳои назоратӣ: шумо бояд дар куҷо бошед

12 Code review: якдигарро месанҷем

Code review — вақте ки як барномасоз коди дигарро пеш аз он ки он «ба олам биравад», мехонад. Ин имтиҳон нест ва ҷустуҷӯи гунаҳкор нест: назари тоза онро мебинад, ки муаллиф кайҳо мушоҳида карданро бас кардааст. Дар дастаҳои воқеӣ бе ревью код умуман қабул намешавад.

Ревью чӣ тавр мегузарад (10 дақиқа барои лоиҳа)

1. 2 дақ — оғоз. Муаллиф барномаро нишон медиҳад, баррасикунанда худаш онро вайрон кардан мехоҳад.
2. 5 дақ — хондани код. Баррасикунанда аз рӯи чек-листи зер мегузарад ва эродҳоро менависад.
3. 3 дақ — гуфтугӯ. Се банди «чӣ хуб аст», се — «чиро беҳтар кардан». Муаллиф саволҳои равшанкунанда медиҳад ва қарор медиҳад, чиро қабул кунад.

Чек-листи баррасикунанда

Эродҳоро чӣ тавр навиштан

Формулаи эрод: дар куҷо (файл ва сатр) → чӣ мебинам → чаро муҳим аст → пешниҳод (беҳтараш ҳамчун савол). Кодро танқид мекунем, на одамро. Баррасикунанда коди бегонаро ба ҷои муаллиф аз нав намесозад.

Барои муфассалтар хондан: learn.javascript.ru — отладка в браузере

function addTask(state, title) {
  const id = state.tasks.length + 1;
  return { ...state, tasks: [...state.tasks, { id, title, done: false }] };
}

let s = { tasks: [], nextId: 1 };
s = addTask(s, "Плов");
s = addTask(s, "Чой");
s = addTask(s, "Самбуса");
s = { ...s, tasks: s.tasks.filter((t) => t.id !== 2) };   // «Чой»-ро нест кардем
s = addTask(s, "Курутоб");
console.log(s.tasks.map((t) => t.id).join(","));

1,3,4

function getVisible(tasks, filter) {
  if (filter === "activ") return tasks.filter((t) => !t.done);
  if (filter === "done") return tasks.filter((t) => t.done);
  return tasks;
}

const tasks = [
  { title: "Плов", done: true },
  { title: "Чой", done: false },
  { title: "Самбуса", done: false },
];
console.log(getVisible(tasks, "all").length);
console.log(getVisible(tasks, "active").length);
console.log(getVisible(tasks, "done").length);

3
2
1

13 Ҳимоя: 5 дақиқа, ки 15 холро ҳал мекунанд

Ҳимоя — ин ҳикояи кӯтоҳ дар бораи он аст, ки шумо чӣ кардед ва чӣ тавр кор мекунад. На муаррифӣ ва на пурсиш: шумо бояд нишон диҳед, ки лоиҳа аз они шумост ва шумо онро мефаҳмед. Маҳз бинобар ҳамин ба ҳимоя 15 хол аз 100 ҷудо шудааст.

Сенария барои 5 дақиқа

Саволҳои маъмул ва дар бораи чӣ бояд гуфт

state чист ва дар ту дар куҷост?

Як объект бо ҳамаи маълумоти барнома: рӯйхат, филтр, id-и навбатӣ. Саҳифа аз он кашида мешавад. Онро дар код нишон диҳед.

Чаро render ҳар дафъа рӯйхатро аз нав месозад?

Осонтар ва боэътимодтар: ҷустан лозим нест, ки кадом элемент тағйир ёфт. Саҳифа ҳамеша ба ҳолат мувофиқ аст. Барои рӯйхати хурд ин зуд аст.

Вакилкунӣ чист ва чаро дар ин ҷо лозим аст?

Як коркардкунанда дар рӯйхат ба ҷои коркардкунанда дар ҳар тугма. Баъди render элементҳо аз нав сохта мешаванд, аммо коркардкунанда дар падар мемонад ва барои элементҳои нав кор мекунад.

Чаро дар submit preventDefault лозим аст?

Бе он браузер шаклро мефиристад ва саҳифаро аз нав бор мекунад — ҳолат дар хотира гум мешавад.

Дар localStorage чӣ ва бо кадом намуд мемонад?

Сатри JSON бо ҳолат таҳти калиди лоиҳа. Анбор танҳо сатрҳоро мефаҳмад, бинобар ин JSON.stringify ҳангоми навиштан ва JSON.parse ҳангоми хондан.

Агар дар анбор хасу хошок бошад, чӣ мешавад?

try/catch дар атрофи JSON.parse ва санҷиши шакл: ҳангоми мушкилот барнома бо ҳолати холӣ оғоз мешавад ва намеафтад.

Id дар ту чӣ тавр ҳисоб мешавад? Баъди нест кардан чӣ?

Тавассути ҳисобкунаки алоҳидаи nextId, ки танҳо меафзояд. length + 1 такрор медод.

Чаро textContent, на innerHTML?

Матни корбарро ҳамчун аломатгузорӣ қабул кардан мумкин нест: вагарна ба барнома HTML ва скриптҳои бегонаро андохтан мумкин аст.

ЗС-ро дар куҷо истифода кардӣ? Ин сатрро шарҳ деҳ.

Ростқавлона бигӯед, барои чӣ: декомпозитсия, шарҳи хато, санҷиш. Ҳар сатре, ки омӯзгор нишон дод, бояд бо суханони худ шарҳ дода шавад.

Агар боз як рӯз медоштӣ, чиро беҳтар мекардӣ?

1–2 чизи мушаххасро ном баред: таҳрир, ҷустуҷӯ, санҷишҳо. Ин нишон медиҳад, ки шумо маҳдудиятҳои лоиҳаро мебинед.

Маслиҳатҳо барои омодагӣ

• Сенарияи намоишро бо овози баланд бо секундомер ақаллан як маротиба гузаред.
• Файлҳои лозимиро пешакӣ кушоед ва ҳарфро дар муҳаррир калон кунед: гурӯҳ бояд кодро бубинад.
• Зиёдатиро гирифта партоед: коди шарҳшуда, console.log, маълумоти санҷишӣ дар анбор.
• Узр нахоҳед («ман муваффақ нашудам»). Беҳтар: «ин нест, зеро… инак ман онро чӣ тавр илова мекардам».
• Ҷавобро намедонед — ин муқаррарӣ аст. Бигӯед «ба ёдам нест, аммо кӯшиш мекунам дар ҳуҷҷатҳо ёбам ва нишон медиҳам» — ин аз ҳадс задан беҳтар баҳо дода мешавад.

const defence = {
  state: "Мой state — объект с полями ... Он лежит в ...",
  render: "",
  delegation: "",
  storage: "",
  improve: "",
};

console.log(Object.keys(defence).length + " ответов подготовлено");

14 Бор кардани лоиҳа ба GitHub

Лоиҳае, ки танҳо дар ноутбуки шумост, барои корфармо вуҷуд надорад. GitHub — портфолиои шумост. Git-и асосӣ (init, commit, push)-ро шумо аз талаботи воридшавии курс медонед; мунтазам онро дар дарси 19 таҳлил мекунем, ва имрӯз — роҳи ҳадди ақали «папка → репозиторий».

1. Репозиторий созед. Дар github.com New repository-ро пахш кунед. Ном — бо забони англисӣ, бо дефис: task-tracker ё habit-tracker. Public-ро интихоб кунед. Нишонаҳои «Add a README», «.gitignore» ва «license»-ро нагузоред — репозиторий бояд холӣ бошад.
2. Git-ро дар папкаи лоиҳа ибтидо кунед ва коммити аввалро созед:
   Терминал (дар папкаи лоиҳа)

   git init
   git add .
   git commit -m "add tracker app"

3. Репозиторийро пайваст кунед ва кодро фиристед. Суроғаро аз саҳифаи репозиторийи нав нусха кунед (ба ҷои ВАШ_ЛОГИН номи худро дар GitHub гузоред):
   Терминал

   git branch -M main
   git remote add origin https://github.com/ВАШ_ЛОГИН/task-tracker.git
   git push -u origin main

4. Натиҷаро санҷед. Саҳифаи репозиторийро нав кунед: файлҳо ба ҷояшон, дар реша index.html намоён аст. Репозиторийро дар тирезаи хусусии браузер ё аз телефон кушоед — истинод бояд бе вуруд ба ҳисоб кушода шавад.
5. README.md-ро аз рӯи қолаби зер илова кунед, скриншоти барномаро гиред ва ба репозиторий гузоред.
6. Ислоҳотро аз рӯи ревью бо коммитҳои алоҳида бор кунед — ҳамин тавр дар таърих намоён аст, ки шумо чиро такмил додед:
   Терминал

   git add .
   git commit -m "fix duplicate ids after delete"
   git push

# Трекер задач

Приложение на чистом JavaScript: добавление, отметка и удаление задач,
фильтры, счётчик. Данные сохраняются в localStorage.

## Что умеет
- добавлять задачи (с проверкой на пустую строку)
- отмечать выполненными и удалять
- фильтры «Все / Активные / Готовые»
- помнить данные после перезагрузки

## Стек
HTML, CSS, JavaScript (без библиотек)

## Запуск
Откройте index.html в браузере.

## Скриншот
![Скриншот](screenshot.png)

## Что исправил после code review
- ...

## Что можно улучшить
- ...

Барои муфассалтар хондан: GitHub Docs — Hello World

15 Вазифаи хонагӣ

Лоиҳаро аз рӯи эродҳои ревью ва ҳимоя такмил диҳед ва онро ба GitHub бор кунед.

Чӣ бояд кард

• ☐ Эродҳоеро, ки шумо дар ревью ва ҳимоя қабул кардед, ислоҳ кунед.
• ☐ Ҳамаи бандҳои MVP-ро аз бахши 02 санҷед ва чек-листи баррасикунандаро аз рӯи лоиҳаи худ боз як бор гузаред.
• ☐ Аз код console.log-и зиёдатӣ, коди шарҳшуда ва функсияҳои мурдаро бароред.
• ☐ README.md-ро нависед (ин чист, стек, оғоз, скриншот, чиро ислоҳ кардед, чиро беҳтар кардан мумкин).
• ☐ Лоиҳаро ба GitHub бор кунед: репозиторий оммавӣ, на камтар аз 5 коммити бомаънӣ.
• ☐ Агар ҳимояро ҳанӯз нагузашта бошед — аз рӯи бахши 13 омода шавед.

Чиро супорид

Истинод ба репозиторий дар чати гурӯҳ (Telegram). Дар паём нависед: варианти лоиҳа (А ё Б), баъди ревью чиро илова кардед, кадом бонусро кардед (агар кардед).

Вазифаи хонагӣ чӣ тавр баҳо дода мешавад (0–10)

Ин баҳо барои вазифаи хонагии дарс аст (0–10). Баҳо барои худи лоиҳаи хурд (0–100) аз рӯи ҷадвали бахши 03 мегузорад ва алоҳида ҳисоб карда мешавад.