Praxisprojekt - Todo-App
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
Abschnitt betitelt „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
Abschnitt betitelt „Projektstruktur“Wir erstellen drei Dateien:
index.html- Die Struktur unserer Appstyle.css- Das Designscript.js- Die Funktionalität
HTML-Grundstruktur
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „JavaScript-Funktionalität“Hier ist der JavaScript-Code, der unsere Todo-App zum Leben erweckt:
// DOM-Elemente auswählenconst taskInput = document.getElementById('taskInput');const addTaskButton = document.getElementById('addTask');const taskList = document.getElementById('taskList');
// Todos aus dem localStorage ladenlet todos = JSON.parse(localStorage.getItem('todos')) || [];
// Funktion zum Speichern der Todos im localStoragefunction saveTodos() { localStorage.setItem('todos', JSON.stringify(todos));}
// Funktion zum Anzeigen der Todos in der Listefunction 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 Todosfunction addTask() { const text = taskInput.value.trim();
if (text !== '') { todos.push({ text: text, completed: false });
saveTodos(); renderTodos(); taskInput.value = ''; }}
// Funktion zum Umschalten des "Erledigt"-Statusfunction toggleComplete(index) { todos[index].completed = !todos[index].completed; saveTodos(); renderTodos();}
// Funktion zum Löschen eines Todosfunction deleteTask(index) { todos.splice(index, 1); saveTodos(); renderTodos();}
// Event-Listener hinzufügenaddTaskButton.addEventListener('click', addTask);
// Event-Listener für das Drücken der Enter-TastetaskInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { addTask(); }});
// Initial Todos anzeigenrenderTodos();Übung: Erweitere die Todo-App
Abschnitt betitelt „Übung: Erweitere die Todo-App“Zusammenfassung
Abschnitt betitelt „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!