So erstellen Sie eine einfache To-Do-Listen-App mit JavaScript
Das Document Object Model (DOM) ist die Datendarstellung der Objekte, aus denen die Struktur und der Inhalt einer Webseite bestehen. Sie können auf alle DOM-Elemente auf der Website zugreifen und diese mithilfe von JavaScript dynamisch erstellen, lesen, aktualisieren und löschen (CRUD).
In diesem Artikel wird erläutert, wie Sie CRUD-Operationen auf einer To-Do-Liste mit JavaScript und DOM-Manipulation ausführen können. Wir erwarten, dass Sie die Grundlagen von HTML und JavaScript kennen, bevor Sie diesen Artikel durchgehen.
Grundlegende DOM-Manipulation verstehen
Gehen wir ein einfaches Beispiel durch:
<button id=”submit”>Submit</button>
<script>
const submitButton = document.getElementById(“submit”);
submitButton.addEventListener(“click”, ()=>{
alert(“The form has been submitted”);
});
</script>
Die Variable SubmitButton hat Zugriff auf die HTML-Schaltfläche im obigen Code. Sie müssen den Click- Ereignis-Listener auf der Schaltfläche hinzufügen (indem Sie das Element über seine ID von Submit abrufen ). Wenn auf die Schaltfläche geklickt wird, wird das Ereignis ausgelöst und das Fenster zeigt ein Popup mit dem Text: "Das Formular wurde gesendet."
Nachdem wir nun die Grundidee der DOM-Manipulation behandelt haben , fahren wir fort und tauchen in die Erstellung der To-Do-App ein.
Erstellen des Layouts mit HTML und TailwindCSS
Schauen wir uns das HTML-Layout dieses Projekts an. Die Eingabeelemente und die Schaltflächen haben ihre jeweiligen IDs, um auf diese Elemente in der JavaScript-Datei zugreifen zu können.
Für das Frontend-Design verwendet dieser Artikel TailwindCSS , ein Utility-CSS-Framework. Sie können TailwindCSS in Ihrem Projekt verwenden, indem Sie die CSS-Datei aus dem CDN importieren.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
Code:
<div class="h-100 w-full flex items-center justify-center bg-teal-lightest font-sans mt-20">
<div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
<div class="mb-4">
<h1 class="text-3xl md:text-4xl text-indigo-600 font-medium mb-2">
To-Do List App
</h1>
<div class="flex mt-4">
<input class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" name="text" id="text" placeholder="Add Todo" />
<input type="hidden" id="saveIndex" />
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded text-white bg-indigo-600 transition-colors duration-300 mt-1 md:mt-0 md:ml-1" id="add-task-btn">Add</button>
<button class="p-2 lg:px-4 md:mx-2 text-center border border-solid border-indigo-600 rounded bg-indigo-600 text-white transition-colors duration-300 mt-1 md:mt-0 md:ml-1" style="display: none" id="save-todo-btn">Edit Todo</button>
</div>
</div>
<div id="listBox"></div>
</div>
</div>
So sieht unsere App nach der Gestaltung aus:
Hinzufügen von Funktionen mit Javascript:
Der erste Schritt besteht darin, mit der Methode getElementById() über ihre IDs auf die Elemente zuzugreifen .
const text = document.getElementById("text");
const addTaskButton = document.getElementById("add-task-btn");
const saveTaskButton = document.getElementById("save-todo-btn");
const listBox = document.getElementById("listBox");
const saveInd = document.getElementById("saveIndex");
Wir brauchen ein Array, um alle Aufgaben zu speichern. Daher müssen wir einen initialisieren.
let todoArray = [];
Hinzufügen von Elementen zur To-Do-Liste
Um dem Array eine Aufgabe hinzuzufügen, müssen Sie diese an das todoArray senden und dann auf der Webseite anzeigen. Dazu muss ein Klick-Ereignis auf dem Hinzufügen-Button ausgelöst werden.
addTaskButton.addEventListener("click", (e) => {
e.preventDefault();
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
todoArray.push(text.value);
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});
Sie müssen das todoArray bei jeder Änderung im localStorage speichern (dh wenn eine Aufgabe hinzugefügt, aktualisiert oder gelöscht wird).
Im obigen Code müssen Sie das Array aus dem localStorage holen; Wenn kein Array vorhanden ist, erstellen wir ein leeres. Dann schieben wir die neu hinzugefügte Aufgabe in das todoArray und speichern das gesamte Array wieder in localStorage .
Anzeigen der Änderungen der To-Do-Liste
Nachdem Sie den Wert an todoArray angehängt haben , müssen Sie ihn auf der Webseite anzeigen. Dies erfolgt mithilfe des .innerHTML- Attributs.
Wir legen den HTML- Code für die To -Do-Liste in eine Variable namens htmlCode . Dann durchlaufen wir das todoArray und fügen jedes Element der htmlCode- Variablen hinzu.
Nachdem Sie alle Elemente durchlaufen haben, müssen Sie den gesamten HTML-Code dem listBox- Element mithilfe des .innerHTML- Attributs zuweisen .
Nachdem wir das neue To -Do-Listenelement in das Array verschoben haben , rufen wir die Funktion displayTodo() auf , die all dies wie beschrieben behandelt:
function displayTodo() {
let todo = localStorage.getItem("todo");
if (todo === null) {
todoArray = [];
} else {
todoArray = JSON.parse(todo);
}
let htmlCode = "";
todoArray.forEach((list, ind) => {
htmlCode += `<div class='flex mb-4 items-center'>
<p class='w-full text-grey-darkest'>${list}</p>
<button onclick='edit(${ind})' class='flex-no-shrink p-2 ml-4 mr-2 border-2 rounded text-white text-grey bg-green-600'>Edit</button>
<button onclick='deleteTodo(${ind})' class='flex-no-shrink p-2 ml-2 border-2 rounded text-white bg-red-500'>Delete</button>
</div>`;
});
listBox.innerHTML = htmlCode;
}
Sie müssen für jedes Element zwei Schaltflächen – aktualisieren und löschen – hinzufügen, während Sie die Todo-Elemente an die Variable htmlCode anhängen .
Elemente aus der To-Do-Liste löschen
Die Schaltfläche "Löschen" hat eine Attributmethode onclick() , die den Todo-Index als Parameter übergibt. Wenn Sie auf die Schaltfläche Löschen klicken, wird die Methode deleteTodo() ausgeführt.
In dieser Methode müssen Sie die Array-Methode splice() auf das todoArray anwenden . Die Methode splice() hilft, das Element am angegebenen Index zu löschen. Nach dem Löschen des Elements müssen Sie die Änderungen im localStorage speichern und die Funktion displayTodo () aufrufen, um Änderungen auf der Webseite widerzuspiegeln.
function deleteTodo(ind) {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
todoArray.splice(ind, 1);
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
}
Aktualisieren von Elementen in der To-Do-Liste
Jedes To-Do-Listenelement verfügt über eine Schaltfläche zum Bearbeiten, genau wie die Schaltfläche zum Löschen. Die Bearbeitungsschaltfläche hat eine Attributmethode onclick() . Beim Klicken auf die Schaltfläche wird die Edit-Methode ausgeführt und übergibt den Index als Parameter.
Es gibt zwei HTML-Elemente, deren Anzeigeeigenschaften auf none gesetzt sind:
- Eingabeelement mit der ID saveIndex
- Schaltfläche mit der ID save-task-btn
Sobald Sie auf die Schaltfläche Bearbeiten klicken, enthält die Eingabe den Textwert, mit dem Sie aktualisieren möchten. Der saveTaskButton wird anstelle von addTaskButton angezeigt.
Der HTML-Code besteht aus einem Eingabeelement mit der ID saveIndex . Sie müssen die standardmäßige Stileigenschaft von display auf none setzen . Beim Aufruf der Edit-Methode setzen Sie das value-Attribut dieses Elements auf die id, damit Sie später beim Speichern der aktualisierten Aufgabe darauf verweisen können.
function edit(ind) {
saveInd.value = ind;
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
text.value = todoArray[ind];
addTaskButton.style.display = "none";
saveTaskButton.style.display = "block";
}
Wenn Sie mit der Bearbeitung des Textes fertig sind, klicken Sie auf den saveTaskButton . Wenn Sie auf die Schaltfläche klicken, rufen Sie die ID des Textes mit der Eingabe saveInd ab . Nachdem Sie die ID abgerufen haben, können Sie das todoArray an diesem Index aktualisieren und die Änderungen an den localStorage übertragen . Schließlich haben wir die Funktion displayTodo() aufgerufen, um Änderungen auf der Webseite widerzuspiegeln.
saveTaskButton.addEventListener("click", () => {
let todo = localStorage.getItem("todo");
todoArray = JSON.parse(todo);
let id = saveInd.value;
todoArray[id] = text.value;
addTaskButton.style.display = "block";
saveTaskButton.style.display = "none";
text.value = "";
localStorage.setItem("todo", JSON.stringify(todoArray));
displayTodo();
});
Streichen Sie einen Punkt von Ihrer To-Do-Liste
Nachdem Sie nun die grundlegende To-Do-Listen-App abgeschlossen haben, ist es an der Zeit, dass Sie selbst weitere spannende Projekte erstellen!
Sie können entweder ein Spiel oder eine Webanwendung erstellen, die Sie für Ihren persönlichen Gebrauch verwenden können. Das Erstellen von Projekten hilft Ihnen, Ihre Fähigkeiten zu erweitern und ein gutes Verständnis von JavaScript zu erlangen. Lerne weiter und baue so viel wie möglich tolle Projekte auf.
Möchten Sie ein weiteres JavaScript-Projekt erstellen? Hier ist eine einfache Rechner-Webanwendung, die Sie mit HTML, CSS und JavaScript erstellen können.