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:
todo-web/
├── app.py
├── aufgaben.json
├── static/
│ └── style.css ← hier kommt dein CSS rein
└── templates/
├── index.html
└── bearbeiten.html
Schritt 2: Datei style.css erstellen
Erstelle die Datei static/style.css mit folgendem Inhalt:
body {
font-family: sans-serif;
max-width: 600px;
margin: auto;
padding: 1rem;
background-color: #f8f9fa;
}
h1 {
text-align: center;
}
form {
margin-bottom: 1rem;
display: flex;
gap: 0.5rem;
}
input[type="text"] {
flex: 1;
padding: 0.5rem;
font-size: 1rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
background: white;
padding: 0.75rem;
margin-bottom: 0.5rem;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.erledigt {
color: gray;
text-decoration: line-through;
}
.button-group {
margin-top: 0.5rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
Schritt 3: CSS in HTML einbinden
In deinen HTML-Dateien (index.html & bearbeiten.html)
füge im <head> diesen Link hinzu:
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
Beispiel index.html:
<head>
<meta charset="UTF-8">
<title>Meine To-Do-Liste</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
Schritt 4: HTML verbessern – mit Klassen
Passe deine index.html an – z. B.:
<ul>
{% for aufgabe in aufgaben %}
<li>
<div class="{% if aufgabe.erledigt %}erledigt{% endif %}">
{% if aufgabe.erledigt %}
✅ <s>{{ aufgabe.text }}</s>
{% else %}
⬜ {{ aufgabe.text }}
{% endif %}
</div>
<div class="button-group">
{% if not aufgabe.erledigt %}
<a href="/erledigt/{{ loop.index0 }}"><button>✅ Erledigt</button></a>
{% else %}
<a href="/zuruecksetzen/{{ loop.index0 }}"><button>🔁 Zurücksetzen</button></a>
{% endif %}
<a href="/bearbeiten/{{ loop.index0 }}"><button>✏️ Bearbeiten</button></a>
<a href="/loeschen/{{ loop.index0 }}"><button>❌ Löschen</button></a>
</div>
</li>
{% endfor %}
</ul>
Ergebnis
Wenn du jetzt deine App startest:
python app.py
…dann sieht sie:
- hell, modern und lesbar aus
- jede Aufgabe ist in einer „Karte“
- Buttons sind klar erkennbar
- erledigte Aufgaben sind grau und durchgestrichen
- alles ohne JavaScript, rein mit HTML & CSS
Was du gelernt hast
| Technik | Wirkung |
|---|---|
static/ Ordner | Flask zeigt hier statische Dateien an (CSS, Bilder, etc.) |
url_for('static', filename='...') | Gibt den richtigen Pfad zur CSS-Datei |
.class in CSS | Gestaltet bestimmte Bereiche gezielt |
| Trennung von Logik und Design | Deine App bleibt übersichtlich |
Schreibe einen Kommentar