52 lines
1.5 KiB
Markdown
52 lines
1.5 KiB
Markdown
|
# HTML Witze-Ticker
|
||
|
|
|
||
|
|
Minimales HTML-Skelett — Struktur vorhanden, aber keine Logik.
|
||
|
|
Die Witz-Anzeige, der Timer und die Buttons fehlen noch vollständig.
|
||
|
|
|
||
|
|
## Aktueller Stand
|
||
|
|
|
||
|
|
```
|
||
|
|
jokes.html HTML-Skelett: <h1> + leeres <div id="joke"> — kein JavaScript, kein CSS
|
||
|
|
```
|
||
|
|
|
||
|
|
## Demo: `/optimize --no-tests`
|
||
|
|
|
||
|
|
```
|
||
|
|
/optimize "Ergänze jokes.html um eine vollständige Witz-Anzeige:
|
||
|
|
- JavaScript-Array mit mind. 20 deutschen Witzen (inline, kein externes API)
|
||
|
|
- Beim Laden: sofort zufälliger Witz
|
||
|
|
- Automatischer Wechsel alle 60 Sekunden (setInterval)
|
||
|
|
- Sanfter Fade-Übergang (CSS-Transition)
|
||
|
|
- Anzeige: Index (3/20) und Countdown-Sekunden bis zum nächsten Witz
|
||
|
|
- Button 'Nächster Witz' zum manuellen Weiterblättern
|
||
|
|
Kein Framework, kein Build-Tool — reines HTML/CSS/JS." \
|
||
|
|
--no-tests
|
||
|
|
```
|
||
|
|
|
||
|
|
**Was pi-coder hier zeigt:**
|
||
|
|
- Frontend-Arbeit ohne automatische Test-Suite (`--no-tests`)
|
||
|
|
- Vollständige Implementierung in einer einzigen HTML-Datei
|
||
|
|
- Judge bewertet Korrektheit durch Code-Review statt durch Tests
|
||
|
|
|
||
|
|
## Folge-Demo: `/patch` für Kleinstergänzung
|
||
|
|
|
||
|
|
```
|
||
|
|
/patch "Füge einen 'Vorheriger Witz'-Button hinzu."
|
||
|
|
```
|
||
|
|
|
||
|
|
Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
|
||
|
|
|
||
|
|
## Manueller Test
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Im Browser öffnen:
|
||
|
|
xdg-open jokes.html
|
||
|
|
# oder:
|
||
|
|
firefox jokes.html
|
||
|
|
```
|
||
|
|
|
||
|
|
Prüfen:
|
||
|
|
- Beim Laden erscheint sofort ein Witz
|
||
|
|
- Countdown läuft von 60 auf 0
|
||
|
|
- Nach 60 Sekunden erscheint automatisch ein neuer Witz mit Fade
|
||
|
|
- „Nächster Witz"-Button wechselt sofort und setzt den Timer zurück
|