Projekt: ToDo List
Březen 2026
Po vizuálním projektu Restaurace přišla v The Odin Project výzva zaměřená na data. Zadání vyžadovalo vytvořit aplikaci, kde uživatel data nejen vidí, ale také vytváří a upravuje. A co je nejdůležitější – data musí zůstat uložená i po zavření prohlížeče.
Cílem bylo zvládnout Web Storage API a striktně oddělit aplikační logiku od manipulace s DOMem.
O co v projektu jde
Klasický organizér úkolů s možností třídění do projektů:
- Vytváření úkolů s detaily (název, datum, priorita).
- Třídění úkolů do vlastních projektů.
- Persistence dat: Po obnovení stránky úkoly nezmizí (Local Storage).
Hlavní technologie: Local Storage a JSON
Největší novinkou byla práce s pamětí prohlížeče. Protože localStorage umí ukládat pouze textové řetězce, musel jsem se naučit serializaci dat pomocí JSON. Také jsem poprvé využil externí knihovnu date-fns pro práci s časem.
// Ukázka ukládání dat
function saveToStorage(projects) {
// Převedeme pole objektů na řetězec
localStorage.setItem("todoProjects", JSON.stringify(projects));
}
// Načtení dat při startu
function loadFromStorage() {
const data = localStorage.getItem("todoProjects");
return data ? JSON.parse(data) : [];
}GitHub: projekt todo list