Eine ungeordnete Liste in HTML wird mit dem `<ul>`-Tag erstellt, und die einzelnen Listenelemente werden mit dem `<li>`-Tag markiert. Hier ist ein einfaches Beispiel: ```html <!DOCTYPE... [mehr]
Wie erstellt man eine To-Do-List in JavaScript?
AntwortUm eine To-Do-Liste in JavaScript zu erstellen, kannst du HTML, CSS und JavaScript kombinieren. Hier ist ein einfaches Beispiel: 1. **HTML**: Erstelle die Struktur der To-Do-Liste. 2. **CSS**: Style die To-Do-Liste. 3. **JavaScript**: Füge die Funktionalität hinzu. ### HTML ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do Liste</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="todo-container"> <h1>To-Do Liste</h1> <input type="text" id="todo-input" placeholder="Neue Aufgabe hinzufügen..."> <button id="add-button">Hinzufügen</button> <ul id="todo-list"></ul> </div> <script src="script.js"></script> </body> </html> ``` ### CSS (styles.css) ```css body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } #todo-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #todo-input { width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } #add-button { padding: 10px 20px; border: none; background-color: #28a745; color: white; border-radius: 4px; cursor: pointer; } #add-button:hover { background-color: #218838; } #todo-list { list-style-type: none; padding: 0; } #todo-list li { padding: 10px; border-bottom: 1px solid #ccc; } #todo-list li:last-child { border-bottom: none; } ``` ### JavaScript (script.js) ```javascript document.getElementById('add-button').addEventListener('click', function() { const todoInput = document.getElementById('todo-input'); const todoText = todoInput.value.trim(); if (todoText !== '') { const todoList = document.getElementById('todo-list'); const newTodo = document.createElement('li'); newTodo.textContent = todo; // Optional: Add a delete button to each todo item const deleteButton = document.createElement('button'); deleteButton.textContent = 'Löschen'; deleteButton.style.marginLeft = '10px'; deleteButton.addEventListener('click', function() { todoList.removeChild(newTodo); }); newTodo.appendChild(deleteButton); todoList.appendChild(newTodo); todoInput.value = ''; }); ``` Dieses Beispiel zeigt, wie man eine einfache To-Do-Liste mit HTML, CSS und JavaScript erstellt. Die Liste ermöglicht das Hinzufügen und Löschen von Aufgaben.
