Playground · Todo List
La ruota esisteva già. Ma non l’avevo ancora programmata io.
Il terzo progettino e il rito d’iniziazione inevitabile di ogni developer: creare attività, eliminarle e scoprire che il refresh aveva opinioni molto forti sulla produttività.
01 · Il rito universale
All’inizio lo fanno tutti. Quindi, chiaramente, dovevo farlo anch’io.
Dopo convertitore e cronometro volevo esercitarmi con la creazione dinamica degli elementi HTML. La Todo List offriva il problema perfetto: semplice, conosciuto e già risolto circa qualche milione di volte.
- Input
- Scrivi cosa devi fare.Se il campo è vuoto, un alert difende il database inesistente.
- Create
- Aggiungi un nuovo elemento alla pagina.Testo, contenitore e pulsante vengono creati direttamente da JavaScript.
- Delete
- Quando hai finito, rimuovilo.Oppure aggiorna la pagina e lascia che il browser li rimuova tutti insieme.
Il vero esercizio
Non stavo organizzando attività. Stavo imparando a costruire e distruggere il DOM.
Ogni nuova voce nasceva interamente via JavaScript: un contenitore, il testo inserito e il pulsante per eliminarla. Nessun componente e nessun framework.
- 01 · ReadLeggi il valore dell’input.
Il testo resta nel browser e viene subito svuotato dopo la creazione.
- 02 · CreateCrea la nuova riga.
Un div per l’attività e un elemento separato per il suo contenuto.
- 03 · AppendInseriscila nella pagina.
La lista cresce aggiungendo ogni nuovo nodo al contenitore principale.
- 04 · RemoveLa X elimina tutto.
Il pulsante conserva il riferimento alla propria riga e la rimuove dal DOM.
createElement → assegna la classe → inserisci il testo → appendChild → collega la rimozione.
Una feature essenziale, probabilmente
Se la lista non cambiava abbastanza, almeno cambiava lo sfondo.
A ogni caricamento veniva scelta casualmente una delle sette immagini scaricate. Non migliorava la produttività, ma rendeva ogni refresh visivamente imprevedibile.
Sette immagini nascoste nella pagina, un numero casuale al caricamento e una sola scelta mostrata come sfondo.
1 / 7Stato del progetto: sincerità
Aggiungeva. Eliminava. Dimenticava tutto. E lì si è fermata.
Non esistevano modifica, completamento, ordinamento o salvataggio. Era un esperimento apertamente incompleto, sufficiente però per consolidare il rapporto tra JavaScript e la pagina.
- C’era
- Creazione delle attività.
- C’era
- Eliminazione delle attività.
- Non c’era
- Modifica, persistenza o uno stato completato.
- Al refresh
- La lista tornava pulita. Tecnicamente un limite, emotivamente una filosofia.
Oggi
Non la finirei. Ma difenderei il diritto di ogni developer a reinventare almeno una Todo List.
Non era un prodotto e non aveva bisogno di diventarlo. Era il modo più diretto per imparare input, creazione dinamica, eventi e rimozione degli elementi. Una ruota già esistente, costruita una volta con le mie mani.