Урок 56 из 114 · 16 мин

Финальный проект: список задач

Собираем всё: задачи с сервера, отметка «выполнено» с сохранением, добавление новой задачи и живой поиск.

Финал

Вредный Скрипт
Последний шанс! Я сломаю загрузку, клики и форму сразу!
Ника
Ты знаешь всё, что нужно: fetch, события, формы и хранилище. Четыре шага — и у тебя полноценное приложение.

Ваш ход

Задание

Шаг 1. Загрузить задачи

Напиши async function load(): загружает /api/todos в todos и вызывает готовую render(todos). Вызови load().

Задачи загружены — пока нет
Отрисованы, выполненная зачёркнута — пока нет

let todos = [];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}

let todos = [];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}

Результат обновляется при вводе

Задание

Шаг 2. Отметить выполненной

Делегированием на #list: клик по задаче переключает её done, перерисовывает список и сохраняет todos в localStorage (ключ todos, JSON).

Задача 2 выполнена — пока нет
Отрисовано — пока нет
Сохранено в localStorage — пока нет

let todos = [
  { id: 1, title: "Повторить массивы", done: true },
  { id: 2, title: "Сделать викторину", done: false },
  { id: 3, title: "Прочитать про fetch", done: false }
];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}
render(todos);

let todos = [
  { id: 1, title: "Повторить массивы", done: true },
  { id: 2, title: "Сделать викторину", done: false },
  { id: 3, title: "Прочитать про fetch", done: false }
];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}
render(todos);

Результат обновляется при вводе

Задание

Шаг 3. Добавить задачу

По submit формы отмени перезагрузку, отправь POST /api/todos с { title } из поля title, добавь ответ в todos, перерисуй и покажи ` Задача №${id} добавлена в #msg`.

Сервер выдал номер — пока нет
Задача в списке — пока нет
Без перезагрузки — пока нет

let todos = [
  { id: 1, title: "Повторить массивы", done: true },
  { id: 2, title: "Сделать викторину", done: false },
  { id: 3, title: "Прочитать про fetch", done: false }
];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}
render(todos);

let todos = [
  { id: 1, title: "Повторить массивы", done: true },
  { id: 2, title: "Сделать викторину", done: false },
  { id: 3, title: "Прочитать про fetch", done: false }
];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}
render(todos);

Результат обновляется при вводе

Задание

Шаг 4. Живой поиск

При вводе в #search показывай через render только задачи, в названии которых есть введённый текст (без учёта регистра).

Найдена одна задача — пока нет
Пустой поиск — все задачи — пока нет

let todos = [
  { id: 1, title: "Повторить массивы", done: true },
  { id: 2, title: "Сделать викторину", done: false },
  { id: 3, title: "Прочитать про fetch", done: false }
];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}
render(todos);

let todos = [
  { id: 1, title: "Повторить массивы", done: true },
  { id: 2, title: "Сделать викторину", done: false },
  { id: 3, title: "Прочитать про fetch", done: false }
];
function render(list) {
  document.querySelector("#list").replaceChildren(...list.map((t) => {
    const li = document.createElement("li");
    li.textContent = t.title;
    li.dataset.id = t.id;
    li.classList.toggle("done", t.done);
    return li;
  }));
}
render(todos);

Результат обновляется при вводе

ПрактикаОбязательное задание

Из чего приложение

Выберите все подходящие варианты.

Что ты использовал в финальном проекте?

Домашнее заданиеДля закрепления

Правда

Выберите один ответ.

Где «живёт правда» о задачах в хорошо устроенном коде?

Куда отправимся?

Веб-разработка с нуля: четыре курса по порядку.

Куда отправимся?

Финальный проект: список задач

Ваш ход

Шаг 1. Загрузить задачи

Шаг 2. Отметить выполненной

Шаг 3. Добавить задачу

Шаг 4. Живой поиск

Из чего приложение

Правда

Ваше обучение