Checklist in JavaScript

In questa lezione implementeremo una checklist. Una checklist è un programma che permette di creare un elenco di attività pianificate, e poi, man mano che queste attività vengono completate, contrassegnarle come fatte.

Facciamo in modo che le attività possano essere aggiunte, eliminate, modificate e contrassegnate come completate.

Ecco un esempio di ciò che dovremmo ottenere (per inserire una nuova attività, digita il testo nell'input e premi Enter, per modificare fai doppio clic sul testo dell'attività):

Iniziamo

Quindi, iniziamo a implementare il compito descritto.

Per cominciare, scriviamo il codice HTML per la nostra checklist. Lascia che i nuovi task vengano inseriti tramite un input e aggiunti a una lista ul:

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

Aggiungiamo subito il codice CSS, che conferirà un po' di bellezza alla nostra checklist:

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

Come al solito, scomponiamo il compito complesso in semplici fasi.

Come prima fase, facciamo in modo che nell'input si possa inserire del testo, premere Enter - e alla fine di ul venga aggiunto un li con il testo inserito.

Ecco la bozza del codice che implementa quanto descritto:

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

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // qui ci sarà il codice per aggiungere una nuova li alla lista
  }
});