Kapitel 15: Schöne Oberflächen ohne Design-Studium

Übung in VS Code lösen

Verbessere die Kundenverwaltung:

Binde Pico.css und eigenes CSS ein und baue eine Navigationsleiste.
Zeige Umsätze im deutschen Format mit euro-Filter, rechtsbündig.
Baue die Live-Suche mit htmx: Beim Tippen im Suchfeld wird nach 300 ms nur der Tabellenkörper ersetzt.

So arbeitest du an dieser Übung

Lege in VS Code einen Projektordner an, zum Beispiel uv init kapitel15, und installiere die Pakete mit uv add "fastapi[standard]".
Lade pico.min.css und htmx.min.js wie im Kapitel beschrieben in den Ordner static/ und binde ihn mit app.mount('/static', ...) ein.
Löse die Aufgabe selbst. Lies Fehlermeldungen von unten nach oben.
Gehe die Checkliste unten durch. Hake ab, was dein Programm kann.
Vergleiche danach mit der Musterlösung und ihrer Erklärung.

Die Seite nutzt Pico.css aus static/ (nicht von einem CDN) und hat eine Navigationsleiste.
Umsätze erscheinen im deutschen Format, z. B. 1.234,50 €, über den Jinja-Filter euro.
Zahlenspalten sind rechtsbündig (class="zahl" und eigenes CSS in static/app.css).
Beim Tippen ins Suchfeld wird nach 300 ms nur der Tabellenkörper ersetzt (hx-get, hx-trigger, hx-target).
Die Route für htmx liefert nur die Zeilen (_zeilen.html), nicht die ganze Seite.
Die Seite sieht auch auf dem Handy gut aus (Browser-Entwicklerwerkzeuge F12, Gerätemodus).