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:

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

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

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

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

Completa la parte mancante del codice per risolvere il compito descritto.

Modifica il compito precedente in modo che dopo aver premuto il tasto Enter venga effettuata la pulizia del testo dell'input.