JavaScript-Checkliste

In dieser Lektion werden wir eine Checkliste implementieren. Eine Checkliste ist ein Programm, das es ermöglicht, eine Liste geplanter Aufgaben zu erstellen und dann, sobald diese Aufgaben erledigt sind, sie als erledigt zu markieren.

Lassen Sie uns es so gestalten, dass Aufgaben hinzugefügt, gelöscht, bearbeitet und als erledigt markiert werden können.

Hier ist ein Beispiel dafür, was wir erreichen sollten (zum Eingeben einer neuen Aufgabe geben Sie Text in die Eingabe ein und drücken Sie Enter, zum Bearbeiten führen Sie einen Doppelklick auf den Aufgabentext aus):

Beginnen wir

Also, fangen wir mit der Implementierung der beschriebenen Aufgabe an.

Schreiben wir zunächst den HTML-Code für unsere Checkliste. Neue Aufgaben sollen über eine Eingabe eingegeben werden und zur Liste ul hinzugefügt werden:

<input id="input">
<ul id="list"></ul>

Fügen wir gleich CSS-Code hinzu, der unserem Checkliste etwas Schönheit verleiht:

body {
	text-align: center;
}
#input, #list {
	display: inline-block;
}
#list {
	padding: 0;
	list-style-type: none;
}

Wie üblich teilen wir die komplexe Aufgabe in einfache Schritte auf.

Als ersten Schritt sorgen wir dafür, dass Text in die Eingabe eingegeben werden kann, Enter gedrückt wird - und am Ende von ul eine li mit dem eingegebenen Text hinzugefügt wird.

Hier ist der Code-Rahmen, der das Beschriebene implementiert:

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// hier wird der Code zum Hinzufügen einer neuen li zur Liste stehen
	}
});

Vervollständigen Sie den fehlenden Teil des Codes zur Lösung der beschriebenen Aufgabe.

Modifizieren Sie die vorherige Aufgabe so, dass nach dem Drücken der Taste Enter der Text der Eingabe gelöscht wird.