Teil 19: Aufgaben als erledigt markieren – per Button im Browser

---

🎯 Ziel dieses Teils

✅ Du zeigst neben jeder Aufgabe einen Button „Erledigt“
✅ Wenn der Nutzer klickt → wird die Aufgabe abgehakt
✅ Das Ergebnis wird sofort im Browser angezeigt
✅ Die Änderung wird dauerhaft gespeichert

---

Was du brauchst

• Eine neue Route: /erledigt/<nummer>
• Ein Button bei jeder offenen Aufgabe
• Eine Funktion, die erledigt = True setzt
• Danach: speichern und zurück zur Startseite

---

Schritt 1: Neue Route in app.py

In deiner app.py – füge diese Funktion hinzu:

@app.route("/erledigt/<int:index>")
def aufgabe_erledigen(index):
    if 0 <= index < len(aufgaben):
        aufgaben[index]["erledigt"] = True
        aufgaben_speichern()
    return redirect(url_for("startseite"))

🔍 Erklärung:

Code	Bedeutung
/erledigt/<int:index>	Route mit Nummer der Aufgabe
aufgaben[index]["erledigt"]	Markiert die Aufgabe als erledigt
aufgaben_speichern()	Schreibt es in die Datei
redirect(...)	Zurück zur Liste im Browser

---

Schritt 2: Button im HTML (index.html)

Jetzt passt du deine HTML-Datei an:
In der for-Schleife fügst du einen Button bei offenen Aufgaben ein.

<ul>
    {% for aufgabe in aufgaben %}
        <li>
            {% if aufgabe.erledigt %}
                ✅ <s>{{ aufgabe.text }}</s>
            {% else %}
                ⬜ {{ aufgabe.text }}
                <a href="/erledigt/{{ loop.index0 }}">
                    <button>✅ Erledigt</button>
                </a>
            {% endif %}
        </li>
    {% endfor %}
</ul>

🧠 Was ist loop.index0?

Das ist die aktuelle Nummer in der Schleife, bei 0 beginnend
(genau das brauchen wir für den Aufruf /erledigt/0, /erledigt/1 usw.)

---

Schritt 3: App starten & testen

python app.py

👉 Öffne im Browser: http://127.0.0.1:5000

• Du siehst jetzt bei offenen Aufgaben einen Button „Erledigt“
• Klick drauf – die Aufgabe wird ✅ abgehakt
• Die Änderung bleibt gespeichert

---

Was du jetzt kannst

Funktion	Wie gemacht?
Aufgabe abhaken	Per Klick auf /erledigt/<index>
In Datei speichern	aufgaben_speichern()
Browser neu anzeigen	redirect(url_for("startseite"))

---

Was du gelernt hast

Konzept	Erklärung
<int:index>	Route mit Zahl als Parameter
loop.index0	Schleifen-Index bei 0 beginnend
href="/erledigt/..."	Button führt zu Aktion
redirect(...)	Browser umleiten auf neue Seite

---

Bonus-Ideen

• 🔁 Abhaken und „zurücksetzen“ (erneut auf offen setzen)
• ❌ Aufgaben ganz löschen
• 🔢 Nummerierung mit Statusanzeige kombinieren (1., 2., …)