Autor: Stefan
-
Teil 13: Aufgaben als Datenobjekte – mit dict statt Text
Bis jetzt hast du Aufgaben als einfachen Text gespeichert: Das hat funktioniert, aber: Jetzt machst du es richtig – mit Datenstrukturen. Was ist ein dict? Ein dict ist ein Wörterbuch in Python: ein kleines Paket aus Schlüssel und Wert. Beispiel: Du kannst auf die Teile zugreifen wie so: 🎯 Ziel dieses Teils Schritt 1: Aufgabenliste…
-
Teil 15: HTML-Datei anzeigen – mit render_template()
In Teil 14 hast du gelernt, wie man mit Flask eine Webseite im Browser anzeigt.Bisher war das HTML aber direkt im Python-Code – das ist unübersichtlich und nicht gut erweiterbar. Jetzt trennen wir Logik (Python) und Layout (HTML). Das geht in Flask mit der Funktion: 🎯 Ziel dieses Teils ✅ Du legst eine HTML-Datei an✅…
-
Teil 17: Neue Aufgaben hinzufügen – per HTML-Formular
🎯 Ziel dieses Teils ✅ Du baust ein HTML-Formular✅ Flask empfängt die eingegebene Aufgabe✅ Die Aufgabe wird zur Liste hinzugefügt✅ Die Seite lädt sich neu mit der aktualisierten Liste Was du brauchst 1. Aufgabenliste bleibt wie bisher In app.py: 2. Neue Route für das Formular (in app.py) Importiere ganz oben noch: Dann füge diese neue…
-
Teil 16: Aufgaben im Browser anzeigen – mit HTML und for-Schleife
In Teil 15 hast du gelernt, wie du eine HTML-Datei anzeigst.Jetzt lernen wir, wie du Aufgaben aus Python an die HTML-Seite übergibst – damit sie im Browser sichtbar werden. 🎯 Ziel dieses Teils ✅ Aufgaben in Python speichern✅ Aufgaben an HTML übergeben✅ Aufgaben im HTML mit einer Schleife anzeigen ({% for … %}) Vorbereitung: Aufgabenliste…
-
Teil 18: Aufgaben speichern und laden – mit JSON-Datei
🎯 Ziel dieses Teils ✅ Aufgaben in eine Datei schreiben✅ Aufgaben beim Start aus der Datei lesen✅ Weiterarbeiten, als wäre nichts gewesen Warum JSON? Beispiel JSON-Datei: Das sieht fast genauso aus wie Python-Listen mit Dictionaries. Projektstruktur Deine Ordnerstruktur bleibt so: Schritt 1: json importieren (in app.py) Ganz oben: Schritt 2: Speicher-Funktionen hinzufügen Füge unter deine…
-
Teil 20: Aufgaben löschen – mit einem Klick im Browser
🎯 Ziel dieses Teils ✅ Jede Aufgabe bekommt einen Löschen-Button✅ Klick auf den Button → Aufgabe wird gelöscht✅ Änderungen werden gespeichert✅ Liste aktualisiert sich im Browser Was du brauchst Schritt 1: Neue Route in app.py Füge in deiner app.py folgende Funktion hinzu: 🔍 Erklärung: Code Wirkung aufgaben.pop(index) Entfernt die Aufgabe an Position index aufgaben_speichern() Speichert…
-
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 Schritt 1: Neue Route in app.py In deiner app.py – füge diese Funktion hinzu: 🔍 Erklärung: Code Bedeutung…
-
Teil 21: Übersicht & Filter – Zeige nur, was du sehen willst
🎯 Ziel dieses Teils ✅ Zeige Anzahl offener und erledigter Aufgaben✅ Möglichkeit, nur offene Aufgaben anzuzeigen✅ Sortiere Aufgaben: offen zuerst, dann erledigt✅ Alles bleibt im Browser klickbar und einfach Schritt 1: Aufgaben beim Anzeigen sortieren In deiner app.py, bearbeite die startseite()-Funktion: Das sorgt dafür, dass nicht erledigte Aufgaben oben stehen. Schritt 2: Offene & erledigte…
-
Teil 22: Aufgaben zurücksetzen – von „erledigt“ auf „offen“
🎯 Ziel dieses Teils ✅ Jede erledigte Aufgabe bekommt einen „Zurücksetzen“-Button✅ Beim Klick wird erledigt = False gesetzt✅ Die Änderung wird sofort gespeichert✅ Alles passiert im Browser, ohne Neuladen per Hand Schritt 1: Neue Route in app.py Füge in deiner app.py diese neue Route hinzu: Schritt 2: Button in index.html Bearbeite den Teil mit if…
-
Teil 24: Die To-Do-App hübsch machen – mit CSS
Du lernst in diesem Teil, wie du deine App gestaltest, ohne den Code komplizierter zu machen. 🎯 Ziel dieses Teils ✅ Grundlegendes CSS hinzufügen✅ Aufgaben optisch klar trennen✅ Farben für „offen“ / „erledigt“✅ Buttons optisch verbessern Schritt 1: Neuen Ordner static/ für CSS Deine neue Ordnerstruktur: Schritt 2: Datei style.css erstellen Erstelle die Datei static/style.css…