Prosta aplikacja listy zadań (To‑Do)

Stwórzmy prostą aplikację listy zadań, w której użytkownik może dopisywać nowe zadania, oznaczać je jako wykonane i usuwać z listy.

Funkcje aplikacji

• Dodawanie nowego zadania (po wpisaniu treści i kliknięciu przycisku Dodaj).
• Oznaczanie zadania jako ukończone (np. poprzez kliknięcie na nie – zmiana stylu, przekreślenie).
• Usuwanie pojedynczego zadania (np. przy każdym zadaniu przycisk Usuń).

Interfejs (HTML)

Przykładowe elementy HTML interfejsu (wstaw poniższy kod do dokumentu):

<input type="text" id="taskInput" placeholder="Nowe zadanie">
<button id="addTaskBtn">Dodaj</button>
<ul id="taskList"></ul>

CSS — styl dla ukończonego zadania

Możesz dodać styl, który wizualnie oznaczy wykonane zadania:

.done {
  text-decoration: line-through;
  color: gray;
}

Logika (JavaScript)

1. Po kliknięciu Dodaj pobieramy tekst z pola input. Jeśli jest pusty – nic nie robimy (ewentualnie wyświetlamy komunikat).
2. Tworzymy nowy element <li> i ustawiamy jego tekst na podany przez użytkownika.
3. Dodajemy do tego <li> przycisk Usuń (np. jako wewnętrzny <button>).
4. Wstawiamy gotowe <li> do <ul id="taskList">.
5. Czyścimy pole input (żeby można było wpisać kolejne zadanie).
6. Dodajemy obsługę zdarzeń:
   • Kliknięcie na element <li> (zadanie) – przełączamy mu klasę .done (jeśli miał klasę, usuwamy, jeśli nie miał – dodajemy).
   • Kliknięcie na przycisk Usuń przy danym zadaniu – usuwamy to zadanie z listy (element <li>). Ważne: kliknięcie przycisku Usuń nie powinno jednocześnie togglować klasy .done na <li> — powstrzymaj propagację zdarzenia (użyj event.stopPropagation() w obsłudze przycisku).

Przykładowa implementacja (JavaScript)

let input = document.getElementById("taskInput");
let btn = document.getElementById("addTaskBtn");
let list = document.getElementById("taskList");

btn.addEventListener("click", function() {
    let text = input.value.trim();
    if (text === "") {
        alert("Wpisz treść zadania!");
        return;
    }
    // Tworzymy element li
    let li = document.createElement("li");
    li.textContent = text;
    // Tworzymy przycisk Usuń i dodajemy do li
    let delBtn = document.createElement("button");
    delBtn.textContent = "Usuń";
    li.appendChild(delBtn);
    // Dodaj zdarzenia
    li.addEventListener("click", function() {
        li.classList.toggle("done");
    });
    delBtn.addEventListener("click", function(e) {
        e.stopPropagation(); // żeby kliknięcie w Usuń nie wywołało też zdarzenia li
        li.remove();
    });
    // Dodaj li do listy i wyczyść pole
    list.appendChild(li);
    input.value = "";
});

Testowanie

Po złożeniu komponentów przetestuj aplikację: wpisz zadanie, kliknij Dodaj – powinno pojawić się na liście. Kliknięcie zadania powinno je przekreślić/odznaczyć (klasa .done). Kliknięcie Usuń przy zadaniu – zadanie powinno zniknąć.

Ćwiczenia

1. Dodaj kilka przykładowych zadań i przetestuj działanie listy: oznacz parę jako wykonane, usuń kilka. Upewnij się, że dodawanie, usuwanie i przełączanie statusu działa bez błędów.
2. Zadbaj o to, by nie można było dodać "pustego" zadania (np. same spacje). W powyższym kodzie jest to zrealizowane przez .trim() i alert – możesz zamiast alertu wyświetlać komunikat na stronie (np. w osobnym <div> pod polem input).
3. Dodaj funkcjonalność "usuń wszystkie ukończone": np. przycisk, który po kliknięciu usunie z listy wszystkie <li> z klasą .done. (Wskazówka: użyj document.querySelectorAll(".done") do pobrania ukończonych elementów i usuń je w pętli.)
4. (Dla chętnych) Spróbuj sprawić, by lista zadań zapamiętywała się między odświeżeniami strony. Pomyśl o użyciu localStorage: po każdej zmianie listy możesz zapisać aktualne zadania (np. w formie JSON), a przy ładowaniu strony odczytać je i odtworzyć listę.