feat: html-joke-ticker → html-quote-ticker (Programmierer-Zitate)
Witze durch 25–30 echte Programmierer-Zitate ersetzt (Linus Torvalds, Donald Knuth, Brian Kernighan u.a.). Verzeichnis, Datei und alle Referenzen umbenannt. Demo-Befehle auf Zitate-Konzept angepasst. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b248a1d1ae
commit
42d29354ad
6 changed files with 37 additions and 34 deletions
|
|
@ -12,7 +12,7 @@ Jedes Projekt startet bewusst unvollständig — genau der Ausgangspunkt, für d
|
|||
| `go-fibonacci/` | Go | `/optimize --interactive` + `/continue` + `/shipit` |
|
||||
| `c-linkedlist/` | C | `/quick_check` + `/fix` + `/patch` |
|
||||
| `bash-sysreport/` | Bash | `/coder` von Null (kein Startcode) + `/quick_check` |
|
||||
| `html-joke-ticker/` | HTML/CSS/JS | `/optimize --no-tests` + `/patch` |
|
||||
| `html-quote-ticker/` | HTML/CSS/JS | `/optimize --no-tests` + `/patch` + Tailwind-Redesign |
|
||||
|
||||
## Demo-Workflow
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ Jedes Example braucht ein eigenes git-Repo, damit pi-coder commit-basierte
|
|||
Features nutzen kann (Loop-Erkennung, Diff-Anzeige, `/version`):
|
||||
|
||||
```bash
|
||||
for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-joke-ticker; do
|
||||
for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-quote-ticker; do
|
||||
cd examples/$dir
|
||||
git init -b main && git add -A && git commit -m "feat: initial $dir"
|
||||
cd ../..
|
||||
|
|
@ -64,7 +64,7 @@ und bereinigt Build-Artefakte (`target/`, `__pycache__` etc.).
|
|||
| 1 | `python-calculator` | ~5–10 min | Einstieg, Test-Loop |
|
||||
| 2 | `c-linkedlist` | ~5 min | `/quick_check` + `/fix`, kein Loop |
|
||||
| 3 | `bash-sysreport` | ~5–8 min | `/coder` von Null, kein Startcode |
|
||||
| 4 | `html-joke-ticker` | ~8–12 min | `/optimize --no-tests`, Frontend |
|
||||
| 4 | `html-quote-ticker` | ~8–12 min | `/optimize --no-tests`, Frontend |
|
||||
| 5 | `rust-wordcount` | ~10–15 min | Loop + `/version` |
|
||||
| 6 | `go-fibonacci` | ~15–20 min | `--interactive` + `/shipit` |
|
||||
|
||||
|
|
@ -77,4 +77,4 @@ und bereinigt Build-Artefakte (`target/`, `__pycache__` etc.).
|
|||
[go-fibonacci](go-fibonacci/README.md) ·
|
||||
[c-linkedlist](c-linkedlist/README.md) ·
|
||||
[bash-sysreport](bash-sysreport/README.md) ·
|
||||
[html-joke-ticker](html-joke-ticker/README.md)
|
||||
[html-quote-ticker](html-quote-ticker/README.md)
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Witze-Ticker</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Witze-Ticker</h1>
|
||||
<div id="joke"><!-- TODO: Witz hier --></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
# Demo-Protokoll: html-joke-ticker
|
||||
# Demo-Protokoll: html-quote-ticker
|
||||
|
||||
## Lauf 1
|
||||
|
||||
**Datum:**
|
||||
**Befehl:**
|
||||
```
|
||||
/optimize "Ergänze jokes.html ..." --no-tests
|
||||
/optimize "Erstelle einen Zitate-Ticker ..." --no-tests
|
||||
```
|
||||
**Startzeit:**
|
||||
**Endzeit:**
|
||||
|
|
@ -1,24 +1,26 @@
|
|||
# HTML Witze-Ticker
|
||||
# HTML Programmer Quotes
|
||||
|
||||
Minimales HTML-Skelett — Struktur vorhanden, aber keine Logik.
|
||||
Die Witz-Anzeige, der Timer und die Buttons fehlen noch vollständig.
|
||||
Zitate-Array, Timer und Buttons fehlen noch vollständig.
|
||||
|
||||
## Aktueller Stand
|
||||
|
||||
```
|
||||
jokes.html HTML-Skelett: <h1> + leeres <div id="joke"> — kein JavaScript, kein CSS
|
||||
quotes.html HTML-Skelett: <h1> + leeres <div id="quote"> — kein JavaScript, kein CSS
|
||||
```
|
||||
|
||||
## Demo: `/optimize --no-tests`
|
||||
|
||||
```
|
||||
/optimize "Ergänze jokes.html um eine vollständige Witz-Anzeige:
|
||||
- JavaScript-Array mit mind. 20 englischen Originalwitzen (inline, kein externes API)
|
||||
- Beim Laden: sofort zufälliger Witz
|
||||
/optimize "Erstelle einen Zitate-Ticker mit 25–30 echten Zitaten von bekannten
|
||||
Informatikern und Software-Entwicklern (Linus Torvalds, Donald Knuth,
|
||||
Martin Fowler, Brian Kernighan, Edsger Dijkstra, Alan Kay, Grace Hopper,
|
||||
Rob Pike u.a.). Jedes Zitat mit Autor-Angabe.
|
||||
- Beim Laden: sofort zufälliges Zitat
|
||||
- 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
|
||||
- Anzeige: Index (3/28) und Countdown-Sekunden bis zum nächsten Zitat
|
||||
- Button 'Next Quote' zum manuellen Weiterblättern
|
||||
Kein Framework, kein Build-Tool — reines HTML/CSS/JS." \
|
||||
--no-tests
|
||||
```
|
||||
|
|
@ -31,7 +33,7 @@ jokes.html HTML-Skelett: <h1> + leeres <div id="joke"> — kein JavaScript, ke
|
|||
## Folge-Demo 1: `/patch` für Kleinstergänzung
|
||||
|
||||
```
|
||||
/patch "Füge einen grünen 'Vorheriger Witz'-Button hinzu."
|
||||
/patch "Füge einen grünen 'Previous Quote'-Button hinzu."
|
||||
```
|
||||
|
||||
Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
|
||||
|
|
@ -42,8 +44,9 @@ Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
|
|||
/optimize "Ersetze das bisherige CSS durch Tailwind CSS (CDN-Einbindung via Play CDN).
|
||||
Gestalte ein modernes, responsives Layout:
|
||||
- Zentrierte Card mit abgerundeten Ecken und Schatten
|
||||
- Witz-Text groß und gut lesbar, Index und Countdown kleiner darunter
|
||||
- Buttons nebeneinander, farblich klar unterscheidbar (blau / grau)
|
||||
- Zitat-Text groß und kursiv, Autor-Name kleiner darunter
|
||||
- Index und Countdown noch kleiner in einer Meta-Zeile
|
||||
- Buttons nebeneinander, farblich klar unterscheidbar (blau / grün)
|
||||
- Auf Mobilgeräten (< 640px) volle Breite, auf Desktop max. 600px
|
||||
Alle JavaScript-Funktionen (Timer, Fade, Buttons) bleiben unverändert." \
|
||||
--no-tests
|
||||
|
|
@ -58,13 +61,13 @@ Zeigt eine gezielte Minimaländerung ohne vollen Judge-Loop.
|
|||
|
||||
```bash
|
||||
# Im Browser öffnen:
|
||||
xdg-open jokes.html
|
||||
xdg-open quotes.html
|
||||
# oder:
|
||||
firefox jokes.html
|
||||
firefox quotes.html
|
||||
```
|
||||
|
||||
Prüfen:
|
||||
- Beim Laden erscheint sofort ein Witz
|
||||
- Beim Laden erscheint sofort ein Zitat mit Autor
|
||||
- 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
|
||||
- Nach 60 Sekunden erscheint automatisch ein neues Zitat mit Fade
|
||||
- „Next Quote"-Button wechselt sofort und setzt den Timer zurück
|
||||
11
examples/html-quote-ticker/quotes.html
Normal file
11
examples/html-quote-ticker/quotes.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Programmer Quotes</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Programmer Quotes</h1>
|
||||
<div id="quote"><!-- TODO: quote here --></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,7 +19,7 @@ done
|
|||
|
||||
echo "Stelle Examples-Ausgangszustand wieder her..."
|
||||
|
||||
for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-joke-ticker; do
|
||||
for dir in python-calculator rust-wordcount go-fibonacci c-linkedlist bash-sysreport html-quote-ticker; do
|
||||
path="$EXAMPLES/$dir"
|
||||
if [ -d "$path/.git" ]; then
|
||||
rm -rf "$path/.git"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue