JavaScript 12 — Mini-Projekt

In dieser letzten Lektion setzt du dein Wissen praktisch um. Du entwickelst ein komplettes, kleines JavaScript-Projekt, das DOM-Manipulation, Events, Funktionen, Arrays/Objekte und saubere Struktur vereint. Der Fokus liegt nicht auf „vielen Features“, sondern auf sauberem Denken und korrektem Aufbau.

1. Projektziel

Ziel.
Entwickle eine interaktive To-Do-Liste, die Aufgaben hinzufügen, anzeigen und entfernen kann — ohne Seiten-Reload.

Das Projekt soll zeigen, dass du:

DOM-Elemente auswählen und verändern kannst
Events korrekt verwendest
Daten strukturiert speicherst
Code in Funktionen aufteilst

2. Funktionsumfang

Die To-Do-Liste soll folgende Funktionen besitzen:

Aufgabe über ein Eingabefeld hinzufügen
Aufgabenliste dynamisch anzeigen
Einzelne Aufgaben löschen
Leeres Eingabefeld verhindern

Optional (Bonus): Aufgaben als „erledigt“ markieren.

3. Projektstruktur

Eine saubere Struktur hilft auch bei kleinen Projekten.

todo/
  index.html
  style.css
  app.js

4. HTML-Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>To-Do Liste</title>
  <script defer src="app.js"></script>
</head>
<body>

  <h1>Meine To-Do-Liste</h1>

  <input id="todoInput" type="text" placeholder="Neue Aufgabe">
  <button id="addBtn">Hinzufügen</button>

  <ul id="todoList"></ul>

</body>
</html>

5. JavaScript-Grundlogik

Alle Logik kommt in app.js. Wir beginnen mit DOM-Zugriffen und einer Datenstruktur.

document.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("todoInput");
  const button = document.getElementById("addBtn");
  const list = document.getElementById("todoList");

  const todos = [];
});

6. Aufgabe hinzufügen

Beim Klick auf den Button wird der Text gelesen, geprüft und gespeichert.

button.addEventListener("click", () => {
  const text = input.value.trim();

  if (text === "") return;

  todos.push(text);
  input.value = "";

  renderTodos();
});

7. Aufgaben rendern

Die Anzeige der Liste erfolgt über eine eigene Funktion.

function renderTodos() {
  list.innerHTML = "";

  todos.forEach((todo, index) => {
    const li = document.createElement("li");
    li.textContent = todo;

    const delBtn = document.createElement("button");
    delBtn.textContent = "✕";

    delBtn.addEventListener("click", () => {
      removeTodo(index);
    });

    li.appendChild(delBtn);
    list.appendChild(li);
  });
}

8. Aufgaben entfernen

Das Entfernen geschieht über den Index im Array.

function removeTodo(index) {
  todos.splice(index, 1);
  renderTodos();
}

Hier siehst du klar das Zusammenspiel von Datenstruktur → Logik → DOM.

9. Erweiterungen (Bonus)

Enter-Taste zum Hinzufügen
Erledigt-Status (CSS-Klasse)
Speichern im LocalStorage
Zähler für offene Aufgaben

Bonus-Idee:

li.classList.toggle("done");

10. Typische Fehler

DOM-Elemente vor DOMContentLoaded verwenden
Logik und DOM-Code vermischen
Array direkt im DOM manipulieren
Keine Wiederverwendung von Funktionen

11. Reflexion

Dieses Projekt ist klein — aber realistisch.

Wenn du dieses Projekt selbstständig umsetzen kannst, beherrschst du die Grundlagen von JavaScript im Browser. Alles Weitere ist Ausbau, nicht Neuanfang.

12. Zusammenfassung

JavaScript steuert Verhalten und Logik
Daten leben in Variablen und Arrays
DOM ist nur die Darstellung
Saubere Struktur ist wichtiger als Features

Ein gutes Projekt ist nicht komplex — sondern klar gedacht.