CodeStart.it
Corsi JavaScript Progetto finale: lista attività
King · Applica · Capitolo 17 di 17

Progetto finale: lista attività

JavaScriptLettura + laboratorioCorso gratuito
Che cosa imparerai

Una piccola applicazione combina array, funzioni, trasformazioni e stato aggiornabile.

1. Il concetto, spiegato da zero

Una piccola applicazione combina array, funzioni, trasformazioni e stato aggiornabile.

Rappresenta ogni attività con testo e proprietà completata. Aggiungi una funzione che filtri le attività da fare; poi prova a creare una pagina HTML con input e pulsanti.

2. Un esempio ragionato

Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.

Codice di esempio · JavaScript
const attivita = [
  { testo: 'Studiare', fatta: true },
  { testo: 'Esercitarsi', fatta: false }
];
console.log(attivita.filter(x => !x.fatta).map(x => x.testo).join(','));
Risultato previsto
Esercitarsi

Come leggere questo esempio

  1. Prima di eseguire, prova a prevedere il risultato dell’esempio.
  2. Spiega con parole tue in che modo “progetto finale: lista attività” risolve un problema concreto.
  3. Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
  4. Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
Errore frequente
Non legare direttamente tutto il programma al DOM: separare dati e presentazione semplifica i test.

3. Adesso tocca a te

Obiettivo dell’esercizio: Realizza il nucleo dati di una lista attività e visualizza quelle ancora aperte.

Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.

Laboratorio: metti alla prova il codice

JAVASCRIPT · javascript

L’anteprima è isolata dal sito principale: non inserire password o dati personali nel codice di prova.

Output / esito del controllo

Il risultato comparirà qui.
Mostra la soluzione di riferimento
Codice di esempio · JavaScript
const attivita = [
  { testo: 'Studiare', fatta: true },
  { testo: 'Esercitarsi', fatta: false }
];
console.log(attivita.filter(x => !x.fatta).map(x => x.testo).join(','));

Confronta il tuo procedimento con quello dell’esempio. Una soluzione differente può essere altrettanto valida se produce risultati corretti.

4. Verifica e ripasso

Quiz: hai capito il concetto?

Quale delle seguenti affermazioni è corretta per questo capitolo?

Seleziona una risposta

Promemoria

Rappresenta ogni attività con testo e proprietà completata. Aggiungi una funzione che filtri le attività da fare; poi prova a creare una pagina HTML con input e pulsanti.

Progetto finale completo: To-do list accessibile

Scenario reale

Uno studente desidera gestire compiti e filtrarli per stato, senza perdere i dati aggiornando il browser.

Le quattro tappe del progetto

  1. Costruisci HTML semantico con input, pulsante, lista e messaggio di errore.
  2. Implementa aggiunta, completamento, eliminazione e filtro delle attività.
  3. Salva lo stato in localStorage e recuperalo all’apertura.
  4. Testa tastiera, testo vuoto e caratteri speciali usando textContent.

Che cosa consegnare

Una pagina web con script separato, almeno tre interazioni e descrizione delle scelte di accessibilità.

Come valutarti

Il progetto è riuscito quando tutte le funzionalità descritte funzionano con dati normali e casi limite. Rileggi i messaggi di errore, documenta come avviare il codice e conserva una copia di lavoro nel tuo IDE. Puoi aggiungerlo al tuo portfolio personale.

5. Come proseguire

Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.

← Capitolo precedenteHai concluso il corso ✓