Lernziele

• Sie können HTML, CSS und JavaScript zu einem eigenständigen kleinen Projekt zusammenführen.
• Sie können ein Problem in Teilaufgaben zerlegen und schrittweise lösen.
• Sie haben mindestens ein eigenes kleines Werkzeug oder Spiel gebaut, das Sie zeigen können.

Sie haben jetzt das ganze Werkzeug:

• HTML — Struktur und Formulare
• CSS — Aussehen und Layout
• JavaScript — Logik, DOM-Zugriff, Events

Zeit, etwas Eigenes zu bauen. Wählen Sie eines der drei Projekte unten — oder denken Sie sich Ihr eigenes aus.

So gehen Sie vor

1. Klein anfangen. Erst das HTML-Grundgerüst, dann die einfachste Funktion, dann erst Stil und Bonus-Features.
2. Oft testen. Klicken Sie nach jeder kleinen Änderung "Run" und schauen, ob es noch tut.
3. console.log() ist Ihr Freund. Wenn etwas nicht klappt, loggen Sie zwischendurch Werte und schauen in die Konsole (F12).
4. Stil zum Schluss. Erst muss die Logik laufen — Farben und Animationen kommen am Ende.

Projekt 1: Memory-Spiel 🧠

Ein klassisches Memory-Spiel. Aufgedeckt werden zwei Karten gleichzeitig — passen sie zusammen, bleiben sie offen. Sonst werden sie wieder umgedreht.

Mindest-Funktionsumfang:

• 8 Karten (4 Paare) als anklickbare Boxen.
• Beim Klick wird die Karte aufgedeckt.
• Bei zwei aufgedeckten Karten: passen sie zusammen → bleiben offen. Sonst → nach 1 Sekunde wieder zu.
• Wenn alle Paare gefunden sind: Gratulation anzeigen.

Bonus:

• Zugzähler.
• Karten zufällig anordnen (Math.random() + array.sort).
• 12 oder 16 Karten.
• Animation beim Umdrehen.

Tipp: zeitverzögert ausführen

Mit setTimeout(funktion, 1000) können Sie eine Funktion nach 1 Sekunde (1000 ms) ausführen lassen. Das brauchen Sie, um falsche Paare wieder zu schliessen:

setTimeout(function() {
  karte1.classList.remove("offen");
  karte2.classList.remove("offen");
}, 1000);

Projekt 2: Quiz-App 🎓

Eine Quiz-App mit fünf bis zehn Fragen zu einem Thema Ihrer Wahl — Erdkunde, Geschichte, Pop-Kultur, Informatik...

Mindest-Funktionsumfang:

• Eine Frage nach der anderen anzeigen, mit drei oder vier Antwortmöglichkeiten.
• Beim Klick auf eine Antwort: zeigen, ob richtig oder falsch.
• Punkte zählen.
• Am Schluss: Gesamtergebnis und ein passender Spruch ("5/5 — Genie!", "0/5 — Auch das ist eine Leistung").

Bonus:

• Erklärung zu jeder Antwort.
• Fragen in zufälliger Reihenfolge.
• Highscore in localStorage speichern (Vorsicht: das funktioniert nicht in der Eduskript-Vorschau, aber wenn Sie den Code lokal abspeichern schon).

Tipp: Fragen als Datenstruktur

Speichern Sie alle Fragen in einem Array von Objekten. So können Sie elegant durch sie iterieren:

const fragen = [
  {
    frage: "Wie heisst der höchste Berg der Schweiz?",
    antworten: ["Eiger", "Dufourspitze", "Matterhorn", "Piz Bernina"],
    richtig: 1
  },
  {
    frage: "In welchem Jahr wurde die Schweiz gegründet?",
    antworten: ["1291", "1648", "1848", "1499"],
    richtig: 0
  }
  // ...
];

Projekt 3: Pomodoro-Timer 🍅

Ein Timer für die Pomodoro-Lernmethode: 25 Minuten konzentriert arbeiten, dann 5 Minuten Pause.

Mindest-Funktionsumfang:

• Anzeige der verbleibenden Zeit (mm:ss).
• Knopf "Start", "Pause", "Reset".
• Wenn 25 Minuten um sind: Wechsel automatisch in den Pause-Modus mit 5 Minuten.
• Wenn die Pause um ist: zurück in den Arbeitsmodus.

Bonus:

• Visuell unterschiedlich gestaltete Modi (rot für Arbeit, grün für Pause).
• Anzahl abgeschlossene Pomodoros zählen.
• Browser-Notification beim Wechsel (new Notification("...")).
• Konfigurierbare Längen.

Tipp: Sekunden-Ticker mit setInterval

let sekunden = 25 * 60;

const tickerId = setInterval(function() {
  sekunden = sekunden - 1;
  anzeigeAktualisieren();
  if (sekunden <= 0) {
    clearInterval(tickerId);
    // Wechsel in nächste Phase
  }
}, 1000);

setInterval ruft die Funktion alle 1000 ms auf. Mit clearInterval(tickerId) stoppen Sie den Ticker.

Eigene Idee?

Wenn keines der drei Projekte Sie reizt: Bauen Sie etwas Eigenes. Zwei Bedingungen:

1. Es nutzt alle drei Sprachen (HTML, CSS, JavaScript).
2. Es reagiert auf Eingaben der Nutzerin (Klicks, Tastatur, Formular).

Inspirations-Liste:

• 🎲 Würfel-Simulator (mit beliebiger Augenzahl, Statistik nach n Würfen)
• 🔢 Tic-Tac-Toe (zwei Spieler an einem Computer)
• 🌡️ Einheiten-Umrechner (CHF↔EUR, °C↔°F, km/h↔m/s, ...)
• 📅 Geburtstags-Countdown
• 🎨 Farbpaletten-Generator (Klick erzeugt zufällige Farbschemen)
• ✏️ Text-Statistik (Wörter, Zeichen, Lesezeit zählen)
• 🎵 Mini-Klavier (auf Tastatur-Tasten reagieren, einfache Töne mit der Web Audio API spielen)
• 🧮 Zinses-Zins-Rechner

Abgabe

Wenn Sie zufrieden sind:

1. Kopieren Sie den ganzen Code (HTML, CSS, JS) in eine einzige Datei index.html auf Ihrem Computer.
2. Öffnen Sie die Datei doppelklickend im Browser, um zu prüfen, dass sie auch ausserhalb von Eduskript läuft.
3. Geben Sie sie wie besprochen ab.

Die schönsten Projekte landen in der Hall of Fame! 🍾🎇