Wie erstelle ich eine To-Do-Liste mit JavaScript?
Hallo,
wie erstelle ich mit Java Script eine To-Do-Liste? (aber ohne localStorage)
3 Antworten
An sich brauchst du lediglich ein ul-Element, dem du via DOM API neue li-Elemente anhängst. Für die Texteingabe reicht ein Eingabefeld mit Button.
<ul id="todos"></ul>
<form id="todo-form">
<input>
<button type="button">Add</button>
</form>
Dem Button weist du einen click-Handler zu, der die Elemente an das ul-Element hängt.
const toDosList = document.getElementById("todos");
const toDoForm = document.getElementById("todo-form");
toDoForm.querySelector("button").addEventListener("click", () => {
const toDoItem = document.createElement("li");
toDoItem.textContent = toDoForm.querySelector("input").value;
toDosList.appendChild(toDoItem);
});
Wenn du Elemente wieder löschen möchtest, hänge je li-Element noch einen Button an, der bei Klick sein Elternelement löscht.
const removeButton = document.createElement("button");
removeButton.textContent = "Remove";
removeButton.setAttribute("type", "button");
removeButton.onclick = function() { this.parentElement.remove(); }
toDoItem.appendChild(removeButton);
Für eine persistente Speicherung kannst du einen Cookie verwenden, in dem ein Array (bspw. im JSON-Format) gespeichert wird. Bei Aufruf der Webseite liest du den Cookie ein und parst das Array.
const serializedToDos = JSON.parse(cookieValue);
Im Anschluss läufst du einmal durch alle Einträge und hängst sie an dein ul-Element an. Zusätzlich wäre es sinnvoll, konsequent alle Einträge in ein separates Array einzufügen. Beim Speichern brauchst du es nur serialisieren und in deinen Cookie schreiben.
const toDosToStore = JSON.stringify(yourArrayOfTodos);
// write to cookie ...
Du schaust dir die Tutorials von beliebigen Frontend Frameworks an, das ist so mit das gänigste Beispiel.
Wenn du nicht localStorage nutzen willst; irgendwo musst du das ja speichern wenn es persistent sein soll. Wie du so was server side speicherst findest du aber auch im Internet.
Dafür solltest du mehr als genug Tutorials finden und wenn du den localStorage nicht nutzen willst, dann ist die Frage was sonst oder soll das nur solange da sein, wie das Fenster da ist? Dann eben einfach ein Array.
Andernfalls eben andere Datenbanktechnologien oder das Filesystem, da biste dann aber auf Backendebene, ob nun mit node.js oder einer anderen Backendsprache. Oder hast eben eine API, die dir solche Funktionalitäten bereitstellt.