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.

Esercizi

Base · facile

Scrivi aggiungiNota(titolo) che aggiorna lo stato, salva e ricostruisce la pagina.

const stato = { note: carica() };
function aggiungiNota(titolo) {
  stato.note.push({ titolo });
  salva(stato.note);
  render(stato.note);
}

Intermedio · medio

Metti insieme l’app completa: HTML con form, stato con lista note, aggiunta dal form, render, salvataggio e ricarica da localStorage. Verifica che una nota sopravviva al refresh.

Sfida · difficile

Aggiungi eliminazione di una nota e un filtro di ricerca, tenendo separati logica (filtro), DOM (render) e persistenza (salva/carica), eventualmente in file diversi. Spiega come il ciclo «stato → salva → render» mantiene coerenti dati, memoria e pagina.

Controllo finale

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