# 19 - Todo List Aplikace

## 🎯 Co se naučíte

V této lekci se naučíte vytvořit kompletní Todo List aplikaci s přidáváním, odebíráním a označováním úkolů.

## 📚 Témata lekce

- **Todo List aplikace** - praktický projekt
- **Dynamické přidávání položek** do seznamu
- **Odstranění položek** z DOM
- **Toggle stavu** - splněno/nesplněno
- **Local Storage** - ukládání dat v prohlížeči (možná)
- **Event delegation** - efektivní event handling
- **Bootstrap styling** pro moderní UI
- **Textarea** - víceřádkový vstup

## 📂 Soubory v projektu

- `index.html` - HTML s formulářem a seznamem
- `todo.js` - JavaScript pro funkcionalitu
- `css/bootstrap.css` - Bootstrap CSS

## 💻 Ukázka z lekce

### HTML struktura:
```html
<textarea class="form-control velkytext" id="todoitem"
          placeholder="Zde napiš úkol"></textarea>
<button class="btn btn-primary w-100 my-3" onclick="additem()">
    ZAPSAT
</button>

<ul id="todoList"></ul>
```

### JavaScript - Přidání úkolu:
```javascript
function additem() {
    const todoitem = document.getElementById("todoitem").value;

    if (todoitem === "") {
        alert("Zadej úkol!");
        return;
    }

    const todoList = document.getElementById("todoList");

    // Vytvoření <li> elementu
    const li = document.createElement("li");
    li.className = "todolistitem";
    li.innerHTML = `
        ${todoitem}
        <button class="btn btn-danger btn-sm ms-2"
                onclick="removeitem(this)">Smazat</button>
        <button class="btn btn-success btn-sm ms-1"
                onclick="toggleitem(this)">Hotovo</button>
    `;

    todoList.appendChild(li);

    // Vyčištění textarea
    document.getElementById("todoitem").value = "";
}

// Odstranění úkolu
function removeitem(button) {
    const li = button.parentElement;
    li.remove();
}

// Toggle splněno/nesplněno
function toggleitem(button) {
    const li = button.parentElement;
    li.classList.toggle("text-decoration-line-through");
    li.classList.toggle("text-muted");
}
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Napište úkol do textarey
3. Klikněte na "ZAPSAT" - úkol se přidá do seznamu
4. Vyzkoušejte tlačítko "Hotovo" - přeškrtne úkol
5. Klikněte na "Smazat" - odstraní úkol ze seznamu
6. Přidejte více úkolů a vyzkoušejte všechny funkce
7. Prozkoumejte `todo.js` - jak funguje logika

## 💡 Tip pro studenty

### parentElement:
```javascript
function removeitem(button) {
    // button = <button> element
    // button.parentElement = <li> element (rodič)
    const li = button.parentElement;
    li.remove();
}
```

### classList.toggle():
```javascript
// Toggle třídy (přidá/odebere)
element.classList.toggle("active");

// Přidá třídu
element.classList.add("active");

// Odebere třídu
element.classList.remove("active");

// Zkontroluje, zda má třídu
element.classList.contains("active");  // true/false
```

### text-decoration-line-through:
```html
<!-- Přeškrtnutý text -->
<p class="text-decoration-line-through">Dokončeno</p>
```

### Validace vstupu:
```javascript
if (todoitem === "" || todoitem.trim() === "") {
    alert("Zadej úkol!");
    return;  // Ukončí funkci
}
```

## 🎯 Rozšíření projektu

### 1. Local Storage (ukládání dat):
```javascript
// Uložení do local storage
function saveTodos() {
    const todos = [];
    document.querySelectorAll("#todoList li").forEach(li => {
        todos.push(li.textContent);
    });
    localStorage.setItem("todos", JSON.stringify(todos));
}

// Načtení z local storage
function loadTodos() {
    const todos = JSON.parse(localStorage.getItem("todos")) || [];
    todos.forEach(todo => {
        // Přidat do seznamu
    });
}

// Volat při načtení stránky
window.onload = loadTodos;
```

### 2. Počítadlo úkolů:
```html
<p>Celkem úkolů: <span id="totalCount">0</span></p>
<p>Dokončeno: <span id="completedCount">0</span></p>
```

```javascript
function updateCounters() {
    const total = document.querySelectorAll("#todoList li").length;
    const completed = document.querySelectorAll("#todoList li.text-decoration-line-through").length;

    document.getElementById("totalCount").textContent = total;
    document.getElementById("completedCount").textContent = completed;
}
```

### 3. Priorita úkolů:
```html
<select id="priority" class="form-select">
    <option value="low">Nízká</option>
    <option value="medium">Střední</option>
    <option value="high">Vysoká</option>
</select>
```

```javascript
// Barevné označení podle priority
if (priority === "high") {
    li.classList.add("border-start", "border-danger", "border-5");
}
```

### 4. Editace úkolů:
```javascript
function edititem(button) {
    const li = button.parentElement;
    const newText = prompt("Upravit úkol:", li.firstChild.textContent);
    if (newText) {
        // Aktualizovat text úkolu
    }
}
```

## ⚠️ Důležité poznámky

1. **Validace vstupu** - kontrolujte prázdné hodnoty
2. **trim()** - odstraní mezery na začátku a konci
3. **this** v onclick - odkazuje na button element
4. **remove()** - moderní způsob odstranění elementu

## 🎨 Praktické využití

- **Todo List** - osobní úkoly
- **Nákupní seznam** - položky k nákupu
- **Checklist** - kontrolní seznam
- **Poznámky** - rychlé poznámky
- **Cíle** - tracking cílů

## 🔗 Související lekce

- **Předchozí:** 18_forms - formuláře a DOM manipulace
- **Další:** 20_ajax - AJAX a Fetch API
- **Související:**
  - 11_json - práce s JSON (pro localStorage)
  - 06_js_html - základy DOM manipulace