Kapitel 20: Basis-Projekte (Wissen festigen)

In diesem Kapitel programmieren wir kleine Projekte zur Festigung Ihres Wissens.

20.1 Ratespiel (Zahlen raten)

Ein einfaches Spiel: Der Computer denkt sich eine Zahl, und der Spieler muss sie erraten.

HTML-Struktur

<h1>Ratespiel: Zahlen raten</h1>
<p>Ich habe mir eine Zahl zwischen 1 und 100 gedacht. Kannst du sie erraten?</p>
<input type="number" id="tipp" min="1" max="100" placeholder="Dein Tipp...">
<button id="ratenBtn">Raten</button>
<button id="neuBtn">Neues Spiel</button>
<p id="hinweis"></p>
<p>Versuche: <span id="versuche">0</span></p>

JavaScript-Logik

let zufallszahl = 0;
let anzahlVersuche = 0;
let spielBeendet = false;

let tippInput = document.getElementById("tipp");
let ratenBtn = document.getElementById("ratenBtn");
let neuBtn = document.getElementById("neuBtn");
let hinweis = document.getElementById("hinweis");
let versucheAnzeige = document.getElementById("versuche");

// Neues Spiel starten
function neuesSpiel() {
    zufallszahl = Math.floor(Math.random() * 100) + 1;
    anzahlVersuche = 0;
    spielBeendet = false;
    hinweis.textContent = "";
    versucheAnzeige.textContent = "0";
    tippInput.value = "";
    tippInput.focus();
    console.log("Zufallszahl (zum Testen):", zufallszahl);
}

// Rate-Versuch
ratenBtn.addEventListener("click", function() {
    if (spielBeendet) {
        hinweis.textContent = "Das Spiel ist beendet. Starte ein neues Spiel!";
        return;
    }

    let tipp = parseInt(tippInput.value);

    // Validierung
    if (isNaN(tipp) || tipp < 1 || tipp > 100) {
        hinweis.textContent = "Bitte gib eine gültige Zahl zwischen 1 und 100 ein!";
        return;
    }

    anzahlVersuche++;
    versucheAnzeige.textContent = anzahlVersuche;

    // Prüfen
    if (tipp === zufallszahl) {
        hinweis.textContent = `Richtig! Du hast die Zahl ${zufallszahl} in ${anzahlVersuche} Versuchen erraten!`;
        hinweis.style.color = "grün";
        spielBeendet = true;
    } else if (tipp < zufallszahl) {
        hinweis.textContent = "Zu klein! Versuche es erneut.";
        hinweis.style.color = "blau";
    } else {
        hinweis.textContent = "Zu groß! Versuche es erneut.";
        hinweis.style.color = "blau";
    }

    tippInput.value = "";
    tippInput.focus();
});

// Neues Spiel Button
neuBtn.addEventListener("click", neuesSpiel);

// Enter-Taste zum Raten
tippInput.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        ratenBtn.click();
    }
});

// Spiel beim Laden starten
neuesSpiel();

Projekt-Erweiterung (Zusatzaufgabe)

Erweitern Sie das Spiel mit folgenden Funktionen:

1. Punktestand: Beginnen Sie mit 100 Punkten, abzüglich 5 Punkte pro Versuch
2. Höchststand: Speichern Sie den besten Punktestand im localStorage
3. Schwierigkeitsgrade: Einfach (1-50), Mittel (1-100), Schwer (1-200)

20.2 Einfacher Taschenrechner

Ein funktionsfähiger Taschenrechner mit Grundrechenarten.

HTML-Struktur

<h1>Taschenrechner</h1>
<input type="text" id="anzeige" value="0" readonly>
<div>
    <button class="zahl">7</button>
    <button class="zahl">8</button>
    <button class="zahl">9</button>
    <button class="operator">/</button>
</div>
<div>
    <button class="zahl">4</button>
    <button class="zahl">5</button>
    <button class="zahl">6</button>
    <button class="operator">×</button>
</div>
<div>
    <button class="zahl">1</button>
    <button class="zahl">2</button>
    <button class="zahl">3</button>
    <button class="operator">-</button>
</div>
<div>
    <button class="zahl">0</button>
    <button id="clearBtn">C</button>
    <button id="gleichBtn">=</button>
    <button class="operator">+</button>
</div>

CSS-Styling (Kurz)

#anzeige {
    width: 200px;
    height: 40px;
    font-size: 20px;
    text-align: right;
    margin-bottom: 10px;
}

button {
    width: 50px;
    height: 50px;
    font-size: 18px;
    margin: 2px;
}

JavaScript-Logik

let anzeige = document.getElementById("anzeige");
let zahlButtons = document.querySelectorAll(".zahl");
let operatorButtons = document.querySelectorAll(".operator");
let clearBtn = document.getElementById("clearBtn");
let gleichBtn = document.getElementById("gleichBtn");

let aktuellerWert = "0";
let vorherigerWert = "";
let operator = null;
let wartetAufNaechsteEingabe = false;

// Zahl-Buttons
zahlButtons.forEach(function(button) {
    button.addEventListener("click", function() {
        let zahl = button.textContent;

        if (wartetAufNaechsteEingabe) {
            aktuellerWert = zahl;
            wartetAufNaechsteEingabe = false;
        } else {
            aktuellerWert = aktuellerWert === "0" ? zahl : aktuellerWert + zahl;
        }

        anzeige.value = aktuellerWert;
    });
});

// Operator-Buttons
operatorButtons.forEach(function(button) {
    button.addEventListener("click", function() {
        if (operator !== null && !wartetAufNaechsteEingabe) {
            berechne();
        }

        vorherigerWert = aktuellerWert;
        operator = button.textContent;
        wartetAufNaechsteEingabe = true;
    });
});

// Gleich-Button
gleichBtn.addEventListener("click", function() {
    if (operator === null || wartetAufNaechsteEingabe) {
        return;
    }

    berechne();
    operator = null;
    vorherigerWert = "";
});

// Clear-Button
clearBtn.addEventListener("click", function() {
    aktuellerWert = "0";
    vorherigerWert = "";
    operator = null;
    wartetAufNaechsteEingabe = false;
    anzeige.value = aktuellerWert;
});

// Berechnungsfunktion
function berechne() {
    let vorherig = parseFloat(vorherigerWert);
    let aktuell = parseFloat(aktuellerWert);
    let ergebnis = 0;

    switch (operator) {
        case "+":
            ergebnis = vorherig + aktuell;
            break;
        case "-":
            ergebnis = vorherig - aktuell;
            break;
        case "×":
            ergebnis = vorherig * aktuell;
            break;
        case "/":
            if (aktuell === 0) {
                ergebnis = "Fehler";
            } else {
                ergebnis = vorherig / aktuell;
            }
            break;
    }

    aktuellerWert = ergebnis.toString();
    anzeige.value = aktuellerWert;
}

20.3 Aufgabenliste (TODO List)

Eine einfache Aufgabenverwaltung.

HTML-Struktur

<h1>Meine Aufgabenliste</h1>
<input type="text" id="aufgabeInput" placeholder="Neue Aufgabe...">
<button id="hinzufuegenBtn">Hinzufügen</button>
<ul id="aufgabenListe"></ul>
<p>Gesamt: <span id="gesamtAnzahl">0</span> | Erledigt: <span id="erledigtAnzahl">0</span></p>

JavaScript-Logik

let aufgabeInput = document.getElementById("aufgabeInput");
let hinzufuegenBtn = document.getElementById("hinzufuegenBtn");
let aufgabenListe = document.getElementById("aufgabenListe");
let gesamtAnzahl = document.getElementById("gesamtAnzahl");
let erledigtAnzahl = document.getElementById("erledigtAnzahl");

let aufgaben = JSON.parse(localStorage.getItem("aufgaben")) || [];

// Aufgaben anzeigen
function zeigeAufgaben() {
    aufgabenListe.innerHTML = "";

    aufgaben.forEach(function(aufgabe, index) {
        let li = document.createElement("li");
        li.style.textDecoration = aufgabe.erledigt ? "line-through" : "none";

        let checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.checked = aufgabe.erledigt;
        checkbox.addEventListener("change", function() {
            aufgaben[index].erledigt = checkbox.checked;
            speichereAufgaben();
            zeigeAufgaben();
        });

        let textSpan = document.createElement("span");
        textSpan.textContent = aufgabe.text;
        textSpan.style.marginLeft = "10px";

        let loeschenBtn = document.createElement("button");
        loeschenBtn.textContent = "Löschen";
        loeschenBtn.style.marginLeft = "10px";
        loeschenBtn.addEventListener("click", function() {
            aufgaben.splice(index, 1);
            speichereAufgaben();
            zeigeAufgaben();
        });

        li.appendChild(checkbox);
        li.appendChild(textSpan);
        li.appendChild(loeschenBtn);
        aufgabenListe.appendChild(li);
    });

    aktualisiereStatistik();
}

// Aufgaben speichern
function speichereAufgaben() {
    localStorage.setItem("aufgaben", JSON.stringify(aufgaben));
}

// Statistik aktualisieren
function aktualisiereStatistik() {
    gesamtAnzahl.textContent = aufgaben.length;
    let erledigt = aufgaben.filter(a => a.erledigt).length;
    erledigtAnzahl.textContent = erledigt;
}

// Neue Aufgabe hinzufügen
hinzufuegenBtn.addEventListener("click", function() {
    let text = aufgabeInput.value.trim();

    if (text === "") {
        alert("Bitte gib eine Aufgabe ein!");
        return;
    }

    aufgaben.push({ text: text, erledigt: false });
    speichereAufgaben();
    zeigeAufgaben();
    aufgabeInput.value = "";
});

// Enter-Taste
aufgabeInput.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        hinzufuegenBtn.click();
    }
});

// Beim Laden anzeigen
zeigeAufgaben();

20.4 Bild-Slider

Ein automatischer Bild-Slider mit manueller Steuerung.

HTML-Struktur

<h1>Bild-Slider</h1>
<div id="sliderContainer">
    <img id="sliderBild" src="bild1.jpg" alt="Bild">
    <button id="prevBtn">Zurück</button>
    <button id="nextBtn">Weiter</button>
</div>
<div id="punkteContainer"></div>
<button id="autoBtn">Auto-Play: Aus</button>

CSS-Styling (Kurz)

#sliderContainer {
    position: relative;
    width: 500px;
    height: 300px;
}

#sliderBild {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

button {
    margin: 5px;
}

JavaScript-Logik

let bilder = ["bild1.jpg", "bild2.jpg", "bild3.jpg", "bild4.jpg"];
let aktuellerIndex = 0;
let autoPlayInterval = null;
let istAutoPlay = false;

let sliderBild = document.getElementById("sliderBild");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let autoBtn = document.getElementById("autoBtn");
let punkteContainer = document.getElementById("punkteContainer");

// Bild anzeigen
function zeigeBild(index) {
    if (index < 0) {
        index = bilder.length - 1;
    } else if (index >= bilder.length) {
        index = 0;
    }

    aktuellerIndex = index;
    sliderBild.src = bilder[aktuellerIndex];
    aktualisierePunkte();
}

// Vorheriges Bild
prevBtn.addEventListener("click", function() {
    zeigeBild(aktuellerIndex - 1);
});

// Nächstes Bild
nextBtn.addEventListener("click", function() {
    zeigeBild(aktuellerIndex + 1);
});

// Auto-Play umschalten
autoBtn.addEventListener("click", function() {
    if (istAutoPlay) {
        clearInterval(autoPlayInterval);
        istAutoPlay = false;
        autoBtn.textContent = "Auto-Play: Aus";
    } else {
        autoPlayInterval = setInterval(function() {
            zeigeBild(aktuellerIndex + 1);
        }, 3000);
        istAutoPlay = true;
        autoBtn.textContent = "Auto-Play: An";
    }
});

// Punkte (Indikatoren) erstellen
function erstellePunkte() {
    punkteContainer.innerHTML = "";

    bilder.forEach(function(bild, index) {
        let punkt = document.createElement("span");
        punkt.textContent = "●";
        punkt.style.cursor = "pointer";
        punkt.style.margin = "0 5px";
        punkt.style.color = index === aktuellerIndex ? "blau" : "grau";

        punkt.addEventListener("click", function() {
            zeigeBild(index);
        });

        punkteContainer.appendChild(punkt);
    });
}

// Punkte aktualisieren
function aktualisierePunkte() {
    let punkte = punkteContainer.children;
    for (let i = 0; i < punkte.length; i++) {
        punkte[i].style.color = i === aktuellerIndex ? "blau" : "grau";
    }
}

// Initialisierung
erstellePunkte();
zeigeBild(0);

20.5 Zufalliger Farbgenerator

Ein Tool, das zufällige Farben generiert.

HTML-Struktur

<h1>Zufalliger Farbgenerator</h1>
<div id="farbenAnzeige"></div>
<button id="generierenBtn">Farbe generieren</button>
<p>Hex-Code: <span id="hexCode">#FFFFFF</span></p>
<button id="kopierenBtn">Kopieren</button>

CSS-Styling (Kurz)

#farbenAnzeige {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 20px 0;
}

JavaScript-Logik

let farbenAnzeige = document.getElementById("farbenAnzeige");
let generierenBtn = document.getElementById("generierenBtn");
let hexCode = document.getElementById("hexCode");
let kopierenBtn = document.getElementById("kopierenBtn");

// Zufallige Farbe generieren
function generiereFarbe() {
    let buchstaben = "0123456789ABCDEF";
    let farbe = "#";

    for (let i = 0; i < 6; i++) {
        farbe += buchstaben[Math.floor(Math.random() * 16)];
    }

    return farbe;
}

// Farbe anzeigen
function zeigeFarbe() {
    let farbe = generiereFarbe();
    farbenAnzeige.style.backgroundColor = farbe;
    hexCode.textContent = farbe;
}

// Farbe generieren
generierenBtn.addEventListener("click", zeigeFarbe);

// Hex-Code kopieren
kopierenBtn.addEventListener("click", function() {
    navigator.clipboard.writeText(hexCode.textContent)
        .then(function() {
            alert("Hex-Code kopiert: " + hexCode.textContent);
        })
        .catch(function(err) {
            console.error("Fehler beim Kopieren:", err);
        });
});

// Beim Laden generieren
zeigeFarbe();

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Ratespiel programmieren (Zufallszahlen, Bedingungen)
• ✅ Taschenrechner bauen (Event-Handling, Logik)
• ✅ Aufgabenliste erstellen (DOM-Manipulation, localStorage)
• ✅ Bild-Slider implementieren (Intervalle, Navigation)
• ✅ Farbgenerator entwickeln (Zufall, DOM-Styling)

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir umfassende Projekte - größere Anwendungen zur Vertiefung!

---

Übung:

1. Erweitern Sie das Ratespiel mit Schwierigkeitsgraden
2. Fügen Sie dem Taschenrechner weitere Funktionen hinzu (Prozent, Dezimalzahlen)
3. Erweitern Sie die Aufgabenliste mit Kategorien
4. Fügen Sie dem Bild-Slider Übergangsanimationen hinzu
5. Erweitern Sie den Farbgenerator mit RGB- und HSL-Werten