📝 Base TODO-list Svelte

Деплой

Переглянути демо: (Netlify)

Архітектура

• App.svelte — зберігає стан (масив задач) та містить основні функції додавання й видалення.
• List.svelte — відповідає за рендер списку задач через #each.
• Todo.svelte — карточка окремої задачі (checkbox + title + delete button).
• CreateTask.svelte — форма з input та кнопкою для додавання нової задачі.

---

Поетапна розробка

1. Компонент Todo

• створив базову розмітку
• передав пропси (title, status)
• прив’язав checkbox через bind:checked
• додав динамічний клас checked
• зарендерив компонент через App і протестував

2. Компонент List

• прийняв масив задач через пропс
• пройшовся по масиву #each (item.id)
• передав поля задачі в Todo через spread ({...item})
• перевірив коректний рендер списку

3. Компонент CreateTask

• створив розмітку форми
• прив’язав input до локального стейта title через bind:value

4. Логіка в App

• створив функцію submit (зупинка reload + очистка title)
• створив addTask (новий об’єкт → додавання на початок списку)
• передав функції у CreateTask через пропси
• протестував додавання нової задачі