Checklist in JavaScript

In deze les implementeren we een checklist. Een checklist is een programma dat het mogelijk maakt een lijst met geplande taken te maken, en vervolgens, naarmate deze taken worden voltooid, ze als gedaan te markeren.

Laten we ervoor zorgen dat taken kunnen worden toegevoegd, verwijderd, bewerkt en als gedaan gemarkeerd.

Hier is een voorbeeld van wat we moeten krijgen (voer de tekst in het invoerveld in en druk op Enter om een nieuwe taak toe te voegen, dubbelklik op de taaktekst om te bewerken):

Laten we beginnen

Laten we dus beginnen met de implementatie van de beschreven taak.

Laten we eerst de HTML-code voor onze checklist schrijven. Laat nieuwe taken worden ingevoerd via een invoerveld en toegevoegd worden aan een ul lijst:

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

Laten we meteen CSS-code toevoegen die wat schoonheid aan onze checklist toevoegt:

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

Zoals gebruikelijk, verdelen we de complexe taak in eenvoudige stappen.

Als eerste stap zorgen we ervoor dat er tekst in het invoerveld kan worden ingevoerd, op Enter kan worden gedrukt - en er een li met de ingevoerde tekst aan het einde van de ul wordt toegevoegd.

Hier is een code-opzet die het beschrevene implementeert:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// hier komt de code om een nieuwe li aan de lijst toe te voegen
	}
});

Schrijf het ontbrekende deel van de code om de beschreven taak op te lossen.

Pas de vorige taak aan zodat na het indrukken van de Enter-toets de tekst in het invoerveld wordt gewist.