JavaScript ellenőrzőlista

Ebben a leckében egy ellenőrzőlistát valósítunk meg. Az ellenőrzőlista olyan program, amely lehetővé teszi a tervezett teendők listájának elkészítését, majd az események végrehajtása során ezeket a teendőket elvégzettként jelölni.

Tegyük úgy, hogy a teendőket lehessen hozzáadni, törölni, szerkeszteni és elvégzettként jelölni.

Itt egy minta arról, hogy mit kell elérnünk (új teendő bevitelezéséhez írja be a szöveget a beviteli mezőbe és nyomja meg a Enter billentyűt, a szerkesztéshez kattintson duplán a teendő szövegére):

Kezdjük

Szóval, kezdjük el a leírt feladat megvalósítását.

Először írjuk meg az ellenőrzőlistánk HTML kódját. Legyenek az új feladatok egy beviteli mezővel bevittek és a ul listába adódjanak hozzá:

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

Azonnal adjuk hozzá a CSS kódot, amely egy kis szépséget ad az ellenőrzőlistánknak:

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

Szokás szerint, osszuk fel az összetett feladatot egyszerű lépésekre.

Első lépésként tegyük meg, hogy a beviteli mezőbe be lehessen írni szöveget, meg lehessen nyomni a Enter billentyűt - és a ul végére kerüljön hozzá egy li a beírt szöveggel.

Itt a leírtak megvalósításához szükséges kód vázlata:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// itt lesz a kód az új li hozzáadásához a listához
	}
});

Egészítse ki a hiányzó kódrészt a leírt feladat megoldásához.

Módosítsa az előző feladatot úgy, hogy a Enter billentyű megnyomása után a beviteli mező szövege törlődjön.