Interaktive Webseite bauen

Beispielprojekt: ein Wasser-Tracker. Ein Knopf zählt getrunkene Gläser, eine Anzeige und ein Balken zeigen den Stand von 8 Gläsern.

• Was sieht man?:HTML: Überschrift, Anzeige, Balken, Knopf — jedes Element, das JavaScript braucht, bekommt eine id.
• Wie sieht es aus?:CSS: Farben, Größen, Abstände — z. B. Höhe und Farbe des Balkens.
• Was passiert?:JavaScript: bei Klick zählen und Anzeige samt Balken aktualisieren.
• Drei Dateien:index.html bindet style.css im head und app.js am Ende des body ein.
• Zustand:Was sich das Programm merken muss, steht in einer Variablen: hier die Anzahl n.

Jede Interaktion folgt demselben Ablauf: Ereignis → Zustand ändern → Anzeige aktualisieren.

let n = 0;
const anz = document.querySelector("#anz");
const bar = document.querySelector("#bar");
document.querySelector("#plus").addEventListener("click", trinken);
function trinken() {
  n = n + 1;
  anz.textContent = n + " / 8 Gläser";
  bar.style.width = n * 12.5 + "%";
}

• 1. HTML:Gerüst schreiben und im Browser ansehen — noch ohne Gestaltung.
• 2. CSS:Gestaltung ergänzen; die ids aus dem HTML dienen als Selektoren.
• 3. JavaScript:Elemente holen, Listener anhängen, Funktion schreiben.
• Testen:nach jedem kleinen Schritt speichern, neu laden, Konsole prüfen.
• Erweitern:erst wenn alles läuft: z. B. bei 8 Gläsern eine Meldung, ein Knopf „Zurücksetzen“.

Ziehe den Griff unter der Bühne nach rechts (oder Pfeiltasten): Die fertige App wickelt sich in ihre drei Schichten ab. Solange sie zusammengesetzt ist, kannst du den Knopf „+1 Glas“ benutzen. Die farbigen ids zeigen, wo die Schichten sich verbinden.

Halte fest: Eine Web-App besteht aus drei Schichten — HTML für den Inhalt, CSS für das Aussehen, JavaScript für das Verhalten —, und die ids verbinden sie.