Praxisprojekt - Todo-App (Einfaches Beispiel)

In diesem Praxisprojekt werden wir unser erlerntes Wissen über JavaScript und DOM-Manipulation anwenden, um eine funktionale Todo-App zu erstellen. Dies ist ein klassisches Projekt für JavaScript-Anfänger und verbindet viele wichtige Konzepte in einer praktischen Anwendung.

Was wir bauen werden

Unsere Todo-App wird folgende Funktionen bieten:

Neue Aufgaben hinzufügen
Bestehende Aufgaben löschen
Aufgaben als erledigt markieren
Aufgaben im Browser speichern (mit localStorage)
Ansprechendes Design mit CSS

Projektstruktur

Wir erstellen drei Dateien:

index.html - Die Struktur unserer App
style.css - Das Design
script.js - Die Funktionalität

HTML-Grundstruktur

Hier ist die Basisstruktur für unsere Todo-App:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo-App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Meine Todo-Liste</h1>

        <div class="todo-input">
            <input type="text" id="taskInput" placeholder="Neue Aufgabe eingeben...">
            <button id="addTask">Hinzufügen</button>
        </div>

        <ul id="taskList">
            <!-- Hier werden die Todos dynamisch eingefügt -->
        </ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS-Styling

Hier ist ein einfaches, aber ansprechendes Styling für unsere App:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f5f5f5;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.todo-input {
    display: flex;
    margin-bottom: 20px;
}

input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
}

button {
    background: #4caf50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background: #45a049;
}

ul {
    list-style-type: none;
}

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

li:last-child {
    border-bottom: none;
}

li.completed span {
    text-decoration: line-through;
    color: #999;
}

.task-actions {
    display: flex;
    gap: 10px;
}

.delete-btn {
    background: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.delete-btn:hover {
    background: #d32f2f;
}

.complete-btn {
    background: #2196f3;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.complete-btn:hover {
    background: #0b7dda;
}

JavaScript-Funktionalität

Hier ist der JavaScript-Code, der unsere Todo-App zum Leben erweckt:

// DOM-Elemente auswählen
const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTask');
const taskList = document.getElementById('taskList');

// Todos aus dem localStorage laden
let todos = JSON.parse(localStorage.getItem('todos')) || [];

// Funktion zum Speichern der Todos im localStorage
function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

// Funktion zum Anzeigen der Todos in der Liste
function renderTodos() {
    // Taskliste leeren
    taskList.innerHTML = '';

    // Durch alle Todos iterieren und sie anzeigen
    todos.forEach((todo, index) => {
        const li = document.createElement('li');
        if (todo.completed) {
            li.classList.add('completed');
        }

        // Task-Text
        const span = document.createElement('span');
        span.textContent = todo.text;
        li.appendChild(span);

        // Task-Aktionen (Buttons)
        const actions = document.createElement('div');
        actions.classList.add('task-actions');

        // "Erledigt" Button
        const completeBtn = document.createElement('button');
        completeBtn.classList.add('complete-btn');
        completeBtn.textContent = todo.completed ? 'Wiederherstellen' : 'Erledigt';
        completeBtn.addEventListener('click', () => toggleComplete(index));

        // "Löschen" Button
        const deleteBtn = document.createElement('button');
        deleteBtn.classList.add('delete-btn');
        deleteBtn.textContent = 'Löschen';
        deleteBtn.addEventListener('click', () => deleteTask(index));

        // Buttons zur Aktionsleiste hinzufügen
        actions.appendChild(completeBtn);
        actions.appendChild(deleteBtn);

        // Aktionsleiste zum Listenelement hinzufügen
        li.appendChild(actions);

        // Listenelement zur Liste hinzufügen
        taskList.appendChild(li);
    });
}

// Funktion zum Hinzufügen eines neuen Todos
function addTask() {
    const text = taskInput.value.trim();

    if (text !== '') {
        todos.push({
            text: text,
            completed: false
        });

        saveTodos();
        renderTodos();
        taskInput.value = '';
    }
}

// Funktion zum Umschalten des "Erledigt"-Status
function toggleComplete(index) {
    todos[index].completed = !todos[index].completed;
    saveTodos();
    renderTodos();
}

// Funktion zum Löschen eines Todos
function deleteTask(index) {
    todos.splice(index, 1);
    saveTodos();
    renderTodos();
}

// Event-Listener hinzufügen
addTaskButton.addEventListener('click', addTask);

// Event-Listener für das Drücken der Enter-Taste
taskInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        addTask();
    }
});

// Initial Todos anzeigen
renderTodos();

Übung: Erweitere die Todo-App

Zusammenfassung

In diesem Praxisprojekt haben wir eine vollständige Todo-App erstellt, die verschiedene JavaScript- und DOM-Konzepte verbindet:

DOM-Manipulation zum dynamischen Erstellen und Ändern von Elementen
Event-Handling für Buttons und Benutzereingaben
localStorage zur Datenpersistenz im Browser
Bedingtes Styling basierend auf dem Status der Aufgaben
Array-Methoden zur Verwaltung der Todo-Liste

Dieses Projekt bietet eine solide Grundlage, auf der du aufbauen kannst, um komplexere Webanwendungen zu entwickeln. Experimentiere mit weiteren Funktionen und Verbesserungen, um deine JavaScript-Fähigkeiten weiter zu stärken!