cat javascript/laboratorio-todo-list-semplice.md

Lezione 34 25 min

Laboratorio: todo list semplice

Creare una lista di attività con form, elementi HTML e salvataggio.

In parole semplici

La todo list unisce il modulo: leggi un testo, crei un elemento, lo mostri nella pagina e salvi la lista nel browser.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

  • todo: attività da fare.
  • persistenza: capacità di conservare dati dopo il refresh.

Cosa impari

  • Capire il concetto senza partire da definizioni astratte.
  • Vedere un esempio piccolo che puoi copiare e modificare.
  • Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

const attivita = [];

function aggiungiAttivita(titolo) {
  attivita.push(titolo);
  localStorage.setItem("attivita", JSON.stringify(attivita));
}

aggiungiAttivita("Studiare JavaScript");
console.log(attivita);

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

  1. Crea un form con input e bottone.
  2. Quando invii il form, aggiungi il testo a una lista.
  3. Mostra la lista nella pagina.
  4. Salva la lista in localStorage.
  5. Ricarica e prova a leggerla.

Controllo finale

Hai finito quando puoi aggiungere almeno tre attività e ritrovarle dopo il refresh.