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á:

html<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:

cssbody {
  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:

javascriptlet 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
  }
});