U13 — Workflow-Training I: Begrüßung nach Tageszeit
Ziel dieser Übung
Sie bauen ein kleines JavaScript-Feature — eine Begrüßung, die sich nach der Tageszeit richtet — und bringen es in drei kompletten Roundtrips von VS Code über Forgejo bis auf den Server. Das Feature nutzt, was Sie aus u6/u7 kennen (Variablen, Bedingungen, DOM). Der eigentliche Trainingseffekt liegt im Ablauf: ändern → committen → syncen → prüfen → pullen — bis er sitzt.
Voraussetzung: u12 (VS Code & Git einrichten) ist abgeschlossen.
Schritte im Überblick
Jeder Roundtrip durchläuft dieselben Stationen:
1In VS Code bauen & committen & syncen
2Forgejo-GUI: Commit & Struktur prüfen
3Server: pullen & im Browser testen
- Roundtrip 1: Begrüßungstext nach Tageszeit anzeigen
- Roundtrip 2: Farbe wechselt mit der Tageszeit
- Roundtrip 3: README aktualisieren (Dokumentation!)
lokal 1.1 Feature in VS Code bauen
- Öffnen Sie Ihr Projekt in VS Code
- Fügen Sie in
index.html an passender Stelle (z. B. oben im <body>) ein leeres Element ein:
<p id="begruessung"></p>
- Öffnen Sie Ihre
script.js (bzw. js/script.js) und ergänzen Sie:
// Begruessung nach Tageszeit
const stunde = new Date().getHours();
let text;
if (stunde < 10) {
text = "Guten Morgen!";
} else if (stunde < 18) {
text = "Hallo, schön dass du da bist!";
} else {
text = "Guten Abend!";
}
document.getElementById("begruessung").textContent = text;
- Speichern und lokal testen: öffnen Sie die
index.html per Doppelklick im Browser — erscheint die Begrüßung?
lokal 1.2 Committen & syncen
- Source Control öffnen —
index.html und script.js erscheinen unter Changes
- Beide Dateien stagen (+)
- Commit-Nachricht:
Begruessung nach Tageszeit → Haken ✓
- Sync Changes
git 1.3 Im Forgejo-GUI prüfen
- git.md-phw.de → Ihr Repository
- Ist der Commit „Begruessung nach Tageszeit“ da?
- Klicken Sie auf den Commit — Forgejo zeigt Ihnen genau die geänderten Zeilen (grün = neu, rot = entfernt)
server 1.4 Pullen & testen
ssh -p 2222 isa##@edumake.de
cd ~/public_html
git pull
- Lesen Sie die Ausgabe: welche zwei Dateien wurden aktualisiert?
- Browser:
https://isa##.edumake.de → Hard Reload (Strg/Cmd + Shift + R)
- Begrüßung sichtbar? ✓ Roundtrip 1 geschafft
lokal 2.1 CSS-Klassen anlegen
Ergänzen Sie in Ihrer CSS-Datei (z. B. css/style.css) drei Klassen:
.morgen { color: #d97706; } /* warmes Orange */
.tag { color: #16a34a; } /* frisches Grün */
.abend { color: #4338ca; } /* tiefes Blau */
lokal 2.2 JavaScript erweitern
Erweitern Sie Ihren Code so, dass zur Begrüßung die passende Klasse gesetzt wird:
const el = document.getElementById("begruessung");
el.textContent = text;
if (stunde < 10) {
el.classList.add("morgen");
} else if (stunde < 18) {
el.classList.add("tag");
} else {
el.classList.add("abend");
}
Denkanstoß: Sie prüfen die Stunde jetzt zweimal — geht das auch in einem if/else-Block? (Freiwillige Verbesserung)
lokal 2.3 Lokal testen → stagen → committen (Farbe nach Tageszeit) → Sync
git 2.4 GUI-Check
Commit da? Diesmal sind drei Dateien betroffen (HTML aus Roundtrip 1 nicht mehr — warum eigentlich? Überlegen Sie kurz: Git überträgt nur, was sich seit dem letzten Commit geändert hat).
server 2.5 Pullen & testen
cd ~/public_html
git pull
git log --oneline -3
Browser mit Hard Reload — Begrüßung jetzt farbig? ✓ Roundtrip 2 geschafft
lokal 3.1 Dokumentieren
Ihr Projekt hat ein neues Feature — die README muss das wissen. Ergänzen Sie in README.md:
## Features
- Begruessung nach Tageszeit (script.js):
zeigt je nach Uhrzeit einen anderen Text
in einer anderen Farbe (index.html, css/style.css)
Stagen → Commit (README: Begruessungs-Feature dokumentiert) → Sync
git 3.2 Struktur-Abgleich im GUI
- Forgejo zeigt die README direkt auf der Repo-Startseite an — liest sie sich korrekt?
- Abgleich: Stimmt die in der README beschriebene Verzeichnis- und Dateistruktur mit dem überein, was im Repo liegt?
- Falls nicht: korrigieren (lokal in VS Code!) und erneut committen + syncen
server 3.3 Letzter Pull
cd ~/public_html
git pull
cat README.md
README aktuell auf dem Server? ✓ Roundtrip 3 geschafft — Training abgeschlossen!
Check: Sie haben jetzt dreimal denselben Ablauf durchlaufen. Können Sie ihn auswendig? Ändern → Stage → Commit → Sync → GUI-Check → Server-Pull → Hard Reload. Wenn ja: weiter zu u14 — Workflow-Training II (eigenständig).
