Progetti JavaScript per Principianti: Inizia a Creare Subito

Leggere un tutorial di JavaScript e portarlo a termine sono due esperienze completamente diverse.

La prima dà una sensazione di produttività. La seconda è quella in cui si impara davvero. Stai studiando lezioni di JS da un po' e il tuo codice vive ancora all'interno degli esercizi di qualcun altro? Beh, non ancora per molto.

Conoscere i cicli non serve a nulla finché non ne usi uno per far funzionare qualcosa. I tutorial ti insegnano le parole. I progetti ti fanno parlare la lingua.

Ecco quindi 18 progetti JavaScript per principianti, ognuno con una breve guida per sapere da dove iniziare. Scegline uno, crealo e poi passa al successivo.

Prima di tutto, consolida le basi di JavaScript

Tutti i progetti JS per principianti si basano su variabili, funzioni, costrutti condizionali, cicli, array, oggetti e una manciata di metodi DOM. Se non hai ancora acquisito familiarità con questi concetti, passerai più tempo a combattere con la sintassi che a programmare davvero.

Il corso JavaScript di Coddy è pensato proprio per questo. Lezioni di cinque minuti che ti guidano passo dopo passo attraverso il cuore del linguaggio. Scrivi ed esegui il codice direttamente nel browser mentre impari. Nessuna installazione, nessuna configurazione dell'ambiente, nessun "installa prima Node".

Bugsy, il nostro assistente AI integrato, è presente in ogni lezione per aiutarti quando qualcosa non ti è chiaro.

Se riesci a leggere, scrivere e spiegare i seguenti concetti senza esitazione, sei pronto. Altrimenti, ripassa le basi di JS su Coddy finché non ti sentirai sicuro.

• Variabili e tipi primitivi (string, number, boolean)
• Istruzioni if/else e switch
• Cicli for, while e for...of
• Funzioni e arrow function
• Array e i metodi più comuni (push, pop, map, filter, find)
• Oggetti e notazione a punti/parentesi quadre (dot/bracket notation)
• Accesso base al DOM (querySelector, addEventListener, textContent)

Tutto chiaro? Ottimo. Cominciamo a creare!

Progetti iniziali: Ciao, DOM

Questi progetti sono volutamente piccoli. Si basano su uno o due concetti, così se qualcosa va storto puoi trovare rapidamente la causa. E ehi, non saltarli solo perché sembrano semplici!

1. Il classico contatore

Cos'è: un numero sullo schermo con un pulsante più e un pulsante meno.

Perché è utile: è la più piccola applicazione possibile che unisce HTML, CSS e JavaScript. Lavorerai con lo stato (una variabile che cambia), gli aggiornamenti del DOM e gli event listener. Circa venti righe di codice, più o meno.

Come crearlo: uno span per il numero, due pulsanti. Definisci una variabile let count = 0. Collega i listener di clic a ciascun pulsante per aumentare o diminuire il conteggio, quindi aggiorna il textContent dello span. Obiettivo extra: un pulsante di reset e un limite minimo a zero.

2. Calcolatore di mance

Cos'è: inserisci l'importo del conto e la percentuale di mancia, e visualizza la mancia e il totale.

Perché è utile: introduce gli input dei moduli e parseFloat, che mettono in difficoltà quasi tutti la prima volta. Ti renderai anche conto di quanto sia facile sballare i calcoli se ti dimentichi di gestire NaN.

Come crearlo: due input numerici (conto, percentuale di mancia), un pulsante, due span di output. Al clic, analizza entrambi gli input con parse, esegui il calcolo, arrotonda a due decimali con .toFixed(2) e mostra il risultato. Obiettivo extra: un'opzione per dividere il conto tra più persone.

3. Generatore di tavolozze di colori

Cos'è: clicca su un pulsante e ottieni un colore casuale visualizzato come campione con il relativo codice esadecimale.

Perché è utile: numeri casuali, template literal e stili inline in un'unica piccola app. L'output è visivo, il che rende il tutto più divertente.

Come crearlo: una funzione che restituisce un intero casuale tra 0 e 255 per tre volte, quindi una stringa come rgb(${r}, ${g}, ${b}). Impostala come colore di sfondo del campione. Obiettivo extra: una tavolozza completa di cinque colori invece di un solo campione.

4. Generatore di citazioni casuali

Cos'è: un pulsante che sostituisce la citazione visualizzata con una casuale presa da un array.

Perché è utile: ti permette di fare pratica con gli array e Math.random, oltre a essere un piccolo traguardo che puoi facilmente condividere.

Come crearlo: definisci un array di oggetti citazione con text e author. Al clic, seleziona un indice casuale e aggiorna i due elementi nel DOM. Obiettivo extra: un link "condividi su Twitter" che apre un tweet precompilato.

5. Orologio digitale

Cos'è: l'ora corrente visualizzata sullo schermo, che si aggiorna ogni secondo.

Perché è utile: è qui che farai conoscenza con setInterval e l'oggetto Date, che userai spessissimo. Aggiungere uno zero iniziale ai minuti e ai secondi a una sola cifra è un piccolo enigma interessante da risolvere.

Come crearlo: una funzione che legge new Date(), formatta ore, minuti e secondi e li scrive in uno span. Inserisci il tutto in setInterval(updateClock, 1000). Obiettivo extra: un selettore per passare dal formato a 12 ore a quello a 24 ore.

6. Calcolatore dell'IMC (Indice di Massa Corporea)

Cos'è: inserisci altezza e peso, ottieni il valore dell'IMC (BMI) e la categoria corrispondente.

Perché è utile: un caso d'uso reale in cui i costrutti condizionali scelgono quale etichetta mostrare. È anche un'ottima occasione per fare pratica con il layout pulito di un modulo.

Come crearlo: input numerici per altezza (cm) e peso (kg). All'invio, calcola l'IMC con la formula standard, esegui una catena di if/else per scegliere la categoria e mostra entrambi i valori. Obiettivo extra: un selettore per passare alle unità di misura imperiali.

Progetti di livello intermedio: più elementi in gioco

Dopo aver realizzato una manciata di progetti, noterai che alcuni schemi si ripetono. Il clic su un pulsante modifica una variabile, una funzione aggiorna l'interfaccia utente in base a quella variabile, e così via. Questo è il fulcro dello sviluppo frontend. Questi progetti ti chiederanno di gestire un po' più di stato contemporaneamente.

7. Lista delle cose da fare (To-do List)

Cos'è: scrivi un'attività, premi invio e questa apparirà in una lista. Clicca su un elemento per segnarlo come completato. Clicca sulla X per eliminarlo.

Perché è utile: è l'equivalente di "hello world" per i framework frontend, e c'è un motivo. Gestirai un array, lo renderizzerai nel DOM e gestirai due o tre eventi. Se riesci a creare una lista di cose da fare da zero, non sei più un principiante assoluto.

Come crearlo: mantieni un array di oggetti attività con id, text e done. Esegui nuovamente il rendering come <ul> dopo ogni modifica. Alla pressione di invio, aggiungi una nuova attività con push. Al clic, attiva/disattiva lo stato di completamento o usa splice sull'array. Obiettivo extra: salva i dati in localStorage in modo che le attività rimangano anche dopo aver ricaricato la pagina.

8. Cronometro con tempi parziali

Cos'è: un cronometro con i pulsanti di avvio, arresto, azzeramento e tempi parziali (lap).

Perché è utile: è più complicato dell'orologio, perché devi gestire la tua variabile del tempo trascorso invece di chiederla al sistema. Lavorerai con Date.now(), intervalli e logica di pausa.

Come crearlo: memorizza un startTime e un accumulatore elapsed. All'avvio, imposta startTime = Date.now() e avvia un intervallo. All'arresto, calcola elapsed += Date.now() - startTime. Al tempo parziale, inserisci la lettura corrente in un array e renderizzala. Obiettivo extra: formatta i millisecondi in modo elegante.

9. Timer Pomodoro

Cos'è: 25 minuti di lavoro, 5 minuti di pausa, ripeti. Un segnale acustico avvisa quando è il momento di cambiare.

Perché è utile: una macchina a stati per principianti. Ti troverai in modalità "lavoro", "pausa" o "in pausa", e l'interfaccia utente cambierà a seconda della modalità attiva.

Come crearlo: usa lo stesso schema a intervalli del cronometro, ma con un conto alla rovescia. Tieni traccia della modalità attiva. Quando il timer arriva a zero, cambia modalità e riproduci un breve suono con new Audio('beep.mp3').play(). Obiettivo extra: un contatore delle sessioni di lavoro completate durante la giornata.

10. App di quiz

Cos'è: un quiz a scelta multipla che calcola il tuo punteggio alla fine.

Perché è utile: combina l'iterazione degli array, i costrutti condizionali e il concetto di "stato della schermata" (domanda corrente, schermata dei risultati).

Come crearlo: definisci un array di oggetti domanda con text, options e correctIndex. Mostra una domanda alla volta. Al clic sulla risposta, confrontala con correctIndex, aumenta il punteggio e passa all'indice successivo. Quando le domande sono finite, mostra una schermata con i risultati. Obiettivo extra: un timer per ogni domanda.

11. Generatore di password

Cos'è: scegli una lunghezza e quali tipi di caratteri includere, e ottieni una password casuale.

Perché è utile: manipolazione di stringhe, casualità e input di tipo checkbox tutto in uno. Inoltre è un'applicazione davvero utile, il che è raro per un progetto di pratica.

Come crearlo: crea quattro gruppi di caratteri (minuscoli, maiuscoli, numeri, simboli). Concatena i gruppi attivi in base alle caselle selezionate. Esegui un ciclo per n volte selezionando un carattere casuale dal gruppo combinato. Obiettivo extra: un indicatore di robustezza che valuti la password generata.

12. Validatore di moduli (Form Validator)

Cos'è: un modulo di registrazione che evidenzia in rosso i campi non validi e mostra un messaggio di errore sotto ognuno di essi.

Perché è utile: nel mondo reale, JS viene usato spessissimo per questo scopo. Regex, eventi di focus e manipolazione del DOM, il tutto applicato a un layout di modulo familiare.

Come crearlo: scrivi piccole funzioni di validazione per ciascun campo (formato email, lunghezza password, corrispondenza delle password). Sull'evento blur, esegui il validatore e attiva/disattiva una classe sull'input, aggiornando anche lo span di errore. All'invio, procedi solo se tutti i validatori hanno esito positivo. Obiettivo extra: validazione in tempo reale dopo il primo evento blur.

Mini giochi: dove inizia il divertimento

I giochi spingono le tue competenze oltre, perché coinvolgono uno stato continuo, tempistiche e interazione. La prima volta che fai muovere dei pixel su un canvas, capisci davvero cos'è JavaScript.

13. Morra cinese (Sasso, carta, forbici)

Cos'è: scegli sasso, carta o forbici. Anche il computer farà la sua scelta. Scopri chi vince.

Perché è utile: un ottimo esercizio sui costrutti condizionali e sulla casualità, con un soddisfacente momento di vittoria o sconfitta.

Come crearlo: tre pulsanti per la scelta del giocatore. Al clic, il computer sceglie casualmente tra le stesse tre opzioni. Usa una piccola tabella di ricerca (o if/else nidificati) per decidere il risultato. Tieni traccia di vittorie e sconfitte tra i vari round. Obiettivo extra: una sfida al meglio delle cinque partite con una schermata di vittoria.

14. Tris (Tic-Tac-Toe)

Cos'è: il classico gioco su griglia 3x3, in cui due giocatori si alternano sullo stesso schermo.

Perché è utile: introduce l'uso di un array di lunghezza 9 come griglia bidimensionale piatta e il concetto di verifica delle condizioni di vittoria. È bello completare un gioco così iconico.

Come crearlo: renderizza nove celle. Tieni traccia del turno. Al clic su una cella, inserisci il segno del giocatore corrente e controlla tutte le otto possibili linee vincenti. Mostra un banner per il vincitore quando qualcuno vince. Obiettivo extra: un'intelligenza artificiale di base che sceglie una cella libera a caso.

15. Memory Match

Cos'è: una griglia di carte coperte. Cliccane due. Se corrispondono, rimangono scoperte. Altrimenti, si ricoprono.

Perché è utile: mescolamento di array, timeout e una chiara condizione di vittoria. La prima volta che implementi la logica del "ricopri dopo un secondo", capirai davvero come funziona setTimeout.

Come crearlo: raddoppia un array di valori per creare le coppie, mescolalo con l'algoritmo di Fisher-Yates. Renderizza le carte coperte. Al clic, rivela la carta. Quando ne vengono rivelate due, confrontale: se corrispondono, bloccale; altrimenti, ricoprile entrambe dopo un breve ritardo. Termina il gioco quando tutte le coppie sono state trovate. Obiettivo extra: un contatore di mosse e il salvataggio del miglior punteggio in localStorage.

16. Gioco dell'indovina numero

Cos'è: il computer sceglie un numero tra 1 e 100. Tu provi a indovinare e il computer ti dice "più alto" o "più basso" finché non indovini.

Perché è utile: è semplice, ma insegna a gestire gli input, i confronti e uno schema di "ciclo fino alla risposta corretta" che si ritrova ovunque.

Come crearlo: genera un numero target una sola volta. Tieni traccia dei tentativi. A ogni tentativo, confrontalo con il target e aggiorna il messaggio di feedback. Smetti di accettare input una volta indovinato. Obiettivo extra: limita il giocatore a sette tentativi, con una schermata di game over se finisce i tentativi.

17. L'impiccato

Cos'è: il computer sceglie una parola. Tu indovini le lettere una alla volta. Gli errori completano il disegno dell'impiccato.

Perché è utile: è il progetto ideale per smettere di avere paura della manipolazione delle stringhe. Creare la visualizzazione delle "lettere indovinate" ti insegna a usare split, map e join in un colpo solo.

Come crearlo: scegli una parola da un array. Mostra un trattino basso per ogni lettera. Man mano che il giocatore sceglie una lettera, rivela le posizioni corrispondenti o registra un errore. Disegna l'impiccato a tappe (di solito sono consentiti sei errori) usando CSS o canvas. Obiettivo extra: carica le parole da un'API di dizionario pubblica.

18. Snake

Cos'è: il classico gioco del serpente: mangia il cibo, allungati e perdi se colpisci te stesso o il muro.

Perché è utile: questo è il progetto finale per eccellenza per un principiante. Lavorerai con una griglia (canvas o CSS), eventi della tastiera, un ciclo di gioco (game loop), il rilevamento delle collisioni e le meccaniche di crescita.

Come crearlo: renderizza una griglia con CSS o un <canvas>. Memorizza il serpente come un array di oggetti coordinata. A ogni tick, sposta il serpente di una cella nella direzione corrente. Se la nuova testa coincide con la posizione del cibo, fai allungare il serpente e genera nuovo cibo. Se la testa colpisce un muro o un'altra cella del corpo, è game over. Ascolta i tasti freccia per cambiare direzione. Obiettivo extra: una velocità di tick che aumenta man mano che il punteggio cresce.

Bonus: Un'app meteo

Cos'è: inserisci una città e ottieni la temperatura attuale e una descrizione del meteo.

Perché è utile: è il primo vero assaggio di un'API pubblica e di codice asincrono. Qualsiasi API meteo gratuita ti darà materiale a sufficienza con cui giocare.

Come crearlo: ottieni una chiave API gratuita. All'invio del modulo, usa fetch inserendo la città nell'URL. Attendi la risposta, analizza il JSON e aggiorna il DOM con i campi pertinenti. Inserisci il codice in un blocco try/catch in modo che i nomi di città errati non mandino in crash l'interfaccia utente. Obiettivo extra: una visualizzazione delle previsioni a cinque giorni.

Come portare a termine i progetti che inizi

La lista qui sopra è inutile se ne crei la metà e abbandoni il resto. Ecco alcune strategie che possono aiutarti:

• Scegli il progetto più piccolo che ti entusiasma. L'entusiasmo ti fa iniziare. La semplicità ti permette di finire. Poi ripeti.
• Fissa un limite di tempo, non di obiettivi (Time-box, don't scope-box). Concediti un'ora o due di massima concentrazione per un progetto iniziale. Se non finisci, non è un fallimento, ma un'informazione utile su dove ti sei bloccato.
• Prima crea, poi rifinisci. Realizza una versione funzionante anche se brutta prima di toccare il CSS. Un progetto rifinito ma non funzionante è peggio di uno brutto ma funzionale.
• Evita il "tutorial-hopping". Guardare tre tutorial diversi per lo stesso progetto significa perdere tempo senza scrivere una riga di codice. Crea qualcosa di imperfetto, poi cerca le informazioni specifiche sui passaggi che non conosci.
• Esercitati sulle basi nei giorni in cui non puoi programmare. Cinque minuti su Coddy mentre sei in autobus sono comunque una sessione di studio utile. La costanza fa la differenza.

Quest'ultimo punto unisce tutto il resto. I progetti rendono concreto ciò che hai imparato, ma si basano sulle fondamenta. Le brevi lezioni quotidiane sono ciò che impedisce a questi progetti di sembrare fuori portata.

Il ruolo di Coddy

Questo non è un invito a usare uno strumento specifico per creare questi progetti. Usa l'editor che preferisci, esegui i test nel browser e fai l'hosting dove vuoi.

La parte di cui si occupa Coddy è quella precedente: rendere le tue basi di JavaScript abbastanza solide in modo che "creare un'app di quiz" non significhi "passare due ore su Google a cercare cosa fa .map".

Coddy ha insegnato JavaScript a milioni di studenti su web, iOS e Android. Le stesse lezioni, gli stessi progressi e lo stesso Bugsy ovunque tu lo apra.

Il piano gratuito copre ogni lezione di JS senza bisogno di configurazioni. L'unico limite è un sistema di energia che si ricarica dopo poche ore.

Vuoi sessioni illimitate e Bugsy per ogni richiesta? I piani a pagamento costano circa la metà rispetto a piattaforme simili. In ogni caso: prima le basi, poi i progetti.