Checklist în JavaScript

În această lecție vom implementa un checklist. Checklist-ul este un program care permite crearea unei liste de sarcini planificate, iar apoi pe măsură ce aceste sarcini sunt finalizate, să le marcăm ca fiind efectuate.

Să facem astfel încât sarcinile să poată fi adăugate, șterse, editate și marcate ca efectuate.

Iată un exemplu al ceea ce ar trebui să obținem (pentru a introduce o sarcină nouă, introduceți textul în input și apăsați Enter, pentru editare faceți dublu click pe textul sarcinii):

Să începem

Așadar, să începem implementarea sarcinii descrise.

Pentru început, să scriem codul HTML pentru checklist-ul nostru. Să presupunem că noile sarcini sunt introduse folosind un input și sunt adăugate într-o listă ul:

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

Să adăugăm imediat codul CSS, care adaugă o oarecare frumusețe checklist-ului nostru:

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

Ca de obicei, să împărțim sarcina complexă în etape simple.

Ca prim pas, să facem astfel încât în input să putem introduce text, să apăsăm Enter - și la sfârșitul lui ul să se adauge o li cu textul introdus.

Iată schița de cod care implementează cele descrise:

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

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // aici va fi codul pentru adăugarea unei noi li în listă
  }
});