Todo-застосунок

Вимоги

• Додавання нового завдання за текстом
• Позначення завдання виконаним/невиконаним
• Видалення завдання
• Фільтрація: всі / активні / виконані
• Збереження стану між перезавантаженнями сторінки (localStorage)

Етапи

1. 1. Розмітка та рендер списку

   HTML-структура готова, статичний список завдань рендериться з масиву.

   Переглянути реалізацію

   Почніть з мінімальної розмітки та функції рендеру, яка перебудовує список із єдиного джерела правди — масиву tasks.

   index.html

   html

   <input id="new-task" type="text" placeholder="Нове завдання" />
   <button id="add-btn">Додати</button>
   <ul id="task-list"></ul>
2. 2. Додавання і видалення

   Можна додати нове завдання та видалити існуюче.

   Переглянути реалізацію

   Додайте обробник для кнопки додавання та делеговане видалення — один слухач на контейнері списку замість обробника на кожному елементі.

   app.js

   javascript

   document.getElementById("add-btn").addEventListener("click", () => {
     const input = document.getElementById("new-task");
     const text = input.value.trim();
     if (!text) return;
   
     tasks.push({ id: crypto.randomUUID(), text, completed: false });
     input.value = "";
     render();
   });
   
   document.getElementById("task-list").addEventListener("click", (event) => {
     if (event.target.tagName !== "BUTTON") return;
   
     const id = event.target.closest("li").dataset.id;
     const index = tasks.findIndex((task) => task.id === id);
     tasks.splice(index, 1);
     render();
   });

3. 3. Позначення виконаним

   Клік по завданню перемикає completed і візуально позначає завдання.

4. 4. Фільтри та localStorage

   Працюють фільтри всі/активні/виконані, стан переживає перезавантаження сторінки.

   Переглянути реалізацію

   Збережіть масив tasks у localStorage після кожної зміни та відновіть його при завантаженні сторінки.

   app.js

   javascript

   function saveTasks() {
     localStorage.setItem("tasks", JSON.stringify(tasks));
   }
   
   function loadTasks() {
     const saved = localStorage.getItem("tasks");
     return saved ? JSON.parse(saved) : [];
   }
   
   let tasks = loadTasks();