Laboratorio: notes app semplice

In parole semplici

La notes app è il primo progetto ordinato: ha uno stato, una render function, un salvataggio e più file con responsabilità diverse.

Questa lezione fa parte del modulo Organizzare una piccola app. L’obiettivo del modulo è: Passare da esempi isolati a un progetto con file, dati e funzioni organizzati.

Parole nuove

• app: piccolo programma usabile nella pagina.

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 notes app semplice con file separati e salvataggio locale.

Esempio da copiare

const stato = {
  note: carica()
};

function aggiungiNota(titolo) {
  stato.note.push({ titolo });
  salva(stato.note);
  render(stato.note);
}

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

Esercizio guidato

1. Crea la struttura HTML della notes app.
2. Crea uno stato con lista note.
3. Aggiungi note dal form.
4. Mostra note con render.
5. Salva e ricarica note con localStorage.

Controllo finale

Hai finito quando puoi aggiungere una nota, ricaricare la pagina e ritrovarla.