📊 Projekt: Der Klick-Zähler

Name: ____________________ Datum: ____________________

In diesem Projekt bauen wir unsere eigene kleine Anwendung: Ein Zählwerkzeug.

Klick-Zähler

Ein einfaches JavaScript-Projekt.

0

Schritt 1: Die HTML-Struktur

Jedes Web-Projekt beginnt mit dem Skelett (HTML). Wir benötigen:

💡 Tipp: Nutze für alle Buttons, die wir später steuern wollen, eindeutige IDs wie btn-plus, btn-minus und btn-reset.
🛠️ Aufgabe 1

Erstelle eine neue Datei zaehler.html.

Schreibe den GrundgerĂĽst-Code (HTML5). FĂĽge die genannten Elemente in den Body ein und gib ihnen sinnvolle IDs.

<!DOCTYPE html>
<html>
<head>
    <title>Klick-Zähler</title>
</head>
<body>
    <div class="container">
        <h3>Klick-Zähler</h3>
        <!-- Hier kommt deine ID rein -->
        <div id="zaehler-anzeige">0</div>
        
        <!-- Buttons -->
        <button id="btn-plus">+ HinzufĂĽgen</button>
        <button id="btn-minus">- Abziehen</button>
        <br><br>
        <button id="btn-reset">Reset</button>
    </div>
</body>
</html>

Schritt 2: Das Styling (CSS)

Das HTML sieht aktuell noch langweilig aus. Lass uns es verschönern.

Wir möchten:

🛠️ Aufgabe 2

Erstelle eine externe Datei style.css und binde sie im Head deiner HTML-Datei ein.

Versuche, folgendes Aussehen nachzubauen:

body {
    font-family: sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

.container {
    background-color: white;
    padding: 20px;
    max-width: 300px;
    margin: 50px auto; 
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#zaehler-anzeige {
    font-size: 3rem;
    font-weight: bold;
    margin: 20px 0;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    margin: 5px;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 5px;
}

#btn-plus { background-color: #2ecc71; }
#btn-minus { background-color: #e74c3c; }
#btn-reset { background-color: #95a5a6; }

Schritt 3: Die Logik (JavaScript)

Jetzt bringen wir die Seite zum Leben! Das geschieht in drei Teilen:

  1. Daten speichern: Wir erstellen eine Variable, die den aktuellen Zählerstand speichert.
  2. Elemente finden: Wir verbinden JS mit unseren HTML-IDs.
  3. Events: Wir sagen den Buttons, was sie tun sollen.
🛠️ Aufgabe 3

Erstelle eine externe Datei script.js und binde sie ganz unten in deinem Body ein.

a) Die Variable anlegen

Ganz oben im JS-Code:

let counter = 0;

b) Die HTML-Elemente finden

Wir nutzen document.getElementById(), um Zugriff auf die Anzeige und die Buttons zu bekommen:

let anzeigeElement = document.getElementById("zaehler-anzeige");
let btnPlus = document.getElementById("btn-plus");
let btnMinus = document.getElementById("btn-minus");
let btnReset = document.getElementById("btn-reset");

c) Event Listener fĂĽr "+ HinzufĂĽgen"

Wenn man auf Plus klickt, soll die Variable counter um 1 erhöht werden:

btnPlus.addEventListener("click", function() {
    counter = counter + 1;   // oder kurz: counter++;
    anzeigeElement.innerHTML = counter;
});

Schritt 4: Vollständigkeit & Erweiterung

Jetzt fehlen noch die Funktionen fĂĽr den Minus- und den Reset-Button.

🛠️ Aufgabe 4

Vervollständige deine script.js mit den fehlenden Event Listeners.

Befehle:

Beispielloesung fĂĽr Reset:

btnReset.addEventListener("click", function() {
    counter = 0;
    anzeigeElement.innerHTML = counter;
});
🌟 Profi-Tipp: Versuche in der Funktion für den Minus-Button eine if/else-Abfrage einzubauen: if (counter > 0) { ... }. So verhinderst du, dass die Zahl im Minus landet!