M294 Block 01

JavaScript

'use strict';


let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

document.querySelector('.check').addEventListener('click', function () {
    const guess = document.querySelector('.guess').value;
    console.log(guess, typeof guess);

    if (!guess) {
        document.querySelector('.message').textContent = '😑 No number!';
    }
    else if (guess == secretNumber) {
        document.querySelector('.message').textContent = '🎉 Correct Number!';
    }
    else if (guess > secretNumber) {
        if (score > 1) {
            document.querySelector('.message').textContent = '📈 Too high!';
            score--;
            document.querySelector('.score').textContent = score;
        }
        else {
            document.querySelector('.message').textContent = 'You lost the game!';
            document.querySelector('.score').textContent = 0;
        }
    }
    else if (guess < secretNumber) {
        if (score > 1) {
            document.querySelector('.message').textContent = '📉 Too low!';
            score--;
            document.querySelector('.score').textContent = score;
        } 
        else {
            document.querySelector('.message').textContent = 'You lost the game!';
            document.querySelector('.score').textContent = 0;
        }
    }
});

1) Strenger Modus aktivieren

'use strict';

• Schaltet strengere Regeln ein.

• Verhindert Fehler wie ungewollt globale Variablen.

---

2) Startwerte für das Spiel

let secretNumber = Math.trunc(Math.random() * 20) + 1; let score = 20; let highscore = 0;

• Math.random() → Zufallszahl von 0 bis <1

• * 20 → Bereich 0–19

• Math.trunc() entfernt Dezimalstellen

• + 1 → Bereich 1–20

• score zählt Fehlversuche, highscore speichert den Rekord.

---

3) Klick-Event für den Check-Button

document.querySelector('.check').addEventListener('click', function () { ... });

• Wartet auf einen Klick.

• Führt danach den gesamten Spiel-Check aus.

---

4) Eingabe auslesen

const guess = document.querySelector('.guess').value;

• Holt den Wert aus dem Input-Feld .guess.

• Rückgabe ist ein String, der die eingegebene Zahl enthält.

---

5) Keine Eingabe

if (!guess) { document.querySelector('.message').textContent = '😑 No number!'; }

• !guess ist wahr, wenn das Feld leer ist.

• Setzt eine passende Meldung im UI.

---

6) Richtige Zahl getroffen

else if (guess == secretNumber) { document.querySelector('.message').textContent = '🎉 Correct Number!'; }

• Vergleich der Eingabe mit der geheimen Zahl.

• Bei Erfolg → Glückwunsch-Nachricht.

---

7) Zahl zu gross

else if (guess > secretNumber) { if (score > 1) { document.querySelector('.message').textContent = '📈 Too high!'; score--; document.querySelector('.score').textContent = score; } else { document.querySelector('.message').textContent = 'You lost the game!'; document.querySelector('.score').textContent = 0; } }

• Meldung „zu hoch“.

• Score wird reduziert.

• Wenn Punktestand aufgebraucht → Spiel verloren.

---

8) Zahl zu klein

else if (guess < secretNumber) { if (score > 1) { document.querySelector('.message').textContent = '📉 Too low!'; score--; document.querySelector('.score').textContent = score; } else { document.querySelector('.message').textContent = 'You lost the game!'; document.querySelector('.score').textContent = 0; } }

• Gleiche Struktur wie bei „zu hoch“.

• Meldung und Score werden entsprechend angepasst.

---

9) Aktualisierung des UI

Beispiel:

document.querySelector('.message').textContent = '📉 Too low!'; document.querySelector('.score').textContent = score;

• Texte werden direkt im Browser geändert.

• UI reagiert sofort auf jede Eingabe.