3I_WTL_2025/19_todolist

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:

<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:

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:

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

classList.toggle():

// 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:

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

Validace vstupu:

if (todoitem === "" || todoitem.trim() === "") {
    alert("Zadej úkol!");
    return;  // Ukončí funkci
}

🎯 Rozšíření projektu

1. Local Storage (ukládání dat):

// 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ů:

<p>Celkem úkolů: <span id="totalCount">0</span></p>
<p>Dokončeno: <span id="completedCount">0</span></p>

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ů:

<select id="priority" class="form-select">
    <option value="low">Nízká</option>
    <option value="medium">Střední</option>
    <option value="high">Vysoká</option>
</select>

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

4. Editace úkolů:

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