renamed js folder

2026-02-05 01:30:42 +01:00
parent 97e36b8e29
commit 3d84295870
113 changed files with 0 additions and 0 deletions
--- a/Base/esercizi/carta_identita.js
+++ b/Base/esercizi/carta_identita.js
@@ -0,0 +1,18 @@
+/**
+ * Esercizio: Carta d'Identità Digitale
+ * 
+ * DESCRIZIONE:
+ * Devi creare un piccolo script che simula i dati di una carta d'identità.
+ * 
+ * 1. Dichiara variabili (usando `let` o `const` in modo appropriato) per:
+ * - Nome
+ * - Cognome
+ * - Età
+ * - Città di residenza
+ * 
+ * 2. Genera una singola stringa finale (descrizione) che unisca tutti questi dati in una frase di senso compiuto.
+ * 3. Stampa la descrizione in console.
+ * OUTPUT desiderato: "Mi chiamo [Nome] [Cognome], ho [Età] anni e vivo a [Città di residenza]."
+ */
+
+
--- a/Base/esercizi/convertitore_valuta.js
+++ b/Base/esercizi/convertitore_valuta.js
@@ -0,0 +1,16 @@
+/**
+ * Esercizio: Il Convertitore di Valuta
+ * 
+ * DESCRIZIONE:
+ * Immagina di dover convertire dei dollari in euro.
+ * 
+ * 1. Crea una costante `TASSO_CAMBIO` e assegnale il valore 0.92 (1 Dollaro = 0.92 Euro).
+ * 2. Crea una variabile `dollari` e assegnale 100 (sarebbero 100 dollari).
+ * 3. Calcola l'equivalente in euro e salvalo in una variabile chiamata `euro`.
+ * (Formula: dollari * tasso di cambio).
+ * 
+ * 4. Stampa il risultato in modo chiaro.
+ * OUTPUT desiderato: "100 dollari valgono 92 euro".
+ */
+
+
--- a/Base/esercizi/debug_nomi_variabili.js
+++ b/Base/esercizi/debug_nomi_variabili.js
@@ -0,0 +1,27 @@
+/**
+ * Esercizio: Debugging Nomi e Sintassi (FIX ME)
+ * 
+ * DESCRIZIONE:
+ * Il codice qui sotto contiene 4 errori di sintassi relativi a come vengono
+ * dichiarate e usate le variabili. 
+ * Il tuo compito è trovare gli errori, correggerli e far eseguire lo script senza errori.
+ * 
+ * REGOLE DA RICORDARE:
+ * 1. I nomi delle variabili non possono iniziare con numeri.
+ * 2. I nomi delle variabili non possono contenere spazi.
+ * 3. Non si può riassegnare un valore a una variabile `const`.
+ * 4. Le variabili devono essere dichiarate prima di essere usate.
+ */
+
+let 1numero = 10; 
+
+const valore fisso = 50;
+
+valore fisso = 60; 
+
+console.log(risultatoFinale);
+
+let risultatoFinale = 1numero + valore fisso;
+
+// OUTPUT ATTESO: 3000
+console.log(risultatoFinale);
--- a/Base/extra/debug_tipi_dati.js
+++ b/Base/extra/debug_tipi_dati.js
@@ -0,0 +1,27 @@
+/**
+ * Esercizio Extra: Debugging Coercizione Tipi (FIX ME)
+ * 
+ * DESCRIZIONE:
+ * Un programmatore ha scritto un codice per sommare due prezzi,
+ * ma il risultato è bizzarro. Invece di fare la somma matematica, i numeri si "incollano".
+ * 
+ * OBIETTIVO:
+ * 1. Esegui il codice e osserva l'errore logico (non di sintassi).
+ * 2. Correggi il tipo di dato delle variabili in modo che la somma sia matematica (45.50).
+ * 3. Nota anche che c'è un errore nel calcolo della media finale.
+ * 
+ * OUTPUT ATTESO:
+ * Totale: 45.5
+ * Media: 22.75
+ */
+
+let prezzoOggetto1 = "20.50";
+let prezzoOggetto2 = "25.00";
+
+let sommaTotale = prezzoOggetto1 + prezzoOggetto2;
+
+console.log("Totale: " + sommaTotale); // Ora stampa 20.5025.00 (Sbagliato!)
+
+let media = sommaTotale / 4;
+
+console.log("Media: " + media);
--- a/Base/extra/scambio_valori.js
+++ b/Base/extra/scambio_valori.js
@@ -0,0 +1,33 @@
+/**
+ * Esercizio Extra: Lo Scambio Magico (Swap)
+ * 
+ * DESCRIZIONE:
+ * Hai due variabili:
+ * let bicchiereRosso = "Acqua";
+ * let bicchiereBlu = "Vino";
+ * 
+ * Il tuo compito è scambiare i contenuti, in modo che alla fine:
+ * bicchiereRosso contenga "Vino"
+ * bicchiereBlu contenga "Acqua"
+ * 
+ * REGOLE:
+ * 1. NON puoi riassegnare manualmente i valori:
+ *    NON vale scrivere bicchiereRosso = "Vino" e bicchiereBlu = "Acqua".
+ * 2. Devi usare il codice per scambiare i valori esistenti.
+ * 
+ * SUGGERIMENTO:
+ * Nella realtà, se hai due bicchieri pieni e vuoi scambiarne il contenuto, cosa faresti?
+ * Per scambiare i liquidi senza buttarli, useresti un terzo bicchiere vuoto (una variabile temporanea)?
+ * 
+ * Stampa i valori finali per verificare il successo.
+ */
+
+let bicchiereRosso = "Acqua";
+let bicchiereBlu = "Vino";
+
+// Scrivi la logica di scambio qui sotto:
+
+
+// Verifica finale
+console.log("Rosso:", bicchiereRosso); // Deve essere Vino
+console.log("Blu:", bicchiereBlu);   // Deve essere Acqua
--- a/Base/extra/scontrino_automatico.js
+++ b/Base/extra/scontrino_automatico.js
@@ -0,0 +1,21 @@
+/**
+ * Esercizio Extra: Generatore di Scontrino
+ * 
+ * DESCRIZIONE:
+ * Sei alla cassa di un negozio e devi calcolare il totale di uno scontrino che ha 3 articoli.
+ * 
+ * 1. Dichiara 3 variabili per i prezzi di tre prodotti diversi (es. `prezzoPane`, `prezzoLatte`, `prezzoCaffe`).
+ *    Assegna valori decimali (es. 1.50, 3.99).
+ * 2. Calcola la somma dei prodotti (il Subtotale) e salvala in una variabile.
+ * 3. Il negozio applica una tassa (IVA) del 22% sul totale.
+ *    Dichiara una costante `IVA` col valore 0.22.
+ * 4. Calcola l'ammontare della tassa (Subtotale * IVA) e salvalo in una variabile.
+ * 5. Calcola il Totale Finale (Subtotale + Tassa).
+ * 6. Stampa uno scontrino formattato simile a questo:
+ * --- SCONTRINO ---
+ * Subtotale: ...
+ * Iva (22%): ...
+ * TOTALE: ...
+ */
+
+
--- a/javascript/JS_Esercizi
+++ b/javascript/JS_Esercizi
@@ -0,0 +1,84 @@
+// ESERCIZI EXTRA: Logica e Matematica
+// REGOLE:
+// 1. Scrivi il codice SOLO negli spazi indicati.
+// 2. Non toccare i console.log di verifica in fondo.
+// 3. Controlla la console: se vedi la spunta verde ✅ hai fatto giusto!
+// 4. Se mancano delle informazioni cerca online o chiedi a me.
+// 5. Se fai delle formule, scrivi sempre e solo le parentesi tonde e non le graffe o quadre.
+
+/** ----------------------------------------------------------
+ * IL TERMOMETRO AMERICANO
+ *
+ * Converti i gradi Celsius in Fahrenheit.
+ * Per la formula, cerca online.
+ * ISTRUZIONI:
+ * 1. Crea una variabile `gradiCelsius` con valore 25.
+ * 2. Crea una variabile `gradiFahrenheit` che calcoli la conversione.
+ * ----------------------------------------------------------- */
+
+
+
+
+/** ----------------------------------------------------------
+ * CALCOLATORE BMI (Indice Massa Corporea)
+ *
+ * Calcola l'indice basato su peso e altezza.
+ * Anche in questo caso, la formula va cercata online.
+ * ISTRUZIONI:
+ * 1. Crea `peso` (kg) con valore 75.
+ * 2. Crea `altezza` (metri) con valore 1.80.
+ * 3. Crea `bmi` che contenga il risultato della formula.
+ * ----------------------------------------------------------- */
+
+
+
+
+/** ----------------------------------------------------------
+ * INDOVINA L'OUTPUT (Coercizione)
+ *
+ * Senza eseguire il codice, prova a capire cosa succede quando
+ * sommiamo numeri e stringhe.
+ * Dati di partenza:
+ * let a = 10;
+ * let b = "5";
+ * let c = 2;
+ *
+ * Operazione strana:
+ * let risultato = a + b + c;
+ *
+ * ISTRUZIONI:
+ * 1. Crea una variabile chiamata `laMiaPrevisione`.
+ * 2. Assegnale come valore la STRINGA che secondo te uscirà (es. "1052" o "17" o "152").
+ * ----------------------------------------------------------- */
+
+let a = 10;
+let b = "5";
+let c = 2;
+let risultatoReale = a + b + c;
+
+
+
+
+/* ===========================================================
+ * AREA DI VERIFICA AUTOMATICA
+ * (Non modificare nulla qui sotto)
+ * =========================================================== */
+
+// Verifica Esercizio 1
+console.log(
+    "1. Temperatura (25°C -> 77°F)", 
+    (typeof gradiFahrenheit !== 'undefined' && gradiFahrenheit === 77) ? "✅" : "❌ ERRORE (Controlla formula o nome variabile)"
+);
+
+// Verifica Esercizio 2
+// Usiamo toFixed(2) per gestire arrotondamenti minori sui decimali
+console.log(
+    "2. BMI (75kg / 1.80m)", 
+    (typeof bmi !== 'undefined' && bmi.toFixed(2) === "23.15") ? "✅" : "❌ ERRORE (Controlla formula o nome variabile)"
+);
+
+// Verifica Esercizio 3
+console.log(
+    "3. Previsione Coercizione", 
+    (typeof laMiaPrevisione !== 'undefined' && laMiaPrevisione === risultatoReale) ? "✅" : "❌ ERRORE (Controlla previsione, tipo o nome variabile)"
+);
--- a/Base/extra2/pizzeria.js
+++ b/Base/extra2/pizzeria.js
@@ -0,0 +1,40 @@
+// ESERCIZIO EXTRA: La Pizzeria Equa (Logica Pura)
+// REGOLE:
+// 1. Scrivi il codice SOLO negli spazi indicati.
+// 2. Non toccare i console.log di verifica in fondo.
+// 3. Controlla la console: se vedi la spunta verde ✅ hai fatto giusto!
+// 4. Se mancano delle informazioni cerca online o chiedi a me.
+
+/**
+ * Hai ordinato delle pizze giganti tagliate in 14 fette totali.
+ * Siete in 4 amici affamati.
+ * Volete dividere le fette in modo che TUTTI ne abbiano lo stesso numero.
+ * Quelle che avanzano (il resto), le date al cane.
+ *
+ * DOMANDA:
+ * 1. Quante fette mangia il cane (il resto)?
+ * 2. Quante fette mangia ogni amico?
+ *
+ * ISTRUZIONI:
+ * 1. Crea `fetteTotali` (14) e `amici` (4).
+ * 2. Calcola `fettePerCane` usando l'operatore Modulo `%`.
+ * (Il modulo ti dice il resto della divisione: es. 10 % 3 fa 1).
+ * 3. Calcola `fettePerAmico`.
+ * 4. Stampa: "Ogni amico mangia ... fette e al cane ne vanno ..."
+ */
+
+let fetteTotali = 14;
+let amici = 4;
+
+
+
+
+/* ===========================================================
+ * VERIFICA
+ * =========================================================== */
+console.log(
+    "Distribuzione Pizza:",
+    (typeof fettePerAmico !== 'undefined' && typeof fettePerCane !== 'undefined' && fettePerAmico === 3 && fettePerCane === 2) 
+    ? "✅" 
+    : "❌ Riprova. (Dati attesi: 3 fette a testa, 2 al cane)"
+);
--- a/Base/tutorial_interattivo.js
+++ b/Base/tutorial_interattivo.js
@@ -0,0 +1,112 @@
+/**
+ * ISTRUZIONI:
+ * 1. Leggi attentamente i commenti numerati (Step).
+ * 2. Scrivi il codice richiesto sotto il commento `// TODO:`.
+ * 3. Esegui il file (es. con Node.js o nel browser) e controlla se l'output coincide.
+ */
+
+/**
+ * ===========================================
+ * --- STEP 1: Il tuo primo comando ---
+ * 
+ * In JavaScript, usiamo `console.log()` per stampare messaggi sullo schermo.
+ * Le frasi di testo (Stringhe) devono essere racchiuse tra virgolette ("...") o apici ('...').
+ */
+
+// TODO: Scrivi un comando per stampare la frase "Benvenuto nel corso JavaScript!"
+// OUTPUT ATTESO: Benvenuto nel corso JavaScript!
+
+
+/**
+ * ===========================================
+ * --- STEP 2: Le Variabili (let) ---
+ * 
+ * Una variabile è come una scatola dove possiamo salvare un'informazione.
+ * Usiamo la parola chiave `let` per creare una variabile che può cambiare valore nel tempo.
+ * Esempio: let nome = 'Mario';
+ */
+
+// TODO: 1. Crea una variabile chiamata `corsista` e assegnale il tuo nome.
+// TODO: 2. Stampa la variabile `corsista` usando console.log.
+// OUTPUT ATTESO: (Il tuo nome)
+
+
+/**
+ * ===========================================
+ * --- STEP 3: Le Costanti (const) ---
+ * 
+ * Se sai che un valore non cambierà MAI, usa `const` invece di `let`.
+ * È una buona abitudine usare `const` per valori fissi.
+ */
+
+// TODO: 1. Crea una costante chiamata `ANNO_CORRENTE` e assegnale il valore 2026 (o l'anno attuale).
+// TODO: 2. Stampa la costante.
+// OUTPUT ATTESO: 2026
+
+
+/**
+ * ===========================================
+ * --- STEP 4: I Numeri (Numbers) ---
+ * 
+ * JavaScript gestisce i numeri (interi o con la virgola) senza bisogno di virgolette.
+ * Possiamo fare operazioni matematiche: + (somma), - (sottrazione), * (moltiplicazione), / (divisione).
+ */
+
+// TODO: 1. Crea una variabile `eta` con la tua età.
+// TODO: 2. Crea una variabile `etaProssimoAnno` che sia uguale a `eta + 1`.
+// TODO: 3. Stampa `etaProssimoAnno`.
+// OUTPUT ATTESO: (La tua età + 1)
+
+
+/**
+ * ===========================================
+ * --- STEP 5: Unire le Stringhe (Concatenazione) ---
+ * 
+ * Possiamo unire testo e variabili usando il simbolo `+`.
+ * Esempio: console.log("Ciao " + nome);
+ */
+
+let linguaggio = "JavaScript";
+
+// TODO: Usa console.log per stampare la frase: "Sto imparando JavaScript"
+// Devi costruire la frase unendo la stringa "Sto imparando " e la variabile `linguaggio`.
+// OUTPUT ATTESO: Sto imparando JavaScript
+
+
+/**
+ * ===========================================
+ * --- STEP 6: I Booleani (Boolean) ---
+ * 
+ * Un booleano può avere solo due valori: `true` (vero) o `false` (falso).
+ * Servono per la logica del programma (es. utente è loggato? è maggiorenne?).
+ */
+
+// TODO: 1. Crea una variabile `stoImparando` e impostala su `true`.
+// TODO: 2. Stampa la variabile.
+// OUTPUT ATTESO: true
+
+
+/**
+ * ===========================================
+ * --- STEP 7: Controllare il Tipo (typeof) ---
+ * 
+ * A volte non sappiamo che tipo di dato contiene una variabile.
+ * L'operatore `typeof` ci dice se è una stringa, un numero, ecc.
+ */
+
+let numeroMisterioso = 42;
+let testoMisterioso = "42";
+let veroOFalso = false;
+let variabileVuota = null;
+let variabileSconosciuta;
+
+// TODO: Stampa il TIPO di ogni variabile usando `typeof`.
+// Esempio: console.log(typeof numeroMisterioso);
+// OUTPUT ATTESO:
+// number
+// string
+// boolean
+// object
+// undefined
+
+
--- a/Operatori/esercizi/calcolo_stipendio.js
+++ b/Operatori/esercizi/calcolo_stipendio.js
@@ -0,0 +1,19 @@
+/**
+ * Esercizio: Calcolo Stipendio Netto
+ * 
+ * DESCRIZIONE:
+ * Calcolare lo stipendio netto mensile gestendo straordinari e tasse.
+ * 
+ * Istruzioni:
+ * 1. Dichiara 'pagaOrariaBase' (es. 10) e 'oreLavorateStandard' (es. 160).
+ * 2. Dichiara 'oreStraordinario' (es. 20) e 'moltiplicatoreStraordinario' (es. 1.5, significa che valgono il 50% in più).
+ * 3. Calcola 'stipendioBase' moltiplicando le ore standard per la paga base.
+ * 4. Calcola 'stipendioStraordinario' moltiplicando le ore extra per la paga base PER il moltiplicatore.
+ * 5. Somma i due stipendi per ottenere il 'totaleLordo'.
+ * 6. Dichiara 'aliquotaTasse' (es. 0.25, ovvero il 25%).
+ * 7. Calcola le 'tasseDaPagare' (totaleLordo * aliquotaTasse).
+ * 8. Calcola 'stipendioNetto' (totaleLordo - tasseDaPagare).
+ * 9. Stampa: "Stipendio Lordo: [valore]", "Tasse: [valore]", "Netto: [valore]".
+ */
+
+
--- a/Operatori/esercizi/debug_media_voti.js
+++ b/Operatori/esercizi/debug_media_voti.js
@@ -0,0 +1,30 @@
+/**
+ * Esercizio (DEBUG): Il Calcolatore di Media Rotto
+ * 
+ * DESCRIZIONE:
+ * Uno studente sta cercando di calcolare la sua media scolastica.
+ * Ha inserito i voti di Matematica, Storia e Fisica.
+ * Ha anche 2 punti bonus che vuole aggiungere alla SOMMA dei voti prima di fare la media.
+ * 
+ * Risultato Atteso: (7 + 8 + 6 + 2) / 3 materie = 23 / 3 = 7.66...
+ * Risultato Attuale della console: 7860.6666...
+ * 
+ * Ci sono DUE tipi di errori gravi qui:
+ * 1. Errori di TIPO (Stringhe vs Numeri).
+ * 2. Errori di PRECEDENZA (Ordine delle operazioni matematiche).
+ * 
+ * Istruzioni:
+ * Correggi il codice affinché calcoli la media correttamente. 
+ * NON cancellare le variabili, correggi il loro contenuto o come vengono usate.
+ */
+
+let votoMatematica = 7;
+let votoStoria = "8";
+let votoFisica = "6";
+
+let puntiBonus = 2;
+let numeroMaterie = 3;
+
+let mediaFinale = votoMatematica + votoStoria + votoFisica + puntiBonus / numeroMaterie;
+
+console.log("La media finale è:", mediaFinale);
--- a/Operatori/esercizi/logica_range.js
+++ b/Operatori/esercizi/logica_range.js
@@ -0,0 +1,15 @@
+/**
+ * Esercizio: Verifica Range Numerico
+ * 
+ * DESCRIZIONE:
+ * Controlla se un numero (temperatura) rientra in un intervallo accettabile.
+ * 
+ * Istruzioni:
+ * 1. Dichiara una variabile 'temperatura' con un valore a scelta.
+ * 2. Dichiara 'minimaAccettabile' (es. 18) e 'massimaAccettabile' (es. 25).
+ * 3. Crea una variabile booleana 'temperaturaOk'.
+ * 4. Questa variabile deve essere true SOLO SE la temperatura è maggiore o uguale alla minima E minore o uguale alla massima.
+ * 5. Stampa: "La temperatura è accettabile? " seguito dal valore booleano.
+ */
+
+
--- a/Operatori/extra/debug_precedenza_logica.js
+++ b/Operatori/extra/debug_precedenza_logica.js
@@ -0,0 +1,22 @@
+/**
+ * Esercizio Extra (DEBUG): L'ordine conta
+ * 
+ * Descrizione:
+ * Vogliamo dare un bonus a un dipendente se:
+ * - Ha fatto vendite alte (> 1000) OPPURE ha ottime recensioni (> 4.5)
+ * - E INOLTRE (condizione obbligatoria) non deve aver ricevuto reclami.
+ * 
+ * Il codice attuale dà il bonus anche a chi ha reclami, se ha vendite alte. Questo è SBAGLIATO.
+ * 
+ * Correggi l'espressione aggiungendo le parentesi necessarie per forzare la logica corretta.
+ */
+
+let vendite = 2000;
+let recensioni = 3.0;
+let haReclami = true;
+
+let dirittoBonus = vendite > 1000 || recensioni > 4.5 && !haReclami;
+
+console.log("Diritto al bonus:", dirittoBonus);
+// OUTPUT ATTUALE (Errato): true
+// OUTPUT ATTESO (Corretto): false
--- a/Operatori/extra/sistema_sicurezza.js
+++ b/Operatori/extra/sistema_sicurezza.js
@@ -0,0 +1,30 @@
+/**
+ * Esercizio Extra: Sistema di Sicurezza Complesso
+ * 
+ * DESCRIZIONE:
+ * L'allarme deve suonare (stampare true) se si verifica una situazione di pericolo.
+ * 
+ * Variabili da dichiarare:
+ * - movimentoRilevato (bool)
+ * - orarioNotturno (bool)
+ * - finestreAperte (bool)
+ * - codiceInserito (bool)
+ * - blackout (bool)
+ * 
+ * Regole dell'allarme:
+ * L'allarme suona SE:
+ * 1. (C'è movimento rilevato E è orario notturno)
+ * OPPURE
+ * 2. (Le finestre sono aperte E il codice di sicurezza NON è stato inserito)
+ * OPPURE
+ * 3. (C'è un blackout)
+ * 
+ * Stampa il risultato della variabile 'allarmeAttivo'.
+ * Fai diverse prove cambiando i valori delle variabili per verificare che la logica regga.
+ * 
+ * Prova a creare casi di test come:
+ * - movimentoRilevato = true, orarioNotturno = true, finestreAperte = false, codiceInserito = true, blackout = false  => allarmeAttivo = true
+ * - movimentoRilevato = false, orarioNotturno = false, finestreAperte = true, codiceInserito = false, blackout = false => allarmeAttivo = true
+ * - movimentoRilevato = false, orarioNotturno = false, finestreAperte = false, codiceInserito = true, blackout = true  => allarmeAttivo = true
+ * - movimentoRilevato = false, orarioNotturno = false, finestreAperte = false, codiceInserito = true, blackout = false => allarmeAttivo = false
+ */
--- a/Operatori/extra/statistiche_personaggio.js
+++ b/Operatori/extra/statistiche_personaggio.js
@@ -0,0 +1,27 @@
+/**
+ * Esercizio Extra: Statistiche Personaggio RPG
+ * 
+ * DESCRIZIONE:
+ * In un gioco di ruolo, il danno inflitto dipende da Forza, Arma e Bonus.
+ * 
+ * Istruzioni:
+ * 1. Dichiara variabili per: 'forzaBase' (num), 'dannoArma' (num), 'moltiplicatoreCritico' (num, es 1.5).
+ * 2. Dichiara una variabile booleana 'colpoCritico' (true o false).
+ * 3. Dichiara una variabile booleana 'nemicoInDifesa' (true o false).
+ * 
+ * 4. Logica del Danno:
+ * - Il 'dannoBase' è (forzaBase + dannoArma).
+ * - Se 'colpoCritico' è true, il dannoBase viene moltiplicato per 'moltiplicatoreCritico'. 
+ * (NOTA: Non puoi usare IF. Usa l'operatore ternario se lo conosci, oppure usa la matematica: 
+ * danno * (1 + (0.5 * colpoCritico)) -> JavaScript converte true in 1 e false in 0).
+ * - Se 'nemicoInDifesa' è true, il danno finale viene dimezzato (diviso 2).
+ * 
+ * 5. Calcola e stampa il danno finale in un unico passaggio logico o passaggi sequenziali.
+ * 
+ * Sfida Matematica: Prova a risolvere sfruttando il fatto che true vale 1 e false vale 0 nei calcoli matematici.
+ * 
+ * Esempio di test:
+ * - forzaBase = 50, dannoArma = 20, moltiplicatoreCritico = 2, colpoCritico = true, nemicoInDifesa = false => danno finale = 140
+ * - forzaBase = 30, dannoArma = 10, moltiplicatoreCritico = 1.5, colpoCritico = false, nemicoInDifesa = true => danno finale = 20
+ * - forzaBase = 40, dannoArma = 15, moltiplicatoreCritico = 2, colpoCritico = true, nemicoInDifesa = true => danno finale = 55
+ */
--- a/Operatori/tutorial_interattivo.js
+++ b/Operatori/tutorial_interattivo.js
@@ -0,0 +1,107 @@
+/**
+ * ===========================================
+ * === 1. Operatori Aritmetici di Base ===
+ * JavaScript può essere usato come una calcolatrice.
+ * Abbiamo +, -, * (moltiplicazione) e / (divisione).
+ * Possiamo stampare i risultati con console.log().
+ */
+let numeroA = 10;
+let numeroB = 5;
+
+// TODO: Crea una variabile 'somma' che contenga numeroA più numeroB e stampala.
+// OUTPUT ATTESO: 15
+
+
+/**
+ * ===========================================
+ * === 2. L'operatore Modulo (Resto) ===
+ * L'operatore % restituisce il resto di una divisione.
+ * Esempio: 10 % 3 fa 1 (perché il 3 sta nel 10 tre volte con resto 1).
+ */
+let mele = 14;
+let persone = 3;
+
+// TODO: Calcola quante mele rimangono non distribuite usando l'operatore % e stampa il risultato.
+// OUTPUT ATTESO: 2
+
+
+/**
+ * ===========================================
+ * === 3. Ordine delle Operazioni (Precedenza) ===
+ * La moltiplicazione e la divisione avvengono prima di somma e sottrazione.
+ * Usa le parentesi tonde () per cambiare l'ordine.
+ */
+let costoBiglietto = 10;
+let costoPrevendita = 2;
+let numeroBiglietti = 3;
+
+// TODO: Calcola il totale corretto: (costoBiglietto + costoPrevendita) moltiplicato per numeroBiglietti.
+// OUTPUT ATTESO: 36
+
+
+/**
+ * ===========================================
+ * === 4. Operatori di Confronto (Debole vs Stretto) ===
+ * L'operatore == confronta il valore (convertendo il tipo se necessario).
+ * L'operatore === confronta valore E tipo (MOLTO PIÙ SICURO).
+ */
+let numeroStringa = "5";
+let numeroReale = 5;
+
+// TODO: Stampa il risultato di numeroStringa === numeroReale.
+// OUTPUT ATTESO: false
+
+
+/**
+ * ===========================================
+ * === 5. Operatori di Disuguaglianza ===
+ * Possiamo verificare se un numero è maggiore (>), minore (<),
+ * maggiore o uguale (>=) o minore o uguale (<=).
+ * Il risultato è sempre un booleano (true o false).
+ */
+let età = 17;
+let etàMinima = 18;
+
+// TODO: Stampa true se 'età' è maggiore o uguale a 'etàMinima', altrimenti stampa false.
+// OUTPUT ATTESO: false
+
+
+/**
+ * ===========================================
+ * === 6. Operatori Logici: AND (&&) ===
+ * L'operatore && restituisce true SOLO se entrambe le condizioni sono vere.
+ * true && true -> true
+ * true && false -> false
+ */
+let haBiglietto = true;
+let haDocumento = true;
+
+// TODO: Crea una variabile 'puòEntrare' che sia vera solo se haBiglietto E haDocumento sono entrambi veri. Stampala.
+// OUTPUT ATTESO: true
+
+
+/**
+ * ===========================================
+ * === 7. Operatori Logici: OR (||) e NOT (!) ===
+ * L'operatore || restituisce true se ALMENO UNA condizione è vera.
+ * L'operatore ! inverte il risultato (true diventa false e viceversa).
+ */
+let èSocio = false;
+let haInvito = true;
+let èBannato = false;
+
+// TODO: Stampa true se (èSocio OPPURE haInvito) E NON è bannato.
+// OUTPUT ATTESO: true
+
+
+/**
+ * ===========================================
+ * === 8. Mix Finale ===
+ * Combiniamo aritmetica e logica.
+ */
+let puntiGiocatore = 150;
+let viteRimaste = 0;
+let livelloCompletato = true;
+
+// TODO: Il gioco è "vinto" se (puntiGiocatore > 100 OPPURE livelloCompletato) E (viteRimaste > 0). Stampa il risultato.
+// OUTPUT ATTESO: false
--- a/Condizionali/esercizi/calcolo_sconto.js
+++ b/Condizionali/esercizi/calcolo_sconto.js
@@ -0,0 +1,20 @@
+/**
+ * Esercizio: Il Calcolatore di Sconti
+ * 
+ * DESCRIZIONE:
+ * Un negozio applica sconti diversi in base alla categoria del cliente.
+ * 
+ * Regole:
+ * - Categoria "vip": sconto del 20%
+ * - Categoria "standard": sconto del 10%
+ * - Categoria "nuovo": nessuno sconto (0%)
+ * - Qualsiasi altra categoria: errore (prezzo invariato)
+ * 
+ * Obiettivo:
+ * 1. Definisci una variabile `prezzoOriginale` (es. 100).
+ * 2. Definisci una variabile `categoria` (es. "vip").
+ * 3. Usa una struttura di controllo (if/else if o switch) per calcolare il `prezzoFinale`.
+ * 4. Stampa il prezzo finale.
+ */
+
+
--- a/Condizionali/esercizi/controllo_accesso.js
+++ b/Condizionali/esercizi/controllo_accesso.js
@@ -0,0 +1,20 @@
+/**
+ * Esercizio: Controllo Accesso Composto
+ * 
+ * DESCRIZIONE:
+ * Per accedere a un'area riservata, un utente deve soddisfare TRE requisiti:
+ * 1. Essere maggiorenne (>= 18).
+ * 2. Avere un documento valido (booleano true).
+ * 3. NON essere bannato dal sistema (booleano false).
+ * 
+ * OBIETTIVO:
+ * Scrivi la logica usando un unico `if` con operatori logici combinati (&&, !).
+ * Stampa "Accesso Autorizzato" o "Accesso Negato".
+ */
+
+let userAge = 20;
+let hasDocument = true;
+let isBanned = false;
+// Con questi valori, l'accesso dovrebbe essere autorizzato.
+
+
--- a/Condizionali/esercizi/debug_ordine_if.js
+++ b/Condizionali/esercizi/debug_ordine_if.js
@@ -0,0 +1,28 @@
+/**
+ * Esercizio (DEBUG): L'ordine conta
+ * 
+ * DESCRIZIONE:
+ * Questo codice dovrebbe assegnare un giudizio in base al punteggio.
+ * - Punteggio > 90: "Eccellente"
+ * - Punteggio > 70: "Buono"
+ * - Punteggio > 50: "Sufficiente"
+ * 
+ * Problema:
+ * Se metto 95, mi stampa "Sufficiente" invece di "Eccellente". Perché?
+ * 
+ * OBIETTIVO:
+ * Correggi l'ordine delle condizioni if/else if per far funzionare la logica.
+ */
+
+let punteggio = 95;
+
+// CODICE BUGGATO:
+if (punteggio > 50) {
+    console.log("Sufficiente");
+} else if (punteggio > 70) {
+    console.log("Buono");
+} else if (punteggio > 90) {
+    console.log("Eccellente");
+} else {
+    console.log("Insufficiente");
+}
--- a/Condizionali/extra/calcolatrice_switch.js
+++ b/Condizionali/extra/calcolatrice_switch.js
@@ -0,0 +1,20 @@
+/**
+ * Esercizio Extra: La Calcolatrice Semplice
+ * 
+ * DESCRIZIONE:
+ * Simula una calcolatrice che esegue operazioni base tra due numeri.
+ * 
+ * Variabili:
+ * - `num1` (es. 10)
+ * - `num2` (es. 0)
+ * - `operazione` (stringa: "+", "-", "*", "/")
+ * 
+ * OBIETTIVO:
+ * 1. Usa uno `switch` sulla variabile `operazione`.
+ * 2. Gestisci i 4 casi matematici.
+ * 3. IMPORTANTE: Nel caso della divisione ("/"), aggiungi un `if` annidato dentro il case.
+ *    Se `num2` è 0, stampa "Errore: Divisione per zero". Altrimenti stampa il risultato.
+ * 4. Gestisci il caso `default` per operazioni non riconosciute.
+ */
+
+
--- a/Condizionali/extra/debug_login_logic.js
+++ b/Condizionali/extra/debug_login_logic.js
@@ -0,0 +1,28 @@
+/**
+ * Esercizio Extra (DEBUG): Il Login Confuso
+ * 
+ * DESCRIZIONE:
+ * Un sistema di sicurezza deve verificare se un numero è "sicuro".
+ * Un numero è sicuro se:
+ * - È pari.
+ * - È compreso tra 10 e 50 (inclusi).
+ * 
+ * Il codice attuale dice che 150 è sicuro (sbagliato) e 5 è sicuro (sbagliato).
+ * 
+ * OBIETTIVO:
+ * 1. Analizza l'uso delle parentesi e degli operatori OR (||) vs AND (&&).
+ * 2. Correggi la condizione dentro l'if.
+ * 
+ * Suggerimento:
+ * L'operatore modulo `% 2 === 0` verifica se è pari.
+ */
+
+let numeroCodice = 150;
+
+// CODICE BUGGATO:
+// L'intento era: (Pari) E (MaggioreUguale 10) E (MinoreUguale 50)
+if (numeroCodice % 2 === 0 || numeroCodice >= 10 && numeroCodice <= 50) {
+    console.log(numeroCodice + " è un codice sicuro.");
+} else {
+    console.log(numeroCodice + " NON è sicuro.");
+}
--- a/Condizionali/extra/rpg_decision_tree.js
+++ b/Condizionali/extra/rpg_decision_tree.js
@@ -0,0 +1,26 @@
+/**
+ * Esercizio Extra: Gioco di Ruolo Testuale (Decision Tree)
+ * 
+ * Descrizione:
+ * Simula un turno di combattimento basato su variabili di stato.
+ * 
+ * Variabili:
+ * - `hpMostro` (punti vita mostro, es. 50)
+ * - `tuoiHp` (tuoi punti vita, es. 20)
+ * - `pozione` (booleano, hai una pozione? es. true)
+ * 
+ * Obiettivo:
+ * Scrivi una logica annidata complessa:
+ * 1. Se `tuoiHp` sono meno di 30:
+ * - Se hai la `pozione` (true) -> Stampa "Usi la pozione e ti curi."
+ * - Se NON hai la `pozione` -> Stampa "Sei nei guai! Attacchi disperatamente."
+ * 2. Altrimenti (se hai abbastanza vita):
+ * - Se `hpMostro` < 10 -> Stampa "Il mostro è debole, lo finisci!"
+ * - Altrimenti -> Stampa "Attacchi il mostro con forza."
+ * 
+ * Esempi di test:
+ * - tuoiHp = 20, hpMostro = 50, pozione = true  => "Usi la pozione e ti curi."
+ * - tuoiHp = 25, hpMostro = 50, pozione = false => "Sei nei guai! Attacchi disperatamente."
+ * - tuoiHp = 40, hpMostro = 5, pozione = false  => "Il mostro è debole, lo finisci!"
+ * - tuoiHp = 40, hpMostro = 30, pozione = true  => "Attacchi il mostro con forza."
+ */
--- a/Condizionali/tutorial_errori.js
+++ b/Condizionali/tutorial_errori.js
@@ -0,0 +1,70 @@
+console.log("--- Inizio del Tutorial Errori Base ---");
+
+/**
+ * ===========================================
+ * === 1. SyntaxError: Manca qualcosa ===
+ * Le stringhe di testo devono sempre avere le virgolette aperte e chiuse.
+ * Se ne dimentichi una, JavaScript si confonde.
+ *
+ * PAROLA CHIAVE: "Invalid or unexpected token" --> token non valido o inaspettato
+ * Decommenta il codice sottostante per vedere l'errore.
+ * Per rimuovere il commento usa [Ctrl + /] oppure [Ctrl + ù] (VsCode).
+ */
+
+// let messaggio = "Benvenuti al corso;
+// console.log(messaggio);
+
+
+/**
+ * ===========================================
+ * === 2. ReferenceError: Il nome sbagliato ===
+ * Questo errore accade quando chiami una variabile con il nome sbagliato o non definita.
+ * Ricorda che JavaScript distingue maiuscole e minuscole.
+ *
+ * PAROLA CHIAVE: "is not defined" --> non definita
+ */
+
+// let mioNome = "Luca";
+// console.log(MioNome); 
+
+
+/**
+ * ===========================================
+ * === 3. TypeError: Scrittura errata dei comandi ===
+ * A volte sbagliamo a scrivere i comandi di JavaScript.
+ *
+ * PAROLA CHIAVE: "is not a function" --> non è una funzione
+ */
+
+// console.logg("Tutto bene?");
+
+
+/**
+ * ===========================================
+ * === 4. TypeError: Le Costanti ===
+ * Hai imparato che 'const' definisce una scatola che non può cambiare contenuto.
+ * Cosa succede se proviamo a forzarla?
+ *
+ * PAROLA CHIAVE: "Assignment to constant variable"
+ */
+
+// const PIGRECO = 3.14;
+// PIGRECO = 3.50;
+
+
+/**
+ * ===========================================
+ * === 5. Errore di Logica (Tipi di dati) ===
+ * Qui NON vedrai errori rossi nel terminale. Il programma funziona,
+ * ma il risultato matematico è sbagliato.
+ *
+ * PROBLEMA: Sommare numeri e stringhe.
+ */
+
+// let prezzo = 10;
+// let spedizione = "5";
+// let totale = prezzo + spedizione;
+// console.log("Il totale è: " + totale);
+
+
+console.log("--- Fine del Tutorial ---");
--- a/Condizionali/tutorial_strutture.js
+++ b/Condizionali/tutorial_strutture.js
@@ -0,0 +1,114 @@
+/**
+ * ===========================================
+ * === 1. Il Blocco ===
+ * Le parentesi graffe {} racchiudono un blocco di codice.
+ * Tutto il codice racchiuso in queste parentesi è 'indentato' con un TAB in più.
+ * Questo aiuta a leggere e capire la struttura del codice.
+ * 
+ * Le le variabili dichiarate all'interno con 'let' o 'const' sono locali a quel blocco.
+ * Se le dichiari all'esterno, sono globali e accessibili ovunque.
+ */
+
+let globale = "Sono dichiarata fuori dal blocco";
+{
+    let locale = "Sono locale";
+    var variabileVar = "Sono var"; // 'var' non è limitata dal blocco
+    console.log(globale);
+    console.log(locale);
+}
+
+console.log(globale);       // Accessibile
+console.log(variabileVar);  // Accessibile
+// console.log(locale);        // Non accessibile (decommenta per vedere l'errore)
+
+
+
+/**
+ * ===========================================
+ * === 2. Il blocco IF (Se) ===
+ * L'istruzione 'if' esegue il codice tra le parentesi graffe {} SOLO se
+ * la condizione tra parentesi tonde () è vera (true).
+ */
+
+let temperatura = 25;
+
+// TODO: Scrivi un if che controlli se 'temperatura' è maggiore di 20.
+// Se è vero, stampa "Fa caldo".
+// OUTPUT ATTESO (con temperatura = 25): Fa caldo
+
+
+/**
+ * ===========================================
+ * === 3. IF...ELSE (Se... Altrimenti) ===
+ * 'else' gestisce il caso in cui la condizione dell'if è falsa.
+ */
+
+let password = "segreta123";
+
+// TODO: Scrivi un controllo: se la password è uguale a "segreta123", stampa "Accesso consentito".
+// Altrimenti (else), stampa "Accesso negato".
+// OUTPUT ATTESO: Accesso consentito
+
+
+/**
+ * ===========================================
+ * === 4. ELSE IF (Altrimenti Se) ===
+ * Serve per gestire più di due condizioni.
+ * Il codice si ferma alla prima condizione vera trovata.
+ */
+
+let semaforo = "giallo";
+
+// TODO: Scrivi una catena di controlli:
+// 1. Se semaforo è "verde" -> stampa "Vai"
+// 2. Altrimenti se semaforo è "giallo" -> stampa "Rallenta"
+// 3. Altrimenti se semaforo è "rosso" -> stampa "Stop"
+// 4. Altrimenti (else finale) -> stampa "Semaforo rotto"
+// OUTPUT ATTESO: Rallenta
+
+
+/**
+ * ===========================================
+ * === 5. Operatori Logici: AND (&&) ===
+ * L'operatore && (AND) richiede che ENTRAMBE le condizioni siano vere.
+ */
+
+let età = 20;
+let haBiglietto = true;
+
+// TODO: Scrivi un if che controlli se 'età' è maggiore o uguale a 18 E (&&) 'haBiglietto' è true.
+// Se entrambe sono vere, stampa "Puoi entrare".
+// Altrimenti stampa "Non puoi entrare".
+// OUTPUT ATTESO: Puoi entrare
+
+
+/**
+ * ===========================================
+ * === 6. Operatori Logici: OR (||) ===
+ * L'operatore || (OR) richiede che ALMENO UNA delle condizioni sia vera.
+ */
+
+let èWeekend = false;
+let èFesta = true;
+
+// TODO: Scrivi un if che controlli se 'èWeekend' è true O (||) 'èFesta' è true.
+// Se almeno una è vera, stampa "Oggi non si lavora".
+// OUTPUT ATTESO: Oggi non si lavora
+
+
+/**
+ * ===========================================
+ * === 7. Lo SWITCH ===
+ * Switch è un'alternativa a tanti 'else if' quando si confronta una singola variabile con valori specifici.
+ * Ricorda il comando 'break' alla fine di ogni case!
+ */
+
+let numeroMese = 3;
+
+// TODO: Scrivi uno switch sulla variabile 'numeroMese'.
+// case 1: stampa "Gennaio"
+// case 2: stampa "Febbraio"
+// case 3: stampa "Marzo"
+// default: stampa "Mese non valido"
+// OUTPUT ATTESO: Marzo
+
--- a/Iterazioni/esercizi/conta_pari.js
+++ b/Iterazioni/esercizi/conta_pari.js
@@ -0,0 +1,13 @@
+/**
+ * Esercizio: Conta i Pari
+ * 
+ * Descrizione:
+ * Vogliamo calcolare la somma di tutti i numeri PARI compresi tra 0 e 20.
+ * 
+ * Istruzioni:
+ * 1. Crea una variabile `totalePari` inizializzata a 0.
+ * 2. Scrivi un ciclo for che va da 0 a 20.
+ * 3. Usa un `if` dentro il ciclo per controllare se il numero è pari (numero % 2 === 0).
+ * 4. Se è pari, aggiungilo a `totalePari`.
+ * 5. Stampa il risultato finale.
+ */
--- a/Iterazioni/esercizi/debug_loop_stringa.js
+++ b/Iterazioni/esercizi/debug_loop_stringa.js
@@ -0,0 +1,20 @@
+/**
+ * Esercizio (DEBUG): La Stringa Fantasma
+ * 
+ * Descrizione:
+ * Il seguente codice dovrebbe stampare una linea composta da 10 trattini "-".
+ * Dovrebbe dire "Sto aggiungendo un trattino..." dieci volte, una per ogni trattino aggiunto.
+ * Invece stampa una sola volta il messaggio ed un solo trattino alla fine. Perché?
+ * 
+ * Obiettivo:
+ * 1. Analizza l'uso delle parentesi graffe e lo scope delle variabili.
+ * 2. Correggi il codice affinché stampi "----------".
+ */
+
+let linea = "";
+
+for (let i = 0; i < 10; i++);
+    console.log("Sto aggiungendo un trattino...");
+    linea = linea + "-";
+
+console.log("Risultato finale: " + linea);
--- a/Iterazioni/esercizi/potenze_due.js
+++ b/Iterazioni/esercizi/potenze_due.js
@@ -0,0 +1,14 @@
+/**
+ * Esercizio: Generatore di Potenze
+ * 
+ * Descrizione:
+ * Stampa le potenze di 2 finché il risultato non supera 1000.
+ * (Es: 2, 4, 8, 16, 32...)
+ * 
+ * Istruzioni:
+ * 1. Crea una variabile `numero` inizializzata a 2.
+ * 2. Usa un ciclo `while` con la condizione che `numero` sia minore di 1000.
+ * 3. Dentro il ciclo:
+ * - Stampa `numero`.
+ * - Moltiplica `numero` per 2.
+ */
--- a/Iterazioni/extra/debug_nested_reset.js
+++ b/Iterazioni/extra/debug_nested_reset.js
@@ -0,0 +1,26 @@
+/**
+ * Esercizio Extra (DEBUG): Il Triangolo Fallito
+ * 
+ * Descrizione:
+ * Vogliamo disegnare un triangolo rettangolo di numeri:
+ * 1
+ * 12
+ * 123
+ * 1234
+ * 12345
+ * 
+ * Il codice attuale stampa qualcosa di molto diverso e confuso. Sembra che i numeri continuino a crescere senza ripartire correttamente.
+ * 
+ * Obiettivo:
+ * Trova l'errore logico nella gestione della variabile stringa. 
+ */
+
+let riga = "";
+
+for (let i = 1; i <= 5; i++) {
+    riga += i;
+    for (let j = 1; j <= i; j++) {
+        riga += j;
+    }
+    console.log(riga);
+}
--- a/Iterazioni/extra/disegna_quadrato.js
+++ b/Iterazioni/extra/disegna_quadrato.js
@@ -0,0 +1,22 @@
+/**
+ * Esercizio Extra: Il Quadrato Vuoto
+ * 
+ * Descrizione:
+ * Disegna un quadrato 5x5, ma VUOTO all'interno.
+ * Devi usare cicli annidati e logica condizionale.
+ * 
+ * Output Desiderato:
+ * █████
+ * █   █
+ * █   █
+ * █   █
+ * █████
+ *  
+ * Logica Suggerita:
+ * 1. Ciclo esterno (righe) da 1 a 5.
+ * 2. Ciclo interno (colonne) da 1 a 5.
+ * 3. Se siamo nella prima riga, nell'ultima riga, nella prima colonna o nell'ultima colonna -> stampa "█".
+ * 4. Altrimenti -> stampa " " (spazio).
+ * 5. Costruisci ogni riga in una variabile stringa e stampala alla fine del ciclo interno.
+ * Nota: il carattere "█" può essere copiato oppure generato con ALT+219.
+ */
--- a/Iterazioni/extra/sequenza_fibonacci.js
+++ b/Iterazioni/extra/sequenza_fibonacci.js
@@ -0,0 +1,17 @@
+/**
+ * Esercizio Extra: Fibonacci (Senza Array)
+ * 
+ * Descrizione:
+ * La sequenza di Fibonacci inizia con 0 e 1. Ogni numero successivo è la somma dei due precedenti.
+ * 0, 1, 1, 2, 3, 5, 8, 13, 21...
+ * 
+ * Obiettivo:
+ * Stampa i primi 15 numeri della sequenza di Fibonacci usando solo variabili e un ciclo.
+ * NON usare array.
+ * 
+ * Ti serviranno 3 variabili:
+ * - `a` (il numero due passi fa)
+ * - `b` (il numero precedente)
+ * - `temp` (per calcolare il nuovo numero)
+ * Ad ogni giro, devi aggiornare `a` e `b` facendo "scorrere" i valori.
+ */
--- a/Iterazioni/extra2/calcolo_fattoriale.js
+++ b/Iterazioni/extra2/calcolo_fattoriale.js
@@ -0,0 +1,14 @@
+/**
+ * Esercizio Intermedio: Il Fattoriale
+ * 
+ * Descrizione:
+ * In matematica, il fattoriale di un numero n è il prodotto di tutti i numeri interi positivi minori o uguali a n.
+ * Esempio: 5! = 5 * 4 * 3 * 2 * 1 = 120.
+ * 
+ * Istruzioni:
+ * 1. Definisci una variabile `numero` (es. 5).
+ * 2. Definisci una variabile `fattoriale` inizializzata a 1.
+ * 3. Usa un ciclo for che va da `numero` fino a 1 (contando all'indietro).
+ * 4. Ad ogni giro, moltiplica `fattoriale` per il contatore del ciclo.
+ * 5. Stampa il risultato finale.
+ */
--- a/Iterazioni/extra2/debug_ciclo_infinito.js
+++ b/Iterazioni/extra2/debug_ciclo_infinito.js
@@ -0,0 +1,18 @@
+/**
+ * Esercizio Intermedio (DEBUG): Il Ciclo Infinito
+ * 
+ * Descrizione:
+ * Il seguente codice dovrebbe stampare i numeri da 10 a 15.
+ * Invece, se lo esegui, non si ferma mai (o crasha il browser/terminale).
+ * 
+ * Obiettivo:
+ * 1. Identifica perché la condizione del while rimane sempre vera.
+ * 2. Aggiungi l'istruzione mancante per far avanzare il ciclo.
+ */
+
+let contatore = 10;
+
+while (contatore <= 15) {
+    console.log("Numero: " + contatore);
+    // C'è un errore qui: manca qualcosa!
+}
--- a/Iterazioni/extra2/debug_media_voti.js
+++ b/Iterazioni/extra2/debug_media_voti.js
@@ -0,0 +1,19 @@
+/**
+ * Esercizio Intermedio (DEBUG): Calcolatrice di Media
+ * 
+ * Descrizione:
+ * Vogliamo calcolare la somma dei voti per poi fare la media.
+ * I voti sono simulati: vogliamo sommare i numeri 10, 20, 30.
+ * Il risultato atteso è 60.
+ * 
+ * Il codice attuale restituisce "0102030". Perché?
+ */
+
+let somma = "0";
+
+for (let i = 1; i <= 3; i++) {
+    let voto = i * 10; // Genera 10, 20, 30
+    somma = somma + voto;
+}
+
+console.log("Somma totale: " + somma);
--- a/Iterazioni/extra2/piano_risparmio.js
+++ b/Iterazioni/extra2/piano_risparmio.js
@@ -0,0 +1,17 @@
+/**
+ * Esercizio Intermedio: Il Piano di Risparmio
+ * 
+ * Descrizione:
+ * Vogliamo comprare una console che costa 300 euro.
+ * Partiamo con 0 euro nel salvadanaio.
+ * Ogni settimana riusciamo a mettere da parte 40 euro.
+ * 
+ * Istruzioni:
+ * 1. Crea variabili per `risparmi` (0) e `settimane` (0).
+ * 2. Usa un ciclo `while` che continua finché `risparmi` è minore di 300.
+ * 3. Dentro il ciclo:
+ * - Aggiungi 40 ai `risparmi`.
+ * - Aumenta `settimane` di 1.
+ * - (Opzionale) Stampa lo stato corrente.
+ * 4. Alla fine, stampa quante settimane sono state necessarie.
+ */
--- a/Iterazioni/extra2/somma_alternata.js
+++ b/Iterazioni/extra2/somma_alternata.js
@@ -0,0 +1,16 @@
+/**
+ * Esercizio Intermedio: La Somma Alternata
+ * 
+ * Descrizione:
+ * Vogliamo calcolare una somma particolare basata su un numero limite (es. 5).
+ * La logica è: 1 - 2 + 3 - 4 + 5...
+ * Se il numero è dispari lo sommiamo, se è pari lo sottraiamo.
+ * 
+ * Istruzioni:
+ * 1. Crea una variabile `limite` impostata a 10.
+ * 2. Crea una variabile `totale` impostata a 0.
+ * 3. Scrivi un ciclo for da 1 a `limite`.
+ * 4. Se il numero `i` è pari (i % 2 === 0), SOTTRAILO a `totale`.
+ * 5. Altrimenti (se è dispari), AGGIUNGILO a `totale`.
+ * 6. Stampa il risultato finale.
+ */
--- a/Iterazioni/extra2/somma_intervallo.js
+++ b/Iterazioni/extra2/somma_intervallo.js
@@ -0,0 +1,13 @@
+/**
+ * Esercizio Intermedio: Somma Intervallo
+ * 
+ * Descrizione:
+ * Calcola la somma di tutti i numeri compresi tra due variabili: `min` e `max`.
+ * 
+ * Istruzioni:
+ * 1. Definisci `min` = 5 e `max` = 10.
+ * 2. Definisci una variabile `somma` a 0.
+ * 3. Usa un ciclo for che parte da `min` e arriva a `max` (incluso).
+ * 4. Aggiungi il valore corrente a `somma`.
+ * 5. Stampa il risultato finale (Dovrebbe fare 5+6+7+8+9+10 = 45).
+ */
--- a/Iterazioni/extra3/debug_accumulatore_errato.js
+++ b/Iterazioni/extra3/debug_accumulatore_errato.js
@@ -0,0 +1,19 @@
+/**
+ * Esercizio Extra (DEBUG): Accumulatore Smemorato
+ * 
+ * Descrizione:
+ * Vogliamo calcolare la somma dei numeri da 1 a 3 per 3 volte e stampare il totale complessivo.
+ * Il calcolo dovrebbe essere: (1+2+3) + (1+2+3) + (1+2+3) = 6 + 6 + 6 = 18.
+ */
+
+for (let giro = 1; giro <= 3; giro++) {
+    let sommaTotale = 0;
+
+    console.log("Inizio giro " + giro);
+
+    for (let numero = 1; numero <= 3; numero++) {
+        sommaTotale = sommaTotale + numero;
+    }
+}
+
+console.log("Totale finale: ", sommaTotale);
--- a/Iterazioni/extra3/debug_nested_variable.js
+++ b/Iterazioni/extra3/debug_nested_variable.js
@@ -0,0 +1,19 @@
+/**
+ * Esercizio Extra (DEBUG): Conflitto di Variabili
+ * 
+ * Descrizione:
+ * Vogliamo stampare una griglia 3x3 di asterischi.
+ * Il programmatore ha fatto copia-incolla e ora il codice non funziona più come previsto.
+ */
+
+const DIMENSIONE = 3;
+
+for (let i = 0; i < DIMENSIONE; i++) {
+    let riga = "";
+
+    for (i = 0; i < DIMENSIONE; i++) {
+        riga += "*";
+    }
+    
+    console.log(riga);
+}
--- a/Iterazioni/extra3/fizzbuzz_semplice.js
+++ b/Iterazioni/extra3/fizzbuzz_semplice.js
@@ -0,0 +1,13 @@
+/**
+ * Esercizio Extra: Il Gioco del 3 e del 5 (FizzBuzz Semplificato)
+ * 
+ * Descrizione:
+ * Scrivi un ciclo che stampi i numeri da 1 a 20.
+ * TUTTAVIA:
+ * - Se il numero è multiplo di 3, stampa "Fizz" AL POSTO del numero.
+ * - Se il numero è multiplo di 5, stampa "Buzz" AL POSTO del numero.
+ * - Altrimenti stampa il numero normale.
+ * 
+ * Suggerimento:
+ * Usa l'operatore modulo (%) per capire se è multiplo.
+ */
--- a/Iterazioni/extra3/scacchiera.js
+++ b/Iterazioni/extra3/scacchiera.js
@@ -0,0 +1,18 @@
+/**
+ * Esercizio Extra: La Scacchiera Alternata
+ * 
+ * Descrizione:
+ * Disegna una scacchiera 4x4 dove i simboli si alternano.
+ * 
+ * Output Desiderato:
+ * X O X O
+ * O X O X
+ * X O X O
+ * O X O X
+ * 
+ * Logica Suggerita:
+ * 1. Due cicli annidati (righe e colonne).
+ * 2. La somma degli indici (riga + colonna) ti dice se sei in una casella "pari" o "dispari".
+ * 3. Se (riga + colonna) è pari -> aggiungi "X".
+ * 4. Altrimenti -> aggiungi "O".
+ */
--- a/Iterazioni/extra3/triangolo_rettangolo.js
+++ b/Iterazioni/extra3/triangolo_rettangolo.js
@@ -0,0 +1,19 @@
+/**
+ * Esercizio Extra: Il Triangolo Pieno
+ * 
+ * Descrizione:
+ * Disegna un triangolo rettangolo usando gli asterischi.
+ * 
+ * Output Desiderato (per altezza 5):
+ * *
+ * **
+ * ***
+ * ****
+ * *****
+ * 
+ * Logica:
+ * 1. Ciclo esterno (i) da 1 a 5.
+ * 2. Ciclo interno (j) da 1 a i (nota: il limite dipende da i!).
+ * 3. Accumula gli asterischi in una variabile stringa.
+ * 4. Stampa la riga e resetta la stringa per il prossimo giro.
+ */
--- a/Iterazioni/extra3/verifica_numero_primo.js
+++ b/Iterazioni/extra3/verifica_numero_primo.js
@@ -0,0 +1,16 @@
+/**
+ * Esercizio Extra: Verifica Numero Primo
+ * 
+ * Descrizione:
+ * Un numero primo è un numero divisibile SOLO per 1 e per se stesso (es. 7, 11, 13).
+ * Vogliamo scoprire se un numero dato è primo o no usando un ciclo.
+ * 
+ * Istruzioni:
+ * 1. Definisci una variabile `numeroDaControllare` (es. 17).
+ * 2. Crea una variabile booleana `ePrimo` impostata su `true` all'inizio.
+ * 3. Scrivi un ciclo for che parte da 2 e arriva fino a `numeroDaControllare - 1`.
+ * 4. Se `numeroDaControllare` è divisibile per il contatore `i` (ovvero il resto è 0):
+ * - Imposta `ePrimo` su `false`.
+ * - Usa `break` per uscire subito dal ciclo (abbiamo trovato un divisore, quindi non è primo).
+ * 5. Alla fine, stampa "È primo? " + ePrimo.
+ */
--- a/Iterazioni/tutorial_interattivo.js
+++ b/Iterazioni/tutorial_interattivo.js
@@ -0,0 +1,148 @@
+/**
+ * ===========================================
+ * === 1. Il Ciclo While: Ripetizione Condizionale ===
+ * Il 'while' (finché) è il ciclo più "puro". Funziona esattamente come un 'if',
+ * ma continua a ripetere il blocco di codice finché la condizione rimane VERA (true).
+ * È perfetto quando non sappiamo a priori quanti giri dovremo fare.
+ */
+
+let carburante = 10;
+
+// TODO: Scrivi un ciclo while che continua finché 'carburante' è maggiore di 0.
+// Dentro il ciclo:
+// 1. Stampa "Viaggio... Carburante rimasto: " + carburante
+// 2. Diminuisci 'carburante' di 2 (carburante = carburante - 2)
+// NOTA: Se dimentichi di diminuire il carburante, crei un ciclo infinito!
+
+// OUTPUT ATTESO:
+// Viaggio... Carburante rimasto: 10
+// Viaggio... Carburante rimasto: 8
+// ...
+// Viaggio... Carburante rimasto: 2
+
+
+
+/**
+ * ===========================================
+ * === 2.A Il Ciclo For: Ripetizione Controllata ===
+ * Il ciclo 'for' è una scorciatoia del while usata quando sappiamo ESATTAMENTE
+ * quante volte ripetere un'azione (es. "conta da 1 a 5").
+ *
+ * Sintassi: for (inizializzazione; condizione; incremento) { ... }
+ * Esempio:  for (let i = 1; i <= 5; i++)       { ... }
+ */
+
+// TODO: Scrivi un ciclo for che stampi la frase "Giro numero X" per 5 volte (da 1 a 5).
+// Usa la variabile 'i' come contatore.
+
+// OUTPUT ATTESO:
+// Giro numero 1
+// Giro numero 2
+// Giro numero 3
+// Giro numero 4
+// Giro numero 5
+
+
+
+/**
+ * ===========================================
+ * === 2.B Il Ciclo For: Il Conto alla Rovescia ===
+ * I cicli for non devono per forza contare in avanti (1, 2, 3...).
+ * Possono contare all'indietro usando il decremento (i--).
+ */
+
+// TODO: Scrivi un ciclo for che parte da 5 e arriva a 1 (compreso).
+// La condizione deve essere 'maggiore o uguale a 1'.
+// Ad ogni giro, DECREMENTA la variabile (i--).
+// Stampa il valore di i.
+
+// OUTPUT ATTESO:
+// 5
+// 4
+// 3
+// 2
+// 1
+
+
+
+/**
+ * ===========================================
+ * === 3. Costruire una Stringa (Accumulatore di Testo) ===
+ * I cicli sono utilissimi per costruire risultati complessi un pezzo alla volta.
+ * Qui usiamo una stringa vuota e aggiungiamo pezzi ad ogni giro.
+ */
+
+let scia = "";
+
+// TODO: Scrivi un ciclo for che gira 10 volte.
+// Ad ogni giro, aggiungi un asterisco "*" alla variabile 'scia'.
+// Alla fine del ciclo, stampa 'scia' (una volta sola).
+
+// OUTPUT ATTESO:
+// **********
+
+
+
+/**
+ * ===========================================
+ * === 4. Somma Numerica (Accumulatore Numerico) ===
+ * Come per le stringhe, possiamo accumulare numeri.
+ * Questo è il concetto base per calcolare somme, medie, bilanci, ecc.
+ */
+
+let sommaTotale = 0;
+
+// TODO: Scrivi un ciclo for che va da 1 a 10.
+// Aggiungi il valore del contatore (i) alla variabile 'sommaTotale'.
+// Stampa il risultato SOLO alla fine del ciclo.
+
+// OUTPUT ATTESO:
+// 55  (perché 1+2+3+4+5+6+7+8+9+10 fa 55)
+
+
+
+/**
+ * ===========================================
+ * === 5. Cicli Annidati (Loop dentro Loop) ===
+ * Possiamo mettere un ciclo dentro un altro.
+ * Per ogni SINGOLO giro del ciclo esterno, quello interno viene eseguito TUTTO.
+ * È come l'orologio: per ogni ora (ciclo esterno), i minuti (ciclo interno) fanno un giro completo.
+ */
+
+// TODO: Completa il codice per stampare le coordinate.
+// Usa due cicli for annidati.
+// Il ciclo esterno usa 'x' (da 1 a 2).
+// Il ciclo interno usa 'y' (da 1 a 3).
+// Stampa: "x: " + x + " - y: " + y
+
+// OUTPUT ATTESO:
+// x: 1 - y: 1
+// x: 1 - y: 2
+// x: 1 - y: 3
+// x: 2 - y: 1
+// x: 2 - y: 2
+// x: 2 - y: 3
+
+
+/**
+ * ===========================================
+ * === 6. Break e Continue (Controllo del Flusso) ===
+ * A volte vogliamo alterare il comportamento normale del ciclo:
+ * - 'break': Interrompe il ciclo immediatamente (esce dalle graffe).
+ * - 'continue': Salta SOLO il giro corrente e passa subito al successivo.
+ */
+
+// TODO: Scrivi un ciclo for da 1 a 10.
+// Se il numero è 5, usa 'continue' (saltalo, non stamparlo).
+// Se il numero è 8, usa 'break' (ferma tutto il ciclo).
+// In tutti gli altri casi: Stampa il numero.
+
+// OUTPUT ATTESO:
+// 1
+// 2
+// 3
+// 4
+// 6  <-- nota che manca il 5
+// 7
+// (l'8 e i successivi non ci sono perché abbiamo rotto il ciclo)
+
--- a/Funzioni/esercizi/area_rettangolo.js
+++ b/Funzioni/esercizi/area_rettangolo.js
@@ -0,0 +1,15 @@
+/**
+ * Esercizio: Calcolo Area
+ * 
+ * Descrizione:
+ * Scrivi una funzione che calcoli l'area di un rettangolo e la restituisca.
+ * 
+ * Istruzioni:
+ * 1. Crea una funzione `calcolaArea` che accetta due parametri: `base` e `altezza`.
+ * 2. La funzione deve restituire (`return`) il prodotto dei due numeri.
+ * 3. Fuori dalla funzione, definisci due variabili per base e altezza.
+ * 4. Chiama la funzione passando le variabili e stampa il risultato in una frase: "L'area è: [risultato]".
+ * 
+ * Con base = 5 e altezza = 10, l'output dovrebbe essere "L'area è: 50".
+ * Con base = 7 e altezza = 3, l'output dovrebbe essere "L'area è: 21".
+ */
--- a/Funzioni/esercizi/convertitore_valuta.js
+++ b/Funzioni/esercizi/convertitore_valuta.js
@@ -0,0 +1,15 @@
+/**
+ * Esercizio: Convertitore Euro-Dollaro
+ * 
+ * Descrizione:
+ * Simula un convertitore di valuta semplice.
+ * 
+ * Istruzioni:
+ * 1. Crea una funzione `convertiInDollari` che accetta un parametro `euro`.
+ * 2. Assumi che il tasso di cambio sia 1.1 (1 Euro = 1.1 Dollari).
+ * 3. La funzione deve restituire l'importo convertito.
+ * 4. Chiama la funzione con 50 euro e stampa il risultato.
+ * 
+ * Con 50 euro, l'output dovrebbe essere "50 Euro sono 55 Dollari".
+ * Con 100 euro, l'output dovrebbe essere "100 Euro sono 110 Dollari".
+ */
--- a/Funzioni/esercizi/debug_qualcosa_mancante.js
+++ b/Funzioni/esercizi/debug_qualcosa_mancante.js
@@ -0,0 +1,21 @@
+/**
+ * Esercizio (DEBUG): Il Risultato Scomparso
+ * 
+ * Descrizione:
+ * Vogliamo calcolare il cubo di un numero (numero**3) oppure (numero * numero * numero).
+ * Il codice esegue il calcolo, ma quando stampiamo il risultato otteniamo "undefined".
+ * 
+ * Obiettivo:
+ * 1. Analizza la funzione `calcolaCubo`.
+ * 2. Trova cosa manca per far "uscire" il valore dalla funzione.
+ * 3. Correggi il codice.
+ */
+
+function calcolaCubo(n) {
+    let cubo = n * n * n;
+}
+
+let risultato = calcolaCubo(3);
+console.log("Il cubo di 3 è: " + risultato); 
+// Attualmente stampa: "Il cubo di 3 è: undefined"
+// Dovrebbe stampare: "Il cubo di 3 è: 27"
--- a/Funzioni/extra/calcolatrice_funzionale.js
+++ b/Funzioni/extra/calcolatrice_funzionale.js
@@ -0,0 +1,26 @@
+/**
+ * Esercizio Extra: Calcolatrice Modulare
+ * 
+ * Descrizione:
+ * Invece di fare tutto in una funzione, creeremo piccole funzioni specializzate.
+ * 
+ * Istruzioni:
+ * 1. Crea almeno tre funzioni semplici che restituiscono un valore:
+ * - `somma(a, b)`
+ * - `sottrai(a, b)`
+ * - `moltiplica(a, b)`
+ * - (opzionale) `dividi(a, b)`
+ * 
+ * 2. Crea una funzione principale `eseguiOperazione` che accetta 3 parametri:
+ * - `n1`
+ * - `n2`
+ * - `operazione` (una stringa "+", "-", "*" o "/")
+ * 
+ * 3. Dentro `eseguiOperazione`, usa un `if` o `switch` su `operazione`.
+ * 4. In base al tipo, CHIAMA la funzione specifica (es. `somma(n1, n2)`) e restituisci il suo risultato.
+ * 
+ * Con 5, 3 e "+" come input, `eseguiOperazione` dovrebbe restituire 8.
+ * Con 10, 4 e "-" dovrebbe restituire 6.
+ * Con 6, 7 e "*" dovrebbe restituire 42.
+ * Con 20, 5 e "ciao" dovrebbe restituire undefined, null o NaN.
+ */
--- a/Funzioni/extra/debug_shadowing.js
+++ b/Funzioni/extra/debug_shadowing.js
@@ -0,0 +1,24 @@
+/**
+ * Esercizio Extra (DEBUG): Variabili Fantasma (Shadowing)
+ * 
+ * Descrizione:
+ * Il programmatore voleva aggiornare una variabile globale `punteggio` dentro una funzione.
+ * Tuttavia, ha commesso un errore nella dichiarazione dei parametri o delle variabili interne,
+ * creando una nuova variabile locale che "nasconde" quella globale.
+ * 
+ * Il punteggio finale rimane 0 invece di 10.
+ * 
+ * Obiettivo:
+ * Correggi la funzione affinché modifichi la variabile esterna `punteggioTotale`.
+ */
+
+let punteggioTotale = 0;
+
+function aggiungiPunti(punti) {
+    let punteggioTotale = punti;
+
+    console.log("Punteggio dentro la funzione: " + punteggioTotale);
+}
+
+aggiungiPunti(10);
+console.log("Punteggio finale globale: " + punteggioTotale); // Stampa 0, dovrebbe essere 10.
--- a/Funzioni/extra/numero_primo.js
+++ b/Funzioni/extra/numero_primo.js
@@ -0,0 +1,22 @@
+/**
+ * Esercizio Extra: Verifica Numero Primo
+ * 
+ * Descrizione:
+ * Un numero primo è divisibile solo per 1 e per se stesso.
+ * 
+ * Obiettivo:
+ * Scrivi una funzione `èPrimo(n)` che restituisce `true` se il numero è primo, e `false` se non lo è.
+ * 
+ * Istruzioni:
+ * 1. La funzione accetta un numero `n`.
+ * 2. Se `n` è minore di 2, restituisci `false`.
+ * 3. Usa un ciclo `for` che parte da 2 e arriva fino a `n - 1`.
+ * 4. Dentro il ciclo, controlla se `n` è divisibile per il contatore (n % i === 0).
+ * 5. Se trovi un divisore, restituisci SUBITO `false` (il numero non è primo).
+ * 6. Se il ciclo finisce senza trovare divisori, restituisci `true`.
+ * 
+ * Con 7 dovrebbe restituire `true`
+ * Con 10 dovrebbe restituire `false`
+ * Con 401 dovrebbe restituire `true`
+ * Con 459 dovrebbe restituire `false` 
+ */
--- a/Funzioni/tutorial_interattivo.js
+++ b/Funzioni/tutorial_interattivo.js
@@ -0,0 +1,115 @@
+/**
+ * ===========================================
+ * === 1. Dichiarazione e Chiamata ===
+ * Una funzione è un blocco di codice riutilizzabile.
+ * Si dichiara con la parola chiave 'function'.
+ * Il codice dentro la funzione non viene eseguito finché non la "chiami".
+ */
+
+// Esempio:
+function saluta() {
+    console.log("Ciao mondo!");
+}
+// Per eseguirla:
+saluta();
+
+// TODO: Dichiara una funzione chiamata 'stampaBenvenuto' che stampi "Benvenuto al corso!".
+// Poi chiama la funzione.
+
+// OUTPUT ATTESO:
+// Benvenuto al corso!
+
+
+/**
+ * ===========================================
+ * === 2. I Parametri ===
+ * Le funzioni possono ricevere dati in ingresso chiamati "parametri".
+ * I parametri agiscono come variabili locali dentro la funzione.
+ */
+
+function salutaPersona(nome) {
+    console.log("Ciao " + nome);
+}
+
+// TODO: Chiama la funzione 'salutaPersona' due volte:
+// 1. Passando il nome "Mario".
+// 2. Passando il nome "Luigi".
+
+// OUTPUT ATTESO:
+// Ciao Mario
+// Ciao Luigi
+
+
+/**
+ * ===========================================
+ * === 3. Parametri Multipli ===
+ * Puoi passare più parametri separandoli da virgola.
+ * L'ordine è importante!
+ */
+
+// TODO: Scrivi una funzione 'descriviPersona' che accetta due parametri: 'nome' e 'età'.
+// La funzione deve stampare: nome + " ha " + età + " anni."
+// Poi chiamala con "Anna" e 25.
+
+// OUTPUT ATTESO:
+// Anna ha 25 anni.
+
+
+/**
+ * ===========================================
+ * === 4. Il Valore di Ritorno (Return) ===
+ * Una funzione può "restituire" un risultato al codice che l'ha chiamata.
+ * Si usa la parola chiave 'return'.
+ */
+
+function somma(a, b) {
+    let risultato = a + b;
+    return risultato;
+}
+
+let x = somma(5, 3); // x ora vale 8. Nulla viene stampato qui.
+console.log("Il risultato è: " + x);
+
+// TODO: Scrivi una funzione 'moltiplica' che accetta due numeri e RESTITUISCE (return) il loro prodotto.
+// Poi salva il risultato di moltiplica(4, 5) in una variabile e stampalo.
+
+// OUTPUT ATTESO:
+// 20
+
+
+/**
+ * ===========================================
+ * === 5. Usare le Funzioni nella Logica ===
+ * Possiamo usare il valore restituito da una funzione direttamente dentro un 'if'.
+ */
+
+// TODO: Scrivi una funzione 'èMaggiorenne' che accetta un numero (età).
+// Se età >= 18 restituisce true, altrimenti false.
+// Poi scrivi un if che usa questa funzione per stampare "Sei maggiorenne" o "Sei minorenne".
+
+// OUTPUT ATTESO (provando con 20):
+// Sei maggiorenne
+
+
+/**
+ * ===========================================
+ * === 6. Scope (Visibilità) ===
+ * Le variabili definite dentro una funzione (con let) NON esistono fuori di essa.
+ * Stessa cosa vale per i parametri, che sono visibili SOLO dentro la funzione.
+ * È chiamato "scope" (ambito) della variabile.
+ */
+
+function testScope(variabileLocale) {
+    let segreto = "Codice123" + variabileLocale;
+    return segreto;
+}
+
+// TODO: Prova a decommentare la riga sotto e osserva l'errore.
+// console.log(segreto);
+// console.log(variabileLocale);
+
+// TODO: Correggi l'errore: crea una variabile 'codiceEsterno' e assegnale il risultato della chiamata a 'testScope("456")'.
+// Poi stampa 'codiceEsterno'.
+
+// OUTPUT ATTESO:
+// Codice123456
--- a/Array/esercizi/conversione_gradi.js
+++ b/Array/esercizi/conversione_gradi.js
@@ -0,0 +1,16 @@
+/**
+ * Esercizio Intermedio: Convertitore Celsius-Fahrenheit
+ * 
+ * Obiettivo: Utilizzare .map() per trasformare dati numerici.
+ * 
+ * GradiFahrenheit = (GradiCelsius * 1.8) + 32
+ * 
+ * 1. Dato l'array 'temperatureCelsius' fornito.
+ * 2. Usa il metodo .map() per creare un nuovo array 'temperatureFahrenheit'.
+ * 3. Assicurati che ogni numero venga convertito correttamente.
+ * 4. Stampa il nuovo array.
+ */
+
+let temperatureCelsius = [0, 10, 20, 30, 100];
+
+// Scrivi qui il tuo codice usando .map()
--- a/Array/esercizi/debug_colori.js
+++ b/Array/esercizi/debug_colori.js
@@ -0,0 +1,18 @@
+/**
+ * Esercizio Intermedio: Debugging Indici (CORREGGI IL CODICE)
+ * 
+ * Obiettivo: Identificare e correggere un errore comune relativo agli indici degli array.
+ * 
+ * Il codice sottostante dovrebbe stampare l'ultimo colore della lista ('Viola').
+ * Tuttavia, stampa 'undefined'. Perché?
+ * 
+ * 1. Analizza il codice.
+ * 2. Correggi l'indice utilizzato nel console.log.
+ */
+
+let coloriArcobaleno = ['Rosso', 'Arancione', 'Giallo', 'Verde', 'Blu', 'Indaco', 'Viola'];
+
+// CODICE NON FUNZIONANTE DA CORREGGERE
+let ultimoColore = coloriArcobaleno[coloriArcobaleno.length];
+
+console.log("L'ultimo colore è:", ultimoColore);
--- a/Array/esercizi/lista_pianeti.js
+++ b/Array/esercizi/lista_pianeti.js
@@ -0,0 +1,12 @@
+/**
+ * Esercizio Intermedio: Gestione lista Pianeti
+ * 
+ * Obiettivo: Manipolare un array aggiungendo e rimuovendo elementi.
+ * 
+ * 1. Inizia con l'array 'pianeti' seguente: "Mercurio", "Venere", "Terra", "Marte".
+ * 2. Usa i metodi degli array per arrivare a questo risultato: ["Terra", "Giove"]
+ * 3. Stampa l'array risultante.
+ * 
+ */
+
+// Scrivi qui il tuo codice
--- a/Array/extra/debug_inventario.js
+++ b/Array/extra/debug_inventario.js
@@ -0,0 +1,23 @@
+/**
+ * Esercizio Extra: Debugging Inventario Negozio (CORREGGI IL CODICE)
+ * 
+ * Obiettivo: Risolvere un bug logico dove l'array viene modificato in modo errato.
+ * 
+ * Il codice dovrebbe rimuovere l'ultimo oggetto e aggiornare l'inventario,
+ * ma sembra che stia rimuovendo l'oggetto sbagliato o causando errori.
+ * 
+ * 1. Esegui il codice (mentalmente o con Node) per vedere cosa succede.
+ * 2. Correggi la logica affinché 'Mouse' venga rimosso correttamente.
+ * 3. Assicurati che anche i prezzi vengano aggiornati correttamente.
+ */
+
+let inventario = ['Tastiera', 'Monitor', 'Laptop', 'Mouse'];
+let prezzi = [20, 150, 800, 15];
+
+prezzi.pop();
+inventario[inventario.length] = 'Tablet';
+inventario.shift();
+prezzi[0] = 15;
+
+console.log("Inventario rimasto:", inventario);
+console.log("Prezzi attuali:", prezzi);
--- a/Array/extra/playlist_musicale.js
+++ b/Array/extra/playlist_musicale.js
@@ -0,0 +1,23 @@
+/**
+ * Esercizio Extra: Simulatore Playlist Musicale
+ * 
+ * Obiettivo: Combinare push, shift e la logica degli array per gestire una coda di riproduzione.
+ * 
+ * Immagina di gestire una playlist dinamica:
+ * 1. Crea un array chiamato 'canzoni' con almeno 5 titoli di canzoni (stringhe).
+ * 2. Crea un array vuoto chiamato 'inCoda' che rappresenta la coda di riproduzione.
+ * 3. Aggiungi 3 canzoni casuali alla playlist 'inCoda':
+ *   - Usa 'push' per aggiungere canzoni in coda.
+ *   - Non rimuovere le canzoni dalla lista 'canzoni'.
+ *   - Per selezionare l'indice casuale delle canzoni:
+ *     1. Usa Math.random() per generare un numero casuale.
+ *     2. Moltiplica per la lunghezza dell'array 'canzoni'.
+ *     3. Usa Math.floor() per ottenere un indice valido.
+ *   - Non importa se ci sono duplicati nella playlist.
+ * 4. Simula la riproduzione della prima canzone in coda:
+ *   - Stampa "In riproduzione: [Nome Canzone]"
+ *   - Rimuovi quella canzone dalla lista 'inCoda'.
+ * 5. Stampa le canzoni rimanenti in coda e il numero totale di canzoni rimaste.
+ * 6. Esegui il codice e verifica che funzioni come previsto
+ *    (ogni esecuzione dovrebbe dare risultati diversi a causa della casualità).
+ */
--- a/Array/extra/scontrino_fiscale.js
+++ b/Array/extra/scontrino_fiscale.js
@@ -0,0 +1,14 @@
+/**
+ * Esercizio Extra: Calcolo IVA Scontrino
+ * 
+ * Obiettivo: Utilizzare .map() per calcoli finanziari su una lista.
+ * 
+ * Hai una lista di prezzi netti. Devi calcolare il prezzo finale aggiungendo l'IVA al 22%.
+ * 
+ * 1. Dato un array di prezzi netti: [100, 50, 200, 10].
+ * 2. Crea un nuovo array 'prezziIvati' usando .map().
+ * 3. La logica all'interno di map deve essere: prezzo * 1.22.
+ * 4. Formattare i numeri risultanti come stringhe con "€" davanti (es. "€122"), facendo una seconda map.
+ * 5. Stampa la lista dei prezzi finali.
+ * 6. Calcola il totale dei prezzi ivati e stampalo.
+ */
--- a/Array/tutorial_interattivo.js
+++ b/Array/tutorial_interattivo.js
@@ -0,0 +1,99 @@
+// TUTORIAL INTERATTIVO: Array e Metodi Fondamentali
+// Segui gli step, leggi i commenti e completa i TODO.
+// Esegui questo file con Node.js per verificare i risultati.
+
+/**
+ * =============================================
+ * === 1. Creazione e Accesso tramite Indici ===
+ * 
+ * Un array è una lista ordinata di elementi.
+ * Gli elementi sono numerati (indicizzati) partendo da 0.
+ * Esempio: let numeri = [10, 20, 30];
+ * numeri[0] è 10.
+ */
+
+let frutti = ['Mela', 'Banana', 'Ciegia'];
+
+// TODO: Stampa in console il primo elemento ('Mela') e il terzo elemento ('Ciegia') usando gli indici.
+
+
+/**
+ * ==================================
+ * === 2. Modifica degli Elementi ===
+ * 
+ * Puoi cambiare il valore di un elemento esistente usando il suo indice.
+ * Esempio: numeri[1] = 99; (ora l'array è [10, 99, 30])
+ */
+
+let colori = ['Rosso', 'Verde', 'Blu'];
+
+// TODO: Cambia 'Verde' in 'Giallo' accedendo all'indice corretto, poi stampa l'intero array.
+
+
+/**
+ * ==============================
+ * === 3. La Proprietà Length ===
+ * 
+ * La proprietà .length ti dice quanti elementi ci sono nell'array.
+ * L'ultimo indice è sempre (length - 1).
+ */
+
+let animali = ['Gatto', 'Cane', 'Coniglio', 'Criceto'];
+
+// TODO: Stampa la lunghezza dell'array 'animali'
+// TODO: Stampa l'ultimo elemento usando la proprietà length.
+
+
+/**
+ * =====================================================
+ * === 4. Aggiungere e Rimuovere in Coda (push, pop) ===
+ * 
+ * .push(elemento) aggiunge un elemento alla fine.
+ * .pop() rimuove l'ultimo elemento e lo restituisce.
+ */
+
+let stack = [1, 2, 3];
+
+// TODO: Aggiungi il numero 7 all'array usando push.
+// TODO: Poi rimuovi l'ultimo elemento usando pop e stampalo.
+
+
+/**
+ * ========================================
+ * === 5. Rimuovere dalla Testa (shift) ===
+ * 
+ * .shift() rimuove il PRIMO elemento dell'array.
+ * Attenzione: Tutti gli indici degli altri elementi scaleranno di 1.
+ */
+
+let fila = ['Primo', 'Secondo', 'Terzo'];
+
+// TODO: Rimuovi il primo elemento della fila usando shift. Stampa l'array rimasto.
+
+
+/**
+ * ===============================
+ * === 6. Ciclare gli Elementi ===
+ * 
+ * Puoi usare un ciclo for per iterare su ogni elemento dell'array.
+ * O puoi usare un for...of per un approccio più semplice.
+ */
+
+let giorni = ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì'];
+
+// TODO: Usa un ciclo for per stampare ogni elemento dell'array 'giorni'.
+// TODO: Usa un ciclo for...of per fare lo stesso.
+
+
+/**
+ * ===============================
+ * === 7. Trasformazione (map) ===
+ * 
+ * .map() crea un NUOVO array trasformando ogni elemento del vecchio array secondo una funzione.
+ * Esempio: let doppi = numeri.map(n => n * 2);
+ */
+
+let prezzi = [10, 20, 30];
+
+// TODO: Usa map per creare un nuovo array 'prezziScontati' dove ogni prezzo è diviso per 2.
+
--- a/Oggetti/esercizi/creazione_profilo.js
+++ b/Oggetti/esercizi/creazione_profilo.js
@@ -0,0 +1,12 @@
+/**
+ * Esercizio Intermedio: Profilo Social
+ * 
+ * Obiettivo: Creare e manipolare un oggetto che rappresenta un profilo utente.
+ * 
+ * 1. Crea un oggetto 'utente' con: username, email, e online (booleano).
+ * 2. Dopo averlo creato, cambia lo stato di 'online' impostandolo al contrario di quello che è (es. se true diventa false).
+ * 3. Aggiungi una nuova proprietà 'biografia' con un testo a piacere.
+ * 4. Stampa l'oggetto finale.
+ */
+
+// Scrivi qui il tuo codice
--- a/Oggetti/esercizi/debug_accesso.js
+++ b/Oggetti/esercizi/debug_accesso.js
@@ -0,0 +1,17 @@
+/**
+ * Esercizio Intermedio: Debugging Accesso Proprietà
+ * 
+ * Il codice seguente genera un errore.
+ * L'intenzione è stampare una proprietà della pizza.
+ * 
+ * 1. Analizza perché il codice fallisce.
+ * 2. Correggi il codice affinché stampi correttamente.
+ */
+
+let pizza = {
+    tipo: "Margherita",
+    prezzo: 7
+};
+
+console.log(pizza[tipo]);
+console.log(pizza[prezzo]);
--- a/Oggetti/esercizi/listino_prezzi.js
+++ b/Oggetti/esercizi/listino_prezzi.js
@@ -0,0 +1,11 @@
+/**
+ * Esercizio Intermedio: Aggiornamento Listino
+ * 
+ * Obiettivo: Eseguire operazioni matematiche sui valori delle proprietà.
+ * 
+ * 1. Crea un oggetto 'biglietto' con proprietà: 'tipo' ("Cinema") e 'costo' (10).
+ * 2. Immagina che ci sia uno sconto: sottrai 2 dal valore della proprietà 'costo'.
+ * 3. Stampa una frase: "Il biglietto per il [tipo] costa [costo] euro."
+ */
+
+// Scrivi qui il tuo codice
--- a/Oggetti/extra/carrello_ecommerce.js
+++ b/Oggetti/extra/carrello_ecommerce.js
@@ -0,0 +1,15 @@
+/**
+ * Esercizio Extra: Carrello E-Commerce (Array di Oggetti)
+ * 
+ * Obiettivo: Lavorare con una lista (Array) dove ogni elemento è un prodotto (Oggetto).
+ * 
+ * 1. Crea un array chiamato 'carrello'.
+ * 2. Inserisci dentro l'array due oggetti prodotto manualmente.
+ *    Ogni oggetto deve avere: 'nome' (stringa) e 'prezzo' (numero).
+ *    Es: { nome: "Mouse", prezzo: 20 }, { nome: "Tastiera", prezzo: 50 }
+ * 3. Aggiungi un terzo prodotto all'array usando il metodo .push().
+ *    Il prodotto è: { nome: "Monitor", prezzo: 100 }
+ * 4. Calcolo Totale: Crea una variabile 'totale' e calcola la somma dei prezzi dei tre prodotti.
+ *    Usa un ciclo for per iterare sull'array 'carrello'.
+ * 5. Stampa: "Il totale del carrello è: [totale]"
+ */
--- a/Oggetti/extra/dashboard_complessa.js
+++ b/Oggetti/extra/dashboard_complessa.js
@@ -0,0 +1,22 @@
+/**
+ * Esercizio Extra: Dashboard Utente Complessa (Oggetti Annidati)
+ * 
+ * Obiettivo: Accedere e modificare dati dentro oggetti che sono dentro altri oggetti.
+ * 
+ * Struttura Dati:
+ * Hai un oggetto 'dashboard' che contiene le impostazioni di un utente.
+ * 
+ * 1. Crea l'oggetto seguendo questa struttura:
+ *   dashboard = {
+ *     utente: "Admin",
+ *     preferenze: {
+ *       tema: "Scuro",
+ *       notifiche: { email: true, sms: false }
+ *     }
+ *   }
+ * 2. Senza toccare la dichiarazione iniziale, modifica il valore di 'sms' in true.
+ *    (Suggerimento: usa più punti, es. oggetto.livello1.livello2...)
+ * 3. Stampa in console solo il valore del 'tema'.
+ * 4. Aggiungi una nuova proprietà 'push' dentro l'oggetto 'notifiche' e impostala a true.
+ * 5. Stampa l'intero oggetto dashboard finale.
+ */
--- a/Oggetti/extra/debug_destructuring.js
+++ b/Oggetti/extra/debug_destructuring.js
@@ -0,0 +1,24 @@
+/**
+ * Esercizio Extra: Debugging Destrutturazione
+ * 
+ * La "Destrutturazione" è un modo veloce per estrarre proprietà in variabili:
+ * const { nome } = persona; (Crea una variabile 'nome' col valore di persona.nome).
+ * 
+ * Il codice sotto cerca di estrarre la città dell'utente, ma stampa 'undefined'.
+ * 
+ * 1. Analizza la struttura dell'oggetto 'user'.
+ * 2. Correggi la riga della destrutturazione.
+ */
+
+const user = {
+    id: 1,
+    profilo: {
+        username: "anna92",
+        citta: "Roma"
+    }
+};
+
+// CODICE BUGGATO
+const { citta } = user;
+
+console.log("L'utente vive a:", citta);
--- a/Oggetti/extra/debug_pizza.js
+++ b/Oggetti/extra/debug_pizza.js
@@ -0,0 +1,84 @@
+/**
+ * Esercizio Extra: Debugging Accesso Proprietà Oggetti
+ * 
+ * Un cliente entra nella pizzeria e ordina alcune cose:
+ * - Una margherita
+ * - Un calzone ricotta e spinaci
+ * - Una birra
+ * 
+ * Nel seguente codice sono presenti alcuni errori che impediscono
+ * il corretto calcolo del totale dell'ordine.
+ * 
+ * 1. Analizza il codice e individua gli errori (dalla riga 73 in poi).
+ * 2. Correggi il codice in modo che stampi correttamente il totale dell'ordine.
+ * 3. Il totale corretto dell'ordine dovrebbe essere: 6 + 8 + 4 = 18
+ * 
+ * Nota: il menù è un pò lungo e può dar fastidio ma si può
+ * minimizzare cliccando a sinistra del LET (appare una freccetta).
+ * 
+ * [4 righe di codice da correggere, 6 errori in totale]
+ */
+
+let menu = [
+    {
+        tipo: "pizza",
+        nome: "margherita",
+        prezzo: 6
+    },
+    {
+        tipo: "pizza",
+        nome: "diavola",
+        prezzo: 8
+    },
+    {
+        tipo: "pizza",
+        nome: "quattro_stagioni",
+        prezzo: 9
+    },
+    {
+        tipo: "pizza",
+        nome: "vegetariana",
+        prezzo: 7
+    },
+    {
+        tipo: "calzone",
+        nome: "classico",
+        prezzo: 7
+    },
+    {
+        tipo: "calzone",
+        nome: "ricotta_e_spinaci",
+        prezzo: 8
+    },
+    {
+        tipo: "bevanda",
+        nome: "acqua",
+        prezzo: 2
+    },
+    {
+        tipo: "bevanda",
+        nome: "cola",
+        prezzo: 3
+    },
+    {
+        tipo: "bevanda",
+        nome: "birra",
+        prezzo: 4
+    }
+];
+
+let ordine = ["margherita", "ricotta_e_spinaci", "birra"];
+let totaleOrdine = 0;
+
+// CODICE BUGGATO
+for (let i = 1; i < menu.length; i++) {
+    let oggetto = menu[i];
+
+    if (!ordine.includes(oggetto.tipo)) {
+        console.log(oggetto.tipo + ": €" + oggetto.prezzo);
+        totaleOrdine += oggetto.nome;
+    }
+}
+
+console.log("Totale: €" + totaleOrdine);
+
--- a/Oggetti/tutorial_interattivo.js
+++ b/Oggetti/tutorial_interattivo.js
@@ -0,0 +1,123 @@
+// TUTORIAL INTERATTIVO: Oggetti in JavaScript
+// Segui gli step, leggi i commenti e completa i TODO.
+// Esegui questo file con Node.js per verificare i risultati.
+
+/**
+ * ===========================================
+ * === 1. Creazione di un Oggetto ===
+ * 
+ * Un oggetto è una collezione di coppie chiave-valore.
+ * Si usano le parentesi graffe { }.
+ * Esempio: let palla = { colore: "Rosso", dimensione: 10 };
+ */
+
+// TODO: Crea un oggetto chiamato 'persona' con le proprietà: 'nome' (stringa) e 'eta' (numero).
+// TODO: Stampa l'intero oggetto in console.
+// OUTPUT ATTESO: { nome: 'Mario', eta: 25 }
+
+
+/**
+ * ===========================================
+ * === 2. Accesso con la "Dot Notation" (Punto) ===
+ * 
+ * Per leggere un valore, usiamo il punto seguito dal nome della proprietà.
+ * Esempio: palla.colore
+ */
+
+let cane = {
+    razza: "Labrador",
+    colore: "Miele",
+    haIlGuinzaglio: true
+};
+
+// TODO: Stampa solo la razza del cane usando il punto.
+// OUTPUT ATTESO: Labrador
+
+
+/**
+ * ===========================================
+ * === 3. Accesso con la "Bracket Notation" (Parentesi Quadre) ===
+ * 
+ * Possiamo anche usare le parentesi quadre e il nome della proprietà come stringa.
+ * Questo è utile se il nome della proprietà contiene spazi o caratteri speciali.
+ * Esempio: palla["colore"]
+ */
+
+let libro = {
+    "titolo libro": "Il Signore degli Anelli",
+    pagine: 500
+};
+
+// TODO: Stampa il titolo del libro usando le parentesi quadre e le virgolette.
+// OUTPUT ATTESO: Il Signore degli Anelli
+
+
+/**
+ * ===========================================
+ * === 4. Modifica di una Proprietà ===
+ * 
+ * Gli oggetti sono mutabili. Puoi cambiare il valore di una proprietà esistente.
+ * Esempio: palla.colore = "Blu";
+ */
+
+let studente = {
+    nome: "Luca",
+    voto: 6
+};
+
+// TODO: Cambia il voto dello studente a 10. Poi stampa l'oggetto aggiornato.
+// OUTPUT ATTESO: { nome: 'Luca', voto: 10 }
+
+
+/**
+ * ===========================================
+ * === 5. Aggiungere/Rimuovere Proprietà ===
+ * 
+ * Se assegni un valore a una proprietà che non esiste, JavaScript la crea.
+ * Esempio: palla.materiale = "Gomma";
+ * 
+ * Puoi rimuovere una proprietà usando la parola chiave 'delete'.
+ * Esempio: delete palla.dimensione;
+ */
+
+let prodotto = {
+    id: 123,
+    nome: "Smartphone",
+    prezzo: 800
+};
+
+// TODO: Aggiungi una proprietà 'marca' con valore 'Samsung'.
+// TODO: Rimuovi la proprietà 'id' dall'oggetto. Stampa l'oggetto finale.
+// OUTPUT ATTESO: { nome: 'Smartphone', prezzo: 800, marca: 'Samsung' }
+
+
+/**
+ * ===========================================
+ * === 6. Oggetti Annidati ===
+ * 
+ * Le proprietà di un oggetto possono essere altri oggetti.
+ * Esempio: let auto = { motore: { tipo: "V8", cavalli: 400 } };
+ */
+
+let computer = {
+    marca: "Dell",
+    specifiche: {
+        ram: "16GB",
+        cpu: "Intel i7"
+    }
+};
+
+// TODO: Stampa la quantità di RAM del computer accedendo all'oggetto annidato.
+// OUTPUT ATTESO: 16GB
+
+
+/**
+ * ===========================================
+ * === 7. Destrutturazione di Oggetti ===
+ * 
+ * La destrutturazione permette di estrarre proprietà da un oggetto in variabili.
+ * Esempio: let { colore, dimensione } = palla;
+ */
+
+// TODO: Destruttura l'oggetto 'computer' per ottenere 'marca' e 'specifiche' in variabili separate.
+// TODO: Poi destruttura 'specifiche' per ottenere 'ram' e 'cpu' in variabili separate.
--- a/DOM+/00_ripasso/index.html
+++ b/DOM+/00_ripasso/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ripasso DOM - Step by Step</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
+    
+    <div class="container">
+        <h1>🎓 Ripasso DOM - Step by Step</h1>
+        <p class="subtitle">Selettori, Manipolazione Testo, Eventi</p>
+
+        <!-- ============ STEP 1: SELETTORI ============ -->
+        <div class="step">
+            <h2>Step 1️⃣ - Selettori CSS</h2>
+            <p class="step-description">Impara a selezionare elementi dal DOM usando querySelector</p>
+
+            <div class="exercise">
+                <h3>Esercizio 1.1: Seleziona per ID</h3>
+                <p id="messaggio-id">Questo elemento ha un ID</p>
+                <p class="risultato" id="risultato-1-1">Aspettando...</p>
+            </div>
+
+            <div class="exercise">
+                <h3>Esercizio 1.2: Seleziona per Classe</h3>
+                <p class="testo-blu">Sono blu</p>
+                <p class="testo-blu">Anche io sono blu</p>
+                <p class="risultato" id="risultato-1-2">Aspettando...</p>
+            </div>
+
+            <div class="exercise">
+                <h3>Esercizio 1.3: Seleziona per Tag</h3>
+                <span>Sono uno span</span>
+                <span>Sono un altro span</span>
+                <p class="risultato" id="risultato-1-3">Aspettando...</p>
+            </div>
+        </div>
+
+        <!-- ============ STEP 2: MANIPOLAZIONE TESTO ============ -->
+        <div class="step">
+            <h2>Step 2️⃣ - Manipolazione Testo</h2>
+            <p class="step-description">Cambia il contenuto dei tag usando textContent</p>
+
+            <div class="exercise">
+                <h3>Esercizio 2.1: Cambia Testo in un Paragrafo</h3>
+                <p id="paragrafo-da-cambiare">Clicca il bottone qui sotto per cambiarmi!</p>
+                <button id="btn-cambiaP">Cambia Testo</button>
+                <p class="risultato" id="risultato-2-1">Aspettando...</p>
+            </div>
+
+            <div class="exercise">
+                <h3>Esercizio 2.2: Scrivi nel DOM</h3>
+                <div id="area-scrittura" class="area-output"></div>
+                <button id="btn-scrivi">Scrivi nel DOM</button>
+                <p class="risultato" id="risultato-2-2">Aspettando...</p>
+            </div>
+
+            <div class="exercise">
+                <h3>Esercizio 2.3: Testo Dinamico</h3>
+                <input type="text" id="input-nome" placeholder="Scrivi il tuo nome">
+                <button id="btn-saluta">Saluta</button>
+                <p id="area-saluto" class="area-output"></p>
+                <p class="risultato" id="risultato-2-3">Aspettando...</p>
+            </div>
+        </div>
+
+        <!-- ============ STEP 3: EVENTI ============ -->
+        <div class="step">
+            <h2>Step 3️⃣ - Eventi</h2>
+            <p class="step-description">Rispondi ai click dell'utente e agli input</p>
+
+            <div class="exercise">
+                <h3>Esercizio 3.1: Click Semplice</h3>
+                <button id="btn-click">Cliccami!</button>
+                <p id="contatore-click" class="area-output">Click: 0</p>
+                <p class="risultato" id="risultato-3-1">Aspettando...</p>
+            </div>
+
+            <div class="exercise">
+                <h3>Esercizio 3.2: Input Event</h3>
+                <p>Scrivi qualcosa e vedi il risultato in tempo reale:</p>
+                <input type="text" id="input-tempo-reale" placeholder="Digita qui...">
+                <p id="echo" class="area-output">Qui apparirà quello che scrivi...</p>
+                <p class="risultato" id="risultato-3-2">Aspettando...</p>
+            </div>
+
+            <div class="exercise">
+                <h3>Esercizio 3.3: Click su Elemento Specifico</h3>
+                <div class="box-click" id="box1">Box 1</div>
+                <div class="box-click" id="box2">Box 2</div>
+                <div class="box-click" id="box3">Box 3</div>
+                <p id="log-click" class="area-output">Log click:</p>
+                <p class="risultato" id="risultato-3-3">Aspettando...</p>
+            </div>
+
+            <div class="exercise">
+                <h3>Esercizio 3.4: Toggle Classe CSS (Bonus)</h3>
+                <p id="elemento-toggle" class="elemento-normale">Clicca su di me per cambiarmi</p>
+                <p class="risultato" id="risultato-3-4">Aspettando...</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/DOM+/00_ripasso/script.js
+++ b/DOM+/00_ripasso/script.js
@@ -0,0 +1,263 @@
+/**
+ * ============================================================
+ * RIPASSO DOM - STEP BY STEP
+ * ============================================================
+ * Questo file contiene esercizi di base sul DOM.
+ * Ogni esercizio ha una soluzione che modifica l'HTML
+ * e mostra il risultato visibile immediatamente.
+ */
+
+
+// ============ STEP 1: SELETTORI ============
+
+/**
+ * ESERCIZIO 1.1: Selettori per ID
+ * Passi:
+ * 1. Seleziona l'elemento con id="messaggio-id" usando document.querySelector('#messaggio-id')
+ * 2. Scrivi il risultato in console per verificare
+ * 3. Aggiorna il paragrafo con id="risultato-1-1" scrivendo "✅ Elemento selezionato: " + il testo dell'elemento
+ */
+function esercizio_1_1() {
+    const elemento = document.querySelector('');
+
+    if (elemento) {
+        const risultato = document.querySelector('#risultato-1-1');
+        risultato.textContent = '✅ Elemento selezionato: ' + elemento.textContent;
+    }
+}
+
+
+/**
+ * ESERCIZIO 1.2: Selettori per Classe
+ * Passi:
+ * 1. Seleziona il PRIMO elemento con classe "testo-blu" usando document.querySelector
+ */
+function esercizio_1_2() {
+    const elemento = document.querySelector('');
+
+    if (elemento) {
+        const risultato = document.querySelector('#risultato-1-2');
+        risultato.textContent = '✅ Prima classe trovata: ' + elemento.textContent;
+    }
+}
+
+
+/**
+ * ESERCIZIO 1.3: Selettori per Tag
+ * Passi:
+ * 1. Seleziona il PRIMO elemento <span> usando document.querySelector
+ */
+function esercizio_1_3() {
+    const elemento = document.querySelector('');
+
+    if (elemento) {
+        const risultato = document.querySelector('#risultato-1-3');
+        risultato.textContent = '✅ Span trovato: ' + elemento.textContent;
+    }
+}
+
+
+// Eseguire gli esercizi 1.x
+esercizio_1_1();
+esercizio_1_2();
+esercizio_1_3();
+
+
+// ============ STEP 2: MANIPOLAZIONE TESTO ============
+
+/**
+ * ESERCIZIO 2.1: Cambia il testo in un paragrafo
+ * Passi:
+ * 1. Seleziona il bottone con id="btn-cambiaP"
+ * 2. Seleziona il paragrafo con id="paragrafo-da-cambiare"
+ * 3. Aggiungi un event listener al bottone che, al click:
+ *   - Cambia il textContent del paragrafo a "Ho cambiato! ✨"
+ */
+function esercizio_2_1() {
+    const btn = document.querySelector('');
+    const paragrafo = document.querySelector('');
+
+    if (btn && paragrafo) {
+        btn.addEventListener('click', () => {
+            paragrafo.textContent
+        });
+
+        const risultato = document.querySelector('#risultato-2-1');
+        risultato.textContent = "✅ Testo cambato"
+    }
+
+}
+
+
+/**
+ * ESERCIZIO 2.2: Scrivi nel DOM
+ * Passi:
+ * 1. Seleziona il bottone con id="btn-scrivi"
+ * 2. Seleziona il div con id="area-scrittura"
+ * 3. Aggiungi un event listener che, al click:
+ *   - Aggiungi un nuovo <p> con il testo "Riga aggiunta al DOM!"
+ *   - Usa append() per aggiungere il paragrafo al div
+ */
+function esercizio_2_2() {
+    const btn = document.querySelector('');
+    const area = document.querySelector('');
+
+    if (btn && area) {
+        btn.addEventListener('click', () => {
+            const nuovoParagrafo = document.createElement('');
+            nuovoParagrafo.textContent
+        });
+
+        const risultato = document.querySelector('#risultato-2-2');
+        risultato.textContent = "✅ Elemento aggiunto"
+    }
+}
+
+
+/**
+ * ESERCIZIO 2.3: Testo Dinamico da Input
+ * Passi:
+ * 1. Seleziona l'input con id="input-nome"
+ * 2. Seleziona il bottone con id="btn-saluta"
+ * 3. Seleziona il div con id="area-saluto"
+ * 4. Aggiungi un event listener al bottone che:
+ *   - Leggi il valore dell'input (input.value)
+ *   - Scrivi nel area-saluto: "Ciao [NOME]! 👋"
+ */
+function esercizio_2_3() {
+    const input = document.querySelector('');
+    const btn = document.querySelector('');
+    const area = document.querySelector('');
+
+    if (input && btn && area) {
+        btn.addEventListener('click', () => {
+            const nome = '';
+            area.textContent
+        });
+
+        const risultato = document.querySelector('#risultato-2-3');
+        risultato.textContent = "✅ Saluto inviato"
+    }
+}
+
+
+// Eseguire gli esercizi 2.x
+esercizio_2_1();
+esercizio_2_2();
+esercizio_2_3();
+
+
+// ============ STEP 3: EVENTI ============
+
+/**
+ * ESERCIZIO 3.1: Click Semplice - Contatore
+ * Passi:
+ * 1. Seleziona il bottone con id="btn-click"
+ * 2. Seleziona l'elemento con id="contatore-click"
+ * 3. Aggiungi un event listener che, al click:
+ *   - Incrementa count (count++)
+ *   - Aggiorna il testo mostrando "Click: " + count
+ */
+let count = 0; // NOTA: Variabile globale
+
+function esercizio_3_1() {
+    const btn = document.querySelector('');
+    const contatore = document.querySelector('');
+
+    if (btn && contatore) {
+        btn.addEventListener('click', () => {
+
+        });
+        const risultato = document.querySelector('#risultato-3-1');
+        risultato.textContent = "✅ Contatore attivo";
+    }
+}
+
+
+/**
+ * ESERCIZIO 3.2: Input Event - Echo Tempo Reale
+ * Passi:
+ * 1. Seleziona l'input con id="input-tempo-reale"
+ * 2. Seleziona il paragrafo con id="echo"
+ * 3. Aggiungi un event listener su 'input' (NON click!) che:
+ *   - Leggi il valore dell'input (event.target.value o input.value)
+ *   - Scrivi nel echo lo stesso testo in tempo reale
+ *   - Se input vuoto, mostra "Scrivi qualcosa..."
+ * 
+ * Nota: 'input' è l'evento che si scatta mentre l'utente digita
+ *       'click' è l'evento che si scatta quando l'utente clicca
+ *       'change' è l'evento che si scatta quando l'utente finisce di modificare
+ */
+function esercizio_3_2() {
+    const input = document.querySelector('');
+    const echo = document.querySelector('');
+
+    if (input && echo) {
+        input.addEventListener('input', (event) => {
+
+        });
+
+        const risultato = document.querySelector('#risultato-3-2');
+        risultato.textContent = "✅ Echo attivo";
+    }
+}
+
+
+/**
+ * ESERCIZIO 3.3: Click su Elementi Specifici
+ * Passi:
+ * 1. Seleziona tutti gli elementi con classe "box-click" usando querySelectorAll
+ * 2. Seleziona il paragrafo con id="log-click"
+ * 3. Per ogni box, aggiungi un event listener al click che:
+ *   - Leggi l'id del box (event.target.id)
+ *   - Crea un nuovo elemento <p>
+ *   - Imposta il testo del paragrafo a "[id del box] cliccato"
+ *   - Aggiungi il paragrafo al log usando append()
+ * 
+ * Nota: Devi usare un loop (for o forEach) per aggiungere il listener a tutti i box
+ */
+function esercizio_3_3() {
+    const boxes = document.querySelectorAll('');
+    const log = document.querySelector('');
+
+    if (boxes.length > 0) {
+        boxes.forEach((box) => {
+            box.addEventListener('click', (event) => {
+                
+            });
+        });
+
+        const risultato = document.querySelector('#risultato-3-3');
+        risultato.textContent = "✅ Log attivo";
+    }
+}
+
+
+/**
+ * ESERCIZIO 3.4 (BONUS): Toggle Classe CSS
+ * Passi:
+ * 1. Seleziona l'elemento con id="elemento-toggle"
+ * 2. Aggiungi un event listener al click che:
+ *   - Usa classList.toggle('elemento-attivo') per aggiungere/rimuovere la classe
+ * 
+ * Nota: Assicurati che in style.css esista una classe .elemento-attivo
+ */
+function esercizio_3_4() {
+    const elemento = document.querySelector('');
+
+    if (elemento) {
+        elemento.addEventListener('click', () => {
+            
+        });
+
+        const risultato = document.querySelector('#risultato-3-4');
+        risultato.textContent = "✅ Toggle attivo";
+    }
+}
+
+
+// Eseguire gli esercizi 3.x
+esercizio_3_1();
+esercizio_3_2();
+esercizio_3_3();
+esercizio_3_4();
--- a/DOM+/00_ripasso/style.css
+++ b/DOM+/00_ripasso/style.css
@@ -0,0 +1,232 @@
+/* ============================================================
+   RIPASSO DOM - STILI
+   ============================================================ */
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    color: #2c3e50;
+}
+
+.container {
+    background: white;
+    width: 100%;
+    max-width: 650px;
+    margin: 0 auto;
+    padding: 30px;
+    border-radius: 20px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #34495e;
+    margin: 0 0 10px 0;
+    font-size: 2rem;
+}
+
+.subtitle {
+    text-align: center;
+    color: #7f8c8d;
+    font-size: 1rem;
+    margin-bottom: 30px;
+}
+
+/* ============ STEP ============ */
+
+.step {
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #ddd;
+}
+
+.step:last-child {
+    border-bottom: none;
+}
+
+.step h2 {
+    color: #2980b9;
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 1.5rem;
+}
+
+.step-description {
+    color: #7f8c8d;
+    margin-bottom: 15px;
+    font-size: 0.95rem;
+    margin-top: 0;
+}
+
+/* ============ EXERCISE ============ */
+
+.exercise {
+    background: white;
+    margin-bottom: 15px;
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+    border-radius: 6px;
+    transition: box-shadow 0.2s ease;
+}
+
+.exercise:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.exercise:last-child {
+    border-bottom: none;
+}
+
+.exercise h3 {
+    color: #2c3e50;
+    margin: 15px 0 10px 0;
+    font-size: 1rem;
+}
+
+.exercise p {
+    margin: 5px 0;
+    font-size: 0.9rem;
+}
+
+.testo-blu {
+    color: #3498db;
+    font-weight: 500;
+}
+
+
+/* ============ INPUT & BUTTON ============ */
+
+input[type="text"],
+input[type="number"],
+textarea {
+    width: 100%;
+    padding: 8px;
+    margin: 8px 0;
+    border: 1px solid #bdc3c7;
+    border-radius: 5px;
+    font-size: 0.95rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    box-sizing: border-box;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+textarea:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 5px rgba(52, 152, 219, 0.2);
+}
+
+button {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 8px 5px 8px 0;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: all 0.2s ease;
+    font-size: 0.9rem;
+    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
+}
+
+button:hover {
+    background: #2980b9;
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+    transform: translateY(-1px);
+}
+
+button:active {
+    border-radius: 5px;
+    color: #2c3e50;
+    white-space: pre-wrap;
+    word-break: break-word;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+
+/* ============ RISULTATO & AREA OUTPUT ============ */
+
+.risultato {
+    background: #f8fafb;
+    border: 1px solid #d5d8dc;
+    padding: 8px;
+    border-radius: 5px;
+    margin-top: 8px;
+    color: #34495e;
+    font-size: 0.85rem;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+
+.area-output {
+    background: #f8fafb;
+    border: 1px solid #d5d8dc;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 8px;
+    color: #34495e;
+    font-size: 0.9rem;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
+    min-height: 20px;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
+/* ============ BOX CLICK ============ */
+
+.box-click {
+    display: inline-block;
+    width: 90px;
+    height: 90px;
+    background: #f0f3f4;
+    color: #2c3e50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    cursor: pointer;
+    margin: 5px;
+    font-weight: bold;
+    font-size: 0.9rem;
+    border: 1px solid #d5d8dc;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.box-click:hover {
+    background: #e8ecef;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.box-click:active {
+    transform: translateY(0);
+}
+
+/* ============ ELEMENTO TOGGLE ============ */
+
+.elemento-normale {
+    padding: 15px;
+    border: 2px solid #3498db;
+    border-radius: 8px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #2c3e50;
+}
+
+.elemento-normale:hover {
+    background: #ecf0f1;
+    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
+}
+
+.elemento-attivo {
+    background: #3498db;
+    color: white;
+    border-color: #2980b9;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
+}
--- a/DOM+/01_profilo/index.html
+++ b/DOM+/01_profilo/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profilo Utente</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
+    <div class="card-container">
+        <div class="card-header">
+            <img id="img-profilo" src="https://placehold.co/150" alt="Foto Profilo">
+            
+            <h2 id="nome-completo">Nome Cognome</h2>
+            
+            <p id="ruolo" class="ruolo-badge">Ruolo</p>
+        </div>
+
+        <div class="card-body">
+            <div class="dettaglio">
+                <strong>Email:</strong>
+                <span id="email">...</span>
+            </div>
+            
+            <div class="dettaglio">
+                <strong>Telefono:</strong>
+                <span id="telefono">...</span>
+            </div>
+            
+            <div class="dettaglio">
+                <strong>Indirizzo:</strong>
+                <span id="indirizzo">...</span>
+            </div>
+
+            <div id="box-verifica" class="verifica nascosto">
+                ✅ Utente Verificato
+            </div>
+        </div>
+
+        <div class="card-footer">
+            <button id="btn-stampa">Stampa Profilo</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/DOM+/01_profilo/script.js
+++ b/DOM+/01_profilo/script.js
@@ -0,0 +1,53 @@
+// DATI (Oggetto Singolo)
+// Immagina che questi dati arrivino da un server o da un database.
+const utente = {
+    nome: "Giulia",
+    cognome: "Verdi",
+    eta: 30,
+    email: "giulia.verdi@example.com",
+    telefono: "+39 333 1234567",
+    indirizzo: "Via Roma 10, Milano",
+    professione: "Graphic Designer",
+    fotoUrl: "https://randomuser.me/api/portraits/women/44.jpg", // Url di una foto vera
+    verificato: true // Prova a mettere false per vedere cosa succede
+};
+
+
+// 1. SELEZIONE ELEMENTI DOM
+// Esercizio: Completa i querySelector abbinando gli ID corretti presi dall'HTML
+const elNomeCompleto = document.querySelector(''); // es. #nome-completo
+const elRuolo = document.querySelector('');
+const elEmail = document.querySelector('');
+const elTelefono = document.querySelector('');
+const elIndirizzo = document.querySelector('');
+const elImmagine = document.querySelector(''); 
+const boxVerifica = document.querySelector('');
+
+
+/**
+ * 2. RIEMPIMENTO DATI
+ * Ora devi prendere i dati dall'oggetto 'utente' e metterli dentro gli elementi HTML.
+ */
+
+// A. Testo Semplice (textContent)
+// elNomeCompleto.textContent = ...
+// ...
+
+// B. Attributi (src)
+// elImmagine.src = ...
+// ...
+
+
+// C. Logica Condizionale
+// Se l'utente è "verificato" (true), mostriamo il box verde.
+// Altrimenti lo lasciamo nascosto (o lo nascondiamo esplicitamente).
+
+
+/**
+ * 3. EVENTI
+ * Fai funzionare il bottone "Stampa Profilo"
+ * Quando cliccato, deve lanciare un alert() con scritto: "Sto stampando il profilo di [NOME]"
+ * Alert permette di mostrare un messaggio all'utente e bloccare l'esecuzione finché non preme "OK".
+ * Il suo utilizzo è semplice: alert("Messaggio da mostrare");
+ */
+const btnStampa = document.querySelector('#btn-stampa');
--- a/DOM+/01_profilo/style.css
+++ b/DOM+/01_profilo/style.css
@@ -0,0 +1,105 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #2c3e50;
+}
+
+.card-container {
+    background: white;
+    width: 320px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+.card-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 30px 20px;
+}
+
+#img-profilo {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%; /* Cerchio perfetto */
+    border: 4px solid white;
+    object-fit: cover;
+    margin-bottom: 10px;
+}
+
+h2 {
+    margin: 10px 0 5px 0;
+    font-size: 24px;
+}
+
+.ruolo-badge {
+    background: rgba(255, 255, 255, 0.2);
+    display: inline-block;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 14px;
+    margin: 0;
+}
+
+.card-body {
+    padding: 20px;
+    text-align: left;
+}
+
+.dettaglio {
+    margin-bottom: 15px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+    color: #555;
+}
+
+strong {
+    color: #333;
+    display: block;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.verifica {
+    text-align: center;
+    color: #27ae60;
+    font-weight: bold;
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #e8f8f5;
+    border-radius: 5px;
+}
+
+.nascosto {
+    display: none;
+}
+
+.card-footer {
+    padding: 15px;
+    background: #f9f9f9;
+}
+
+button {
+    background: linear-gradient(to right, #667eea, #764ba2); /* Riprende l'header */
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    border-radius: 30px; /* Bottone a pillola moderno */
+    cursor: pointer;
+    font-weight: bold;
+    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
+    transition: 0.2s;
+}
+
+button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.6);
+}
--- a/DOM+/02_card_profilo/index.html
+++ b/DOM+/02_card_profilo/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profilo Utente</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
+
+    <form id="profile-form" class="profile-form">
+        <h1>Crea un utente</h1>
+        <div class="form-group">
+            <label for="nome">Nome Completo:</label>
+            <input type="text" id="nome" required>
+        </div>
+        <div class="form-group">
+            <label for="eta">Età:</label>
+            <input type="number" id="eta" required>
+        </div>
+        <div class="form-group">
+            <label for="bio">Biografia:</label>
+            <textarea id="bio" rows="4" required></textarea>
+        </div>
+        <button id="btn-crea-card">Crea Profilo</button>
+    </form>
+
+    <ul class="all-cards" id="cards-container">
+        <!-- Le card create appariranno qui -->
+    </ul>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/DOM+/02_card_profilo/script.js
+++ b/DOM+/02_card_profilo/script.js
@@ -0,0 +1,67 @@
+/**
+ * ESERCIZIO 1: Recupera i valori dagli input
+ * Selezioniamo i seguenti elementi dal DOM: `nome`, `eta`, `bio`, `cards-container` e `btn-crea-card`
+ * Sostituisci il contenuto delle virgolette con il metodo per selezionare gli elementi
+ * (document.querySelector) usando gli id corretti.
+ */
+const inputNome = "";
+const inputEta = "";
+const inputBio = "";
+const contenitoreCard = "";
+const btnCreaCard = "";
+
+
+/**
+ * FUNZIONE: cancella dati input
+ * Passi:
+ * 1. Imposta il valore di ogni input a stringa vuota
+ */
+function cancellaDatiInput() {
+}
+
+
+
+/**
+ * FUNZIONE: valida dati input
+ * Passi:
+ * 1. Controlla che il valore di ogni input non sia vuoto
+ * 2. Se uno è vuoto ritorna false
+ * 3. Se tutti sono validi, ritorna true
+ */
+function validaDatiInput() {
+    return true;
+}
+
+
+
+/**
+ * FUNZIONE: crea la card profilo
+ * Passi:
+ * 1. In input prendi i valori nome, età, bio
+ * 2. Crea un nuovo elemento <li> con document.createElement('li')
+ * 3. Impostane la classe CSS a 'card'
+ * 4. Crea un H3 con il nome
+ * 5. Crea un paragrafo con l'età
+ * 6. Crea un paragrafo con la biografia
+ * 7. Aggiungi tutti gli elementi alla card nell'ordine indicato
+ * 8. Aggiungi la card al cardsContainer
+ */
+function creaCardProfilo(nome, eta, bio) {
+}
+
+
+
+/**
+ * FUNZIONE: Event Listener sul bottone
+ * Mettiamo tutto quello che abbiamo fatto insieme in un event listener
+ * Passi:
+ * 1. Al click del bottone, leggi i valori dagli input
+ * 2. Valida i dati con validaDatiInput()
+ * 3. Se validi:
+ *   - Chiama creaCardProfilo() con i dati
+ *   - Pulisci gli input con cancellaDatiInput()
+ * 4. Se non validi, mostra un alert("Per favore, compila tutti i campi!")
+ */
+btnCreaCard.addEventListener('click', function () {
+});
+
--- a/DOM+/02_card_profilo/style.css
+++ b/DOM+/02_card_profilo/style.css
@@ -0,0 +1,94 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #2c3e50;
+}
+
+form {
+    background: #ecf0f1;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    width: 400px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+    text-align: left;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-group input {
+    width: 90%;
+    padding: 8px;
+    border: 1px solid #bdc3c7;
+    border-radius: 5px;
+}
+
+button {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.2s ease;
+}
+button:hover {
+    background: #2980b9;
+}
+
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    width: 400px;
+}
+
+.card {
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    width: 190px;
+    text-align: center;
+    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+}
+
+.card:hover {
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
+    transform: scale(1.05);
+}
+
+.card > * {
+    margin: 10px;
+    padding: 10px;
+}
+
+.card h3 {
+    background: linear-gradient(to right, #667eea, #764ba2);
+    color: white;
+    padding: 30px 5px;
+    border-radius: 5px;
+}
+
+.card p {
+    font-size: 0.9rem;
+    color: #34495e;
+}
--- a/DOM+/03_lista_semplice/index.html
+++ b/DOM+/03_lista_semplice/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>01 - Lista Semplice</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
+    
+    <div class="container">
+        <h1>Lista Semplice</h1>
+        <p class="subtitle">Crea liste dinamicamente usando cicli e DOM</p>
+
+        <div class="esercizio">
+            <h2>Frutti</h2>
+            <ul id="lista-frutti" class="lista-items">
+                <!-- Gli elementi della lista saranno creati via JavaScript -->
+            </ul>
+        </div>
+        <div class="esercizio">
+            <h2>Libri</h2>
+            <ul id="lista-libri" class="lista-items">
+                <!-- Gli elementi della lista saranno creati via JavaScript -->
+            </ul>
+        </div>
+        <div class="esercizio">
+            <h2>Cose da Fare</h2>
+            <ul id="lista-todo" class="lista-items">
+                <!-- Gli elementi della lista saranno creati via JavaScript -->
+            </ul>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/DOM+/03_lista_semplice/script.js
+++ b/DOM+/03_lista_semplice/script.js
@@ -0,0 +1,59 @@
+/**
+ * ESERCIZIO 1: Popola Lista di Frutti
+ * Questa funzione si occupa di creare gli elementi della lista
+ * seguendo questi passi:
+ * 1. Cicla l'array 'frutti'
+ * 2. Per ogni frutto, crea un elemento <li>
+ * 3. Imposta il textContent dell'li al nome del frutto
+ * 4. Aggiungi l'li alla lista nel DOM
+*/
+const frutti = ['🍎 Mela', '🍌 Banana', '🍊 Arancia', '🍐 Pera', '🍇 Uva', '🥝 Kiwi'];
+function popolaFrutti() {
+}
+
+
+
+/**
+ * ESERCIZIO 2: Popola Lista di Libri
+ * Questa funzione si occupa di creare gli elementi della lista
+ * seguendo questi passi:
+ * 1. Cicla l'array 'libri'
+ * 2. Per ogni libro, crea un elemento <li>
+ * 3. Imposta il textContent dell'li a: "TITOLO - di AUTORE"
+ * 4. Aggiungi l'li alla lista nel DOM
+*/
+const libri = [
+    { titolo: 'Il Signore degli Anelli', autore: 'J.R.R. Tolkien' },
+    { titolo: '1984', autore: 'George Orwell' },
+    { titolo: 'Il Grande Gatsby', autore: 'F. Scott Fitzgerald' },
+    { titolo: 'Harry Potter e la Pietra Filosofale', autore: 'J.K. Rowling' }
+];
+function popolaLibri() {
+}
+
+
+/**
+ * ESERCIZIO 3: Lista di cose da fare (TODO)
+ * Questa funzione si occupa di creare gli elementi della lista
+ * seguendo questi passi:
+ * 1. Cicla l'array 'todo'
+ * 2. Per ogni attività, crea un elemento <li>
+ * 3. Imposta il textContent dell'li al testo dell'attività
+ * 4. Aggiungi un evento click che, al click, cambia la classe CSS in 'completato' (toggle)
+ * 5. Aggiungi l'li alla lista nel DOM
+ */
+const todo = [
+    { testo: 'Studiare JavaScript', completato: false },
+    { testo: 'Fare esercizi sul DOM', completato: false },
+    { testo: 'Creare un progetto', completato: false },
+    { testo: 'Rivedere il codice', completato: false }
+];
+function popolaTodo() {
+}
+
+
+
+// NON MODIFICARE: Chiamate iniziali
+popolaFrutti();
+popolaLibri();
+popolaTodo();
--- a/DOM+/03_lista_semplice/style.css
+++ b/DOM+/03_lista_semplice/style.css
@@ -0,0 +1,76 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #2c3e50;
+}
+
+.container {
+    background: white;
+    width: 450px;
+    padding: 30px;
+    border-radius: 20px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    color: #34495e;
+    margin-bottom: 20px;
+}
+
+.subtitle {
+    text-align: center;
+    color: #7f8c8d;
+    font-size: 1rem;
+    margin-bottom: 25px;
+}
+
+.esercizio {
+    margin-bottom: 25px;
+    border-bottom: 1px solid black;
+}
+
+.esercizio:last-child {
+    border-bottom: none;
+}
+
+.esercizio h2 {
+    color: #2980b9;
+    margin-top: 0;
+}
+
+ul {
+    list-style-type: none;
+    padding-left: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+}
+
+li {
+    margin-bottom: 8px;
+    position: relative;
+    padding: 10px;
+    margin-right: 10px;
+    background: #ecf0f1;
+    border-radius: 8px;
+    border: 1px solid #b2b2b2;
+}
+
+li:hover {
+    background: #e0e0e0;
+    cursor: pointer;
+    transform: scale(1.05);
+    transition: all 0.05s ease-in-out;
+}
+
+.completato {
+    text-decoration: line-through;
+    color: #95a5a6;
+}
--- a/DOM+/04_lista_spesa/index.html
+++ b/DOM+/04_lista_spesa/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lista della Spesa</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
+    <div class="container">
+        <h1>🛒 Lista della Spesa</h1>
+
+        <div class="input-group">
+        </div>
+
+        <div class="totale-container">
+        </div>
+
+        <hr>
+
+        <ul id="lista-spesa">
+        </ul>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/DOM+/04_lista_spesa/script.js
+++ b/DOM+/04_lista_spesa/script.js
@@ -0,0 +1,93 @@
+// DATI INIZIALI
+// Questa lista funge da "Database" locale. Tutto ciò che vedi a schermo DEVE derivare da qui.
+// Inizialmente contiene due prodotti di esempio (rimuovete se volete)
+let lista = [
+    { prodotto: 'Pane', prezzo: 1.50, sbarrato: false },
+    { prodotto: 'Latte', prezzo: 1.20, sbarrato: false },
+    { prodotto: 'Uova', prezzo: 2.30, sbarrato: false },
+    { prodotto: 'Mele', prezzo: 0.80, sbarrato: true },
+    { prodotto: 'Caffè', prezzo: 3.50, sbarrato: false }
+];
+
+// Pre-esercizi: RIFERIMENTI AL DOM
+// Seleziona gli elementi necessari che DEVI definire nell'HTML se mancano
+const inputProdotto = document.querySelector(''); 
+const inputPrezzo = document.querySelector('');
+const btnAggiungi = document.querySelector('');
+const listaSpesa = document.querySelector('');
+const contenitoreTotale = document.querySelector('');
+
+
+/**
+ * FUNZIONE 1: Visualizza/Aggiorna Lista
+ * Questa funzione è il "motore" grafico. Deve:
+ * 1. Pulire la lista attuale nel DOM
+ * 2. Ciclare l'array 'lista'
+ * 3. Per ogni elemento, chiamare la funzione 'creaElementoLista'
+ * 4. Chiamare la funzione 'aggiornaTotale' alla fine per ricalcolare il conto
+ */
+function aggiornaLista() {
+
+}
+
+
+/**
+ * FUNZIONE 2: Crea Elemento HTML (li)
+ * Questa funzione si occupa di creare il singolo pezzetto di HTML.
+ * Deve:
+ * 1. Creare un tag <li>
+ * 2. Impostare il testo (es. "Pane - 1.50 €")
+ * 3. Se l'elemento ha la proprietà .sbarrato === true, aggiungere la classe CSS 'preso'
+ * 4. Gestire il click: se clicco sull'li, devo chiamare la funzione toggleSbarrato(elemento)
+ * 5. Appendere l'li alla listaSpesa (ul)
+ */
+function creaElementoLista(elemento) {
+
+}
+
+
+/**
+ * FUNZIONE 3: Gestione Click (Toggle Sbarrato)
+ * Questa funzione viene chiamata quando clicco su una riga.
+ * Non modifica il DOM direttamente! Deve:
+ * 1. Cambiare la proprietà 'sbarrato' dell'oggetto (da true a false o viceversa)
+ * 2. Richiamare aggiornaLista() per ridisegnare tutto aggiornato
+ */
+function toggleSbarrato(elemento) {
+
+}
+
+
+/**
+ * FUNZIONE 4: Calcola Totale
+ * Deve:
+ * 1. Creare una variabile somma = 0
+ * 2. Ciclare l'array 'lista'
+ * 3. Sommare i prezzi
+  * 4. (Opzionale) Somma solo quelli NON sbarrati
+ * 5. Scrivere il risultato nel contenitoreTotale
+ */
+function aggiornaTotale() {
+    
+}
+
+
+/**
+ * EVENTO PRINCIPALE: Click su Aggiungi
+ * 1. Leggere i valori degli input (value)
+ *    Nota che il prezzo deve essere convertito in numero.
+ *    Per farlo usa parseFloat(valore) o Number(valore)
+ * 2. Validazione: se i campi sono pieni e il prezzo > 0
+ * 3. Creare un nuovo oggetto { prodotto: ..., prezzo: ..., sbarrato: false }
+ * 4. Aggiungerlo all'array 'lista' (push)
+ * 5. Richiamare aggiornaLista()
+ * 6. Svuotare gli input
+ */
+btnAggiungi.addEventListener('click', function () {
+
+});
+
+
+// AVVIO
+// Chiamata iniziale per mostrare i dati di esempio (Pane e Latte)
+aggiornaLista();
--- a/DOM+/04_lista_spesa/style.css
+++ b/DOM+/04_lista_spesa/style.css
@@ -0,0 +1,112 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #2c3e50;
+}
+
+.container {
+    background: white;
+    width: 450px;
+    padding: 30px;
+    border-radius: 20px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+.input-group {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+input {
+    padding: 12px;
+    border: 2px solid #eee;
+    background-color: #f9f9f9;
+    border-radius: 10px;
+    flex: 1;
+    font-size: 1rem;
+    transition: 0.3s;
+}
+
+input:focus {
+    border-color: #007bff;
+    background-color: #fff;
+    outline: none;
+}
+
+/* Facciamo l'input del prezzo un po' più piccolo */
+input[type="number"] {
+    flex: 0 0 80px;
+}
+
+
+button {
+    padding: 12px 25px;
+    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    font-weight: bold;
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
+    transition: transform 0.2s;
+}
+
+button:hover {
+    transform: translateY(-2px);
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+}
+
+li {
+    background: #fff;
+    border: 1px solid #eee;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    padding: 15px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.2s;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
+}
+
+li:hover {
+    background-color: #f8f9fa;
+    transform: translateX(5px);
+    border-color: #007bff;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+.totale-container {
+    text-align: right;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+/* Stili per la lista */
+
+/* ESERCIZIO CSS:
+   Aggiungi qui sotto la classe .preso
+   Deve avere:
+   - testo sbarrato (text-decoration: line-through)
+   - colore grigino
+   - sfondo un po' scuro
+*/
--- a/DOM+/05_gestionale/index.html
+++ b/DOM+/05_gestionale/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>Gestionale Dipendenti</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
+    <h1>Gestione Dipendenti</h1>
+
+    <div class="controls">
+        <div>
+            <h3>Aggiungi Nuovo</h3>
+            <input type="text" id="input-nome" placeholder="Nome">
+            <input type="text" id="input-ruolo" placeholder="Ruolo">
+            <button id="btn-aggiungi">Aggiungi</button>
+        </div>
+        <div>
+            <h3>Cerca</h3>
+            <input type="text" id="input-ricerca" placeholder="Cerca per nome...">
+        </div>
+        <div>
+            <!-- <h3>Azioni</h3> -->
+            <!-- Zona per extra bottoni futuri -->
+        </div>
+    </div>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Nome</th>
+                <th>Ruolo</th>
+                <th>Azioni</th>
+            </tr>
+        </thead>
+        <tbody id="tabella-corpo">
+        </tbody>
+    </table>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/DOM+/05_gestionale/script.js
+++ b/DOM+/05_gestionale/script.js
@@ -0,0 +1,137 @@
+// DATI INIZIALI
+const dipendenti = [
+    { nome: "Mario Rossi", ruolo: "Sviluppatore" },
+    { nome: "Luigi Bianchi", ruolo: "Sviluppatore" },
+    { nome: "Paolo Gialli", ruolo: "Sviluppatore" },
+    { nome: "Anna Neri", ruolo: "Sviluppatore" },
+    { nome: "Carlo Verdi", ruolo: "Project Manager" },
+    { nome: "Luca Bianchi", ruolo: "Designer" },
+];
+
+// RIFERIMENTI DOM
+const tbody = document.querySelector('#tabella-corpo');
+const btnAggiungi = document.querySelector('#btn-aggiungi');
+const inputNome = document.querySelector('#input-nome');
+const inputRuolo = document.querySelector('#input-ruolo');
+const inputRicerca = document.querySelector('#input-ricerca');
+
+
+/**
+ * FUNZIONE PRINCIPALE: Visualizza Tabella
+ * Questa funzione deve:
+ * - Pulire il contenuto del tbody
+ * - Per ogni dipendente nell'array passato come argomento:
+ *   - Creare una riga (usando la funzione creaRiga)
+ *   - Aggiungere la riga al tbody
+ */
+function visualizzaTabella(lista) {
+
+}
+
+
+/**
+ * FUNZIONE 1: Crea Riga
+ * Questa funzione deve:
+ * - Creare una riga (tr)
+ * - Creare 3 celle (td): Nome, Ruolo, Azioni
+ * - Popolare le celle Nome e Ruolo con i dati corretti
+ * - Nella cella Azioni, aggiungere un bottone "Elimina"
+ * - Aggiungere un event listener al bottone "Elimina" per rimuovere il dipendente dall'array e visualizzare la tabella
+ * - Aggiungere le tre celle alla riga
+ * - Aggiungere la riga al tbody
+ * 
+ * Nota: Usare il metodo dipendenti.splice(i, 1) per rimuovere l'elemento dall'array
+ *       e poi richiamare visualizzaTabella(dipendenti) per mostrare la tabella aggiornata.
+ */
+function creaRiga(dipendente, indice) {
+
+}
+
+
+/**
+ * FUNZIONE 2: Aggiungi Dipendente
+ * 1. Leggere i valori degli input
+ * 2. SE non sono vuoti:
+ *   - Creare un oggetto { nome: ..., ruolo: ... }
+ *   - Aggiungerlo all'array 'dipendenti'
+ *   - Richiamare visualizzaTabella() per aggiornare la vista
+ *   - Pulire gli input (settarli a stringa vuota)
+ */
+btnAggiungi.addEventListener('click', () => {
+    
+});
+
+
+/**
+ * FUNZIONE 3: Ricerca
+ * 1. Leggere il testo nel campo ricerca
+ * 2. Filtrare l'array 'dipendenti' usando:
+ *   - array.filter()
+ *   - dipendente.nome.includes(testoRicerca)
+ * 3. Passare l'array filtrato a visualizzaTabella()
+ */
+inputRicerca.addEventListener('input', () => {
+    
+});
+
+
+/**
+ * FUNZIONE 4: Emoji per Ruolo
+ * Aggiungere automaticamente un'emoji accanto al nome in base al ruolo.
+ * 
+ * Passi:
+ * 1. Sviluppa la funzione getEmojiPerRuolo(ruolo) che ritorna:
+ *   - "💻" per "Sviluppatore"
+ *   - "🎨" per "Designer"
+ *   - "👤" per altri ruoli
+ * 2. Modifica la funzione creaRiga per usare getEmojiPerRuolo
+ * 3. Usare la concatenazione stringhe per la cellaNome.textContent = emoji + " " + dipendente.nome;
+ */
+function getEmojiPerRuolo(ruolo) {
+    // Implementa la logica qui
+}
+
+
+// AVVIO
+// Chiamare visualizzaTabella(dipendenti) all'inizio per mostrare i dati iniziali
+visualizzaTabella(dipendenti);
+
+
+
+/************************************************************************/
+/************************* ESERCIZI EXTRA *******************************/
+/************************************************************************/
+
+/** ESERCIZIO EXTRA:
+ * Migliorare la funzione creaRiga per aggiungere una classe CSS speciale
+ * alle righe dei dipendenti che sono "Project Manager".
+ * 
+ * Passi:
+ * 1. Aggiungi una classe .manager (o .evidenziato) che evidenzi la riga (es. background-color: #feffae;)
+ * 2. Modificare la funzione creaRiga:
+ *   - Controllare se dipendente.ruolo === "Project Manager"
+ *   - Se vero, aggiungere una classe CSS speciale alla riga (es. riga.classList.add('manager'))
+ */
+
+/** ESERCIZIO EXTRA 2:
+ * Aggiungere nel file index.html un bottone "Elimina Tutti" sopra la tabella.
+ * 
+ * Passi:
+ * 1. Aggiungere il bottone con un id specifico (es. id="btn-elimina-tutti")
+ * 2. Stilizzare il bottone con CSS se necessario (colore rosso per esempio)
+ * 3. Aggiungere un event listener al bottone nel file script.js
+ * 4. Nell'event listener, svuotare l'array dipendenti (es. dipendenti.length = 0)
+ * 5. Richiamare visualizzaTabella(dipendenti) per aggiornare la vista
+ */
+
+/**
+ * ESERCIZIO EXTRA 3:
+ * Aggiungere un contatore sopra la tabella che mostra il numero totale di dipendenti.
+ * 
+ * Passi:
+ * 1. Aggiungere un elemento HTML (es. un div o span) con un id specifico (es. id="contatore-dipendenti")
+ * 2. Mettere questo elemento sopra la tabella e stilizzarlo con CSS (metterlo almeno a destra)
+ * 3. Creare una funzione aggiornaContatore()
+ *  - Questa funzione deve aggiornare il contenuto dell'elemento contatore con il numero di dipendenti (es. dipendenti.length)
+ * 4. Chiamare aggiornaContatore() ogni volta che la tabella viene aggiornata (dopo aggiungere, eliminare, o filtrare dipendenti)
+ */
--- a/DOM+/05_gestionale/style.css
+++ b/DOM+/05_gestionale/style.css
@@ -0,0 +1,114 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+    justify-content: center;
+    align-items: center;
+    color: #2c3e50;
+    display: block;
+    padding: 40px;
+}
+.controls {
+    background: white;
+    padding: 25px;
+    border-radius: 15px;
+    border: none;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+    margin-bottom: 30px;
+}
+
+/* Esempio di combinatore figlio diretto (>) */
+.controls > div {
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.controls > div:last-child {
+    border-bottom: none;
+}
+
+input[type="text"] {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    background: #f9f9f9;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #007bff; /* Blu base */
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+table {
+    width: 100%;
+    border-collapse: separate; /* Necessario per border-radius sulla tabella */
+    border-spacing: 0;
+    margin-top: 20px;
+    background: white;
+    border-radius: 15px;
+    overflow: hidden; /* Taglia gli angoli */
+    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+
+th {
+    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
+    color: white;
+    padding: 15px;
+    text-transform: uppercase;
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+    border: none;
+}
+
+td {
+    border-bottom: 1px solid #eee;
+    padding: 15px;
+    color: #555;
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+/************************************************************/
+/* ESERCIZI CSS: "RECUPERA GLI STILI PERSI"                 */
+/* Usa solo selettori di TAG, ID (#), CLASSI (.)            */
+/* e combinatori di SPAZIO (discendente)                    */
+/************************************************************/
+
+/* LIVELLO 1: Il bottone Elimina (Discendenza)
+   Il bottone "Elimina" non ha classi, ma sappiamo che sta DENTRO il tbody.
+   Seleziona tutti i button che sono dentro il #tabella-corpo.
+   
+   Obiettivo: Sfondo rosso (#ff4444), testo bianco, nessun bordo.
+*/
+
+
+/* LIVELLO 2: Interattività (Hover su discendente)
+   Vogliamo che il bottone elimina diventi più scuro quando ci passi sopra.
+   
+   Obiettivo: Cambia il background-color in #cc0000 al passaggio del mouse.
+   Suggerimento: usa lo stesso selettore di prima + :hover
+*/
+
+
+/* LIVELLO 3: Leggibilità Riga (Hover su riga)
+   Vogliamo evidenziare tutta la riga (tr) della tabella quando il mouse ci passa sopra.
+   ATTENZIONE: Deve succedere solo nel corpo della tabella, non nell'intestazione!
+   
+   Obiettivo: Background-color grigio chiaro (#f1f1f1) al passaggio del mouse sulla riga.
+*/
+
+
+/* LIVELLO 4 (Extra): Focus sugli Input
+   Vogliamo evidenziare gli input di testo quando l'utente ci clicca dentro (:focus).
+   Ma solo quelli dentro la zona .controls!
+   
+   Obiettivo: Bordo blu (2px solid blue) e sfondo giallo chiaro (#ffffe0).
+*/
+
--- a/javascript/JS_Esercizi
+++ b/javascript/JS_Esercizi
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hub Esercizi DOM</title>
+    <style>
+        /* RESET & BASE */
+        * { box-sizing: border-box; }
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); margin: 0; padding: 40px; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+        
+        /* CONTENITORE PRINCIPALE */
+        .hub-container { background: white; width: 100%; max-width: 600px; padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
+        h1 { text-align: center; color: #333; margin-bottom: 10px; font-size: 2.5rem; }
+        p.subtitle { text-align: center; color: #666; margin-bottom: 40px; font-size: 1.1rem; }
+        
+        /* LISTA CARD */
+        .exercise-list { display: flex; flex-direction: column; gap: 20px; }
+        
+        /* CARD ESERCIZIO */
+        .card { display: flex; align-items: center; text-decoration: none; background: #fff; border: 2px solid #eee; border-radius: 12px; padding: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; }
+        .card:hover { transform: translateY(-5px); border-color: #007bff; box-shadow: 0 10px 20px rgba(0,123,255,0.15); }
+        
+        /* ICONA E TESTI */
+        .icon { font-size: 2.5rem; margin-right: 20px; width: 50px; text-align: center; }
+        .info { flex: 1; }
+        .info h3 { margin: 0 0 5px 0; color: #2c3e50; font-size: 1.2rem; }
+        .info p { margin: 0; color: #7f8c8d; font-size: 0.9rem; }
+        
+        /* TAG DIFFICOLTA' */
+        .badge { font-size: 0.75rem; font-weight: bold; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 1px; margin-left: 10px; white-space: nowrap; }
+        .easy { background-color: #e8f5e9; color: #2e7d32; }     /* Verde */
+        .medium { background-color: #fff3e0; color: #ef6c00; }   /* Arancione */
+        .hard { background-color: #ffebee; color: #c62828; }     /* Rosso */
+        
+        /* FRECCIA AL PASSAGGIO DEL MOUSE */
+        .arrow { font-size: 1.5rem; color: #ccc; transition: 0.3s; }
+        .card:hover .arrow { color: #007bff; transform: translateX(5px); }
+
+    </style>
+</head>
+<body>
+
+    <div class="hub-container">
+        <h1>Esercizi DOM</h1>
+        <p class="subtitle">Corso Web Developer</p>
+        <div class="exercise-list">
+            <a href="00_ripasso/index.html" class="card">
+                <div class="icon"></div>
+                <div class="info">
+                    <h3>0. Ripasso DOM <span class="badge easy">Base</span></h3>
+                    <p>Selettori, manipolazione base del DOM.</p>
+                </div>
+                <div class="arrow">→</div>
+            </a>
+
+            <a href="01_profilo/index.html" class="card">
+                <div class="icon">👤</div>
+                <div class="info">
+                    <h3>1. Profilo Utente <span class="badge easy">Base</span></h3>
+                    <p>Manipolazione statica, Oggetti e attributi.</p>
+                </div>
+                <div class="arrow">→</div>
+            </a>
+
+            <a href="02_card_profilo/index.html" class="card">
+                <div class="icon">🆕</div>
+                <div class="info">
+                    <h3>2. Creazione Card Utente <span class="badge easy">Base+</span></h3>
+                    <p>Form, createElement, appendChild.</p>
+                </div>
+                <div class="arrow">→</div>
+            </a>
+
+            <a href="03_lista_semplice/index.html" class="card">
+                <div class="icon">📝</div>
+                <div class="info">
+                    <h3>3. Lista Semplice <span class="badge medium">Intermedio</span></h3>
+                    <p>Cicli, Array, Creazione elementi in loop.</p>
+                </div>
+                <div class="arrow">→</div>
+            </a>
+
+            <a href="04_lista_spesa/index.html" class="card">
+                <div class="icon">🛒</div>
+                <div class="info">
+                    <h3>4. Lista Spesa <span class="badge medium">Intermedio+</span></h3>
+                    <p>Array, Cicli, Add/Remove, Totali.</p>
+                </div>
+                <div class="arrow">→</div>
+            </a>
+
+            <a href="05_gestionale/index.html" class="card">
+                <div class="icon">💼</div>
+                <div class="info">
+                    <h3>5. Gestionale <span class="badge hard">Avanzato</span></h3>
+                    <p>Tabelle, Filtri di ricerca, aggiunta/rimozione.</p>
+                </div>
+                <div class="arrow">→</div>
+            </a>
+
+        </div>
+    </div>
+
+</body>
+</html>
--- a/DOM/esercizi/esercizi1/lettura.js
+++ b/DOM/esercizi/esercizi1/lettura.js
@@ -0,0 +1,19 @@
+/**
+ * ESERCIZIO 1: Selezione e Lettura
+ * 
+ * ISTRUZIONI:
+ * 1. Usa `document.querySelector` per selezionare l'h1 con id 'titolo-principale'.
+ * - Stampa in console il suo `textContent`.
+ * 
+ * 2. Usa `document.querySelector` per selezionare l'elemento con classe '.prezzo'.
+ * - Stampa in console il suo `textContent`.
+ * 
+ * 3. Usa `document.querySelector` per selezionare l'immagine 'img-prodotto'.
+ * - Stampa in console il valore del suo attributo `src` (puoi usare .src o .getAttribute('src')).
+ * - Stampa in console il valore del suo attributo `alt`.
+ * 
+ * 4. Usa `document.querySelectorAll` per trovare tutti i `div` nella pagina.
+ * - Stampa in console quanti div ci sono (usa la proprietà .length della lista risultante).
+ */
+
+// Scrivi qui sotto il tuo codice:
--- a/DOM/esercizi/esercizi1/modifica_stile.js
+++ b/DOM/esercizi/esercizi1/modifica_stile.js
@@ -0,0 +1,20 @@
+/**
+ * ESERCIZIO 2: Modifica Stile e Classi
+ * 
+ * ISTRUZIONI:
+ * 1. Seleziona il div con id 'messaggio-sistema'.
+ * - Cambia il suo `style.backgroundColor` in '#ccffcc' (verde chiaro).
+ * - Cambia il suo `style.border` in '2px solid green'.
+ * - Cambia il suo `style.color` in 'green'.
+ * 
+ * 2. Seleziona il titolo h1 ('titolo-principale').
+ * - Cambia il suo `style.textAlign` in 'center'.
+ * - Cambia il suo `style.textTransform` in 'uppercase'.
+ * 
+ * 3. Seleziona il div con id 'status-magazzino'.
+ * - Al momento ha la classe 'out-of-stock' (scritta rossa barrata).
+ * - Usa `classList.remove('out-of-stock')` per togliere lo stile vecchio.
+ * - Usa `classList.add('in-stock')` per aggiungere lo stile nuovo (scritta verde).
+ */
+
+// Scrivi qui sotto il tuo codice:
--- a/DOM/esercizi/esercizi1/modifica_testo.js
+++ b/DOM/esercizi/esercizi1/modifica_testo.js
@@ -0,0 +1,22 @@
+/**
+ * ESERCIZIO 3: Modifica Testo e Attributi
+ * 
+ * ISTRUZIONI:
+ * 1. Il messaggio di sistema dice "ERRORE DI SISTEMA...". 
+ * - Selezionalo e cambia il suo `textContent` in "Sistema Operativo: Tutto OK!".
+ * 
+ * 2. Il prodotto è sconosciuto.
+ * - Seleziona l'elemento con id 'nome-prodotto'.
+ * - Cambia il suo testo in "Smartphone Super 3000".
+ * 
+ * 3. Manca la descrizione.
+ * - Seleziona il paragrafo con classe '.descrizione' (usa querySelector).
+ * - Cambia il suo `innerHTML` inserendo: "Ultimo modello <b>disponibile ora</b> in offerta.".
+ * 
+ * 4. L'immagine è un placeholder.
+ * - Seleziona l'immagine.
+ * - Cambia il suo attributo `src` in 'https://placehold.co/300x150/0000FF/0000FF'.
+ * - Cambia il suo attributo `alt` in 'Foto Smartphone Blu'.
+ */
+
+// Scrivi qui sotto il tuo codice:
--- a/DOM/esercizi/esercizi2/base.js
+++ b/DOM/esercizi/esercizi2/base.js
@@ -0,0 +1,16 @@
+/**
+ * Esercizio Intermedio 1: Il Semaforo (Manipolazione Stili e Classi)
+ * 
+ * OBIETTIVO:
+ * Simulare l'accensione delle luci di un semaforo modificando il colore di sfondo.
+ * 
+ * ISTRUZIONI:
+ * 0. Controlla se nel file HTML è incluso questo script.
+ * 1. Seleziona i tre div delle luci (id: 'luce-rossa', 'luce-gialla', 'luce-verde').
+ * 2. Seleziona i due bottoni (id: 'btn-attiva-rosso', 'btn-attiva-verde').
+ * 3. Aggiungi un event listener al bottone "Attiva Rosso":
+ * - Deve cambiare il background della luce rossa da '#500' a '#f00' (o 'red').
+ * - Deve spegnere le altre luci (impostando il background a '#550' o '#050').
+ * 4. Fai lo stesso per il bottone "Attiva Verde" (luce passa da '#050' a '#0f0' o 'green').
+ */
+
--- a/DOM/esercizi/esercizi2/contatore.js
+++ b/DOM/esercizi/esercizi2/contatore.js
@@ -0,0 +1,18 @@
+/**
+ * Esercizio Intermedio 2: Contatore Click (Eventi e Testo)
+ * 
+ * OBIETTIVO:
+ * Creare un contatore che aumenta ogni volta che si preme un bottone.
+ * 
+ * ISTRUZIONI:
+ * 0. Controlla se nel file HTML è incluso questo script.
+ * 1. Seleziona lo span che contiene il numero (id: 'contatore-valore') e i bottoni.
+ * 2. Crea una variabile let `conteggio` inizializzata a 0.
+ * 3. Al click su 'btn-incrementa':
+ *   - Aumenta la variabile `conteggio` di 1.
+ *   - Aggiorna il testo dello span con il nuovo valore.
+ * 4. Al click su 'btn-reset':
+ *   - Riporta `conteggio` a 0.
+ *   - Aggiorna il testo dello span.
+ */
+
--- a/DOM/esercizi/esercizi2/debug.js
+++ b/DOM/esercizi/esercizi2/debug.js
@@ -0,0 +1,22 @@
+/**
+ * Esercizio Intermedio 3: Debugging (Trova l'errore)
+ * 
+ * DESCRIZIONE:
+ * Il codice qui sotto dovrebbe colorare di blu TUTTI i paragrafi con classe 'testo-colorato' 
+ * quando si preme il bottone. Ma non funziona o genera errore.
+ * 
+ * TASK:
+ * 1. Apri il BROWSER esterno e leggi cosa mostra la console
+ *    Se provi a cliccare il bottone dovrebbe apparire un messaggio di errore.
+ * 2. Capisci perché questo codice non funziona.
+ *    Potrebbe essere un errore di selezione, di metodo, o di logica.
+ * 3. Correggi il codice.
+ */
+
+const bottone = document.getElementById('btn-colora-tutti');
+const paragrafi = document.querySelectorAll('.testo-colorato');
+
+bottone.addEventListener('click', () => {
+    paragrafi.style.color = 'blue'; 
+    console.log("Colorati!");
+});
--- a/DOM/esercizi/esercizio.html
+++ b/DOM/esercizi/esercizio.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>Esercizi DOM</title>
+    <style>
+        body { font-family: sans-serif; padding: 20px; max-width: 800px; margin: 0 auto }
+        section { border: 1px solid #bbb; padding: 15px; margin-bottom: 30px; border-radius: 8px; background-color: #f9f9f9}
+        h2 { background: #eee; padding: 10px; margin-top: 0; }
+
+        /* Stili comuni agli esercizi della parte 1 */
+        .scheda-prodotto { border: 1px solid #ccc; padding: 15px; background: white; border-radius: 8px; max-width: 300px; margin-bottom: 20px; }
+        .prezzo { font-weight: bold; color: #333; }
+        .in-stock { color: green; }
+        .out-of-stock { color: red; text-decoration: line-through; }
+        .nascosto { display: none; }
+        #messaggio-sistema { padding: 10px; background: #ffcccc; border: 1px solid red; color: darkred; margin-bottom: 20px; }
+
+        /* Stili per esercizi della parte 2 */
+        .error { color: red; }
+        .success { color: green; }
+        
+        /* Stili per parte Extra */
+        #zona-extra ul { list-style-type: none; padding-left: 20px; display: flex; gap: 10px; }
+        #zona-extra ul > li { margin: 5px 0; border: 1px solid #ccc; padding: 10px; border-radius: 4px; background: #f0f0f0; }
+        .esercizio-box { min-height: 50px; border: 1px dashed #999; padding: 10px; margin: 10px 0;  max-width: 320px; }
+        #container-extra-box { display: flex; gap: 10px; flex-wrap: wrap; }
+        #zona-extra input { padding: 5px; font-size: 16px; border-radius: 4px; border: 2px solid #ccc; }
+    </style>
+</head>
+<body>
+    <h1>Pagina Esercizi</h1>
+    <p>Collega <strong>TUTTI</strong> gli script in fondo a questa pagina per risolvere gli esercizi.</p>
+
+    <!-- Sezione iniziale comune a tutti gli esercizi della parte 1 -->
+    <section id="es-init">
+        <h2 id="titolo-principale">Benvenuti nel Negozio</h2>
+        <div id="messaggio-sistema">ERRORE DI SISTEMA: Connessione persa.</div>
+
+        <div class="scheda-prodotto">
+            <img id="img-prodotto" src="" alt="Immagine Generica">
+            <h2 id="nome-prodotto">Prodotto Sconosciuto</h2>
+            <p class="descrizione">Descrizione non disponibile al momento.</p>
+            <p class="prezzo">€ 0.00</p>
+            <div id="status-magazzino" class="out-of-stock">Esaurito</div>
+        </div>
+    </section>
+
+    <!-- Gli esercizi della parte 2 iniziano qui, ognuno in una sezione separata -->
+    <section id="es-base">
+        <h2>Esercizio 1: Il Semaforo</h2>
+        <div id="semaforo" style="width: 50px; height: 150px; background: #333; padding: 10px; display: flex; flex-direction: column; gap: 10px;">
+            <div id="luce-rossa" style="width: 50px; height: 50px; background: #500; border-radius: 50%;"></div>
+            <div id="luce-gialla" style="width: 50px; height: 50px; background: #550; border-radius: 50%;"></div>
+            <div id="luce-verde" style="width: 50px; height: 50px; background: #050; border-radius: 50%;"></div>
+        </div>
+        <br>
+        <button id="btn-attiva-rosso">Attiva Rosso</button>
+        <button id="btn-attiva-verde">Attiva Verde</button>
+    </section>
+
+    <section id="es-contatore">
+        <h2>Esercizio 2: Contatore Click</h2>
+        <p>Numero di click: <span id="contatore-valore">0</span></p>
+        <button id="btn-incrementa">Cliccami (+)</button>
+        <button id="btn-reset">Reset</button>
+    </section>
+
+    <section id="es-debug">
+        <h2>Esercizio 3: Debug Colori</h2>
+        <p class="testo-colorato">Paragrafo 1</p>
+        <p class="testo-colorato">Paragrafo 2</p>
+        <p class="testo-colorato">Paragrafo 3</p>
+        <button id="btn-colora-tutti">Colora Tutti di Blu</button>
+    </section>
+
+    <!-- Sezione extra per esercizi opzionali -->
+    <section id="zona-extra">
+        <h2>Zona Extra</h2>
+        <div id="container-extra-debug" class="esercizio-box"></div>
+        <div id="container-extra-box" class="esercizio-box"></div>
+        <div id="container-extra-validatore" class="esercizio-box"></div>
+    </section>
+
+
+    <!-- Script collegati della parte 1 -->
+    <script src="esercizi1/lettura.js"></script>
+    <script src="esercizi1/modifica_stile.js"></script>
+    <script src="esercizi1/modifica_testo.js"></script>
+    <!-- Collega qui i tuoi script per la parte 2 & extra -->
+    <script src="extra/validatore_input.js"></script>
+</body>
+</html>
--- a/DOM/esercizi/extra/debug_avanzato.js
+++ b/DOM/esercizi/extra/debug_avanzato.js
@@ -0,0 +1,32 @@
+/**
+ * Esercizio Extra: Debug Avanzato (Problemi di Logica DOM)
+ * 
+ * DESCRIZIONE:
+ * Vogliamo spostare un elemento da una lista A a una lista B al click.
+ * Il codice sotto crea le liste dinamicamente, ma c'è un problema logico o di selezione.
+ * 
+ * TASK:
+ * 1. Analizza il codice, includilo nel file HTML, ed eseguilo.
+ * 2. Il problema: Il codice tenta di aggiungere un event listener a un elemento che forse non esiste ancora o sbaglia il riferimento.
+ * 3. Correggi il codice affinché cliccando su 'item-1', questo si sposti nella Lista B.
+ */
+
+// Setup del DOM per l'esercizio
+// NON TOCCARE QUESTA PARTE, SERVE PER L'ESERCIZIO
+const container = document.querySelector('#container-extra-debug');
+container.innerHTML = `
+    <p>Lista A:</p>
+    <ul id="lista-a"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>
+    <p>Lista B:</p>
+    <ul id="lista-b"><li>Item</li></ul>
+`;
+
+// CODICE BUGGATO:
+// Vogliamo che cliccando su un item della Lista A, questo venga spostato nella Lista B.
+// MA il codice attuale non funziona come previsto.
+const tuttiItem = document.querySelectorAll('#lista-a > li');
+const listaB = document.querySelector('#lista-b');
+
+tuttiItem.forEach(item => {
+    listaB.innerHTML = item;
+});
--- a/DOM/esercizi/extra/generatore_box.js
+++ b/DOM/esercizi/extra/generatore_box.js
@@ -0,0 +1,18 @@
+/**
+ * Esercizio Extra: Generatore di Box (Creazione complessa)
+ * 
+ * OBIETTIVO:
+ * Creare una griglia di quadrati colorati generati dinamicamente.
+ * 
+ * ISTRUZIONI:
+ * 1. Seleziona il div 'container-extra-box' nella pagina esercizi.html.
+ * 2. Crea un array di colori: const colori = ['red', 'blue', 'green', 'orange', 'purple'];
+ * 3. Usa un ciclo `for` che va da 0 a 4 (o lunghezza array):
+ *    Per ogni iterazione:
+ *   - Crea un nuovo `div` e salvalo in una variabile `box`.
+ *   - Assegnagli una larghezza e altezza di 100px (style)
+ *   - Assegnagli il colore di sfondo prendendolo dall'array in base all'indice.
+ *   - Aggiungi un event listener 'click' che rimuove il div quando viene cliccato. (box.remove())
+ *   - Aggiungi il div al 'container-extra-box'.
+ */
+
--- a/DOM/esercizi/extra/validatore_input.js
+++ b/DOM/esercizi/extra/validatore_input.js
@@ -0,0 +1,18 @@
+/**
+ * Esercizio Extra: Validatore Input (Logica e Stili)
+ * 
+ * OBIETTIVO:
+ * Creare un campo input che cambia colore se il testo è troppo corto.
+ * 
+ * ISTRUZIONI (Usa 'container-extra-validatore' per generare l'HTML necessario via JS o scrivilo a mano):
+ * 1. Crea/Inserisci un input type="text" e un paragrafo per il messaggio di errore.
+ *    Inseriscili dentro il div con id 'container-extra-validatore' (puoi farlo via JS o scrivendoli direttamente nell'HTML).
+ * 2. Ascolta l'evento 'input' (mentre l'utente scrive).
+ * 3. Se la lunghezza del valore (`value.length`) è inferiore a 5 caratteri:
+ *   - Bordo dell'input: Rosso.
+ *   - Messaggio: "Troppo corto!".
+ * 4. Se la lunghezza è 5 o più:
+ *   - Bordo dell'input: Verde.
+ *   - Messaggio: "OK!".
+ */
+
--- a/javascript/JS_Esercizi
+++ b/javascript/JS_Esercizi
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>Tutorial DOM Parte 1</title>
+    <style>
+        body { font-family: sans-serif; padding: 20px; }
+        .tutorial { border: 2px solid #000; padding: 15px; margin-bottom: 30px; }
+        .box { padding: 20px; border: 1px solid #ccc; margin-top: 10px; }
+        .evidenziato { background-color: yellow; font-weight: bold; }
+        .nascosto { display: none; }
+        ul { list-style-type: none; padding: 0; }
+        li { background: #f0f0f0; margin: 5px 0; padding: 10px; border-bottom: 1px solid #ddd; cursor: pointer; }
+        li:hover { background: #e0e0e0; }
+        #area-messaggi { margin-top: 20px; padding: 10px; border: 1px dashed blue; min-height: 50px; }
+        input { padding: 5px; width: 200px; display: block; margin-bottom: 10px; }
+    </style>
+</head>
+<body>
+    <div class="tutorial">
+        <h1 id="titolo-principale">Tutorial DOM</h1>
+        
+        <div id="contenitore-info">
+            <p class="paragrafo-testo">Questo è il primo paragrafo.</p>
+            <p class="paragrafo-testo">Questo è il secondo paragrafo.</p>
+            <p id="paragrafo-unico">Questo paragrafo ha un ID speciale.</p>
+        </div>
+
+        <input type="text" id="input-nome" placeholder="Inserisci il tuo nome">
+
+        <a id="link-google" href="#">Link vuoto</a>
+
+        <div id="box-stile" class="box">Modifica il mio stile!</div>
+    </div>
+    <div class="tutorial">
+        <h1>Tutorial DOM<br>Creazione ed Eventi</h1>
+
+        <div id="controlli">
+            <button id="btn-aggiungi">Aggiungi Elemento</button>
+            <button id="btn-rimuovi-tutti">Rimuovi Tutti</button>
+        </div>
+
+        <h3>Lista Dinamica:</h3>
+        <ul id="lista-dinamica">
+            <li>Elemento Esistente 1</li>
+            <li>Elemento Esistente 2</li>
+        </ul>
+
+        <h3>Area Input:</h3>
+        <input type="text" id="input-utente" placeholder="Scrivi qualcosa...">
+        <p>Hai scritto: <span id="output-testo"></span></p>
+    </div>
+
+    <script src="tutorial_interattivo_parte1.js"></script>
+    <script src="tutorial_interattivo_parte2.js"></script>
+</body>
+</html>
--- a/DOM/tutorial_interattivo_parte1.js
+++ b/DOM/tutorial_interattivo_parte1.js
@@ -0,0 +1,73 @@
+// TUTORIAL INTERATTIVO: DOM Parte 1 - Selezione e Manipolazione
+// Apri il file 'tutorial_parte1.html' nel browser e guarda la CONSOLE (F12).
+
+/**
+ * ===========================================
+ * === 1. Selezionare tramite ID ===
+ * Il metodo `querySelector` seleziona un singolo elemento.
+ * Possiamo usare un selettore CSS per identificare l'elemento.
+ */
+// TODO: Seleziona l'elemento h1 con id 'titolo-principale' e salvalo in una variabile.
+// TODO: Stampa la variabile in console.
+// TODO: Seleziona l'elemento p e salvalo in una variabile.
+// TODO: Stampa la variabile in console e verifica q chi appartiene il paragrafo.
+
+
+/**
+ * ===========================================
+ * === 2. QuerySelectorAll ===
+ * `querySelector` trova il PRIMO elemento che corrisponde al selettore CSS.
+ * `querySelectorAll` trova TUTTI gli elementi e restituisce una lista.
+ */
+// TODO: Usa `querySelectorAll` per selezionare tutti gli elementi con classe 'paragrafo-testo'.
+// TODO: Usa `querySelectorAll` per selezionare tutti gli elementi p nella pagina.
+// TODO: Stampa entrambi i risultati in console.
+
+
+/**
+ * ===========================================
+ * === 3. Modificare Testo e HTML ===
+ * `textContent` modifica solo il testo visibile.
+ * `value` modifica il valore di input (es. campi di testo).
+ * `innerHTML` può inserire tag HTML all'interno dell'elemento.
+ */
+// TODO: Cambia il testo dell'elemento 'titolo-principale' in "Workshop JavaScript".
+// TODO: Cambia il valore dell'input con id 'input-nome' a "Mario Rossi".
+// TODO: Cambia il testo del paragrafo con id 'paragrafo-unico' in "<b>Testo in grassetto</b>".
+// TODO: Usa `innerHTML` al posto di `textContent` per inserire il testo in grassetto.
+
+
+/**
+ * ===========================================
+ * === 4. Leggere e Modificare Attributi ===
+ * `getAttribute` legge un valore (es. href, src, id).
+ * `setAttribute` imposta un nuovo valore.
+ * Un attributo si può anche accedere direttamente come proprietà dell'elemento.
+ */
+// TODO: Seleziona il link con id 'link-google'.
+// TODO: Imposta il suo attributo 'href' a 'https://www.google.com'.
+// TODO: Cambia il testo del link in "Vai a Google".
+
+
+/**
+ * ===========================================
+ * === 5. Modificare lo Stile (CSS) ===
+ * Puoi accedere alle proprietà CSS tramite l'oggetto `.style`.
+ * Le proprietà usano il camelCase (es. background-color diventa backgroundColor).
+ */
+// TODO: Seleziona il div con id 'box-stile'.
+// TODO: Cambia il suo `style.color` in 'red'.
+// TODO: Cambia il suo `style.border` in '2px solid red'.
+
+
+/**
+ * ===========================================
+ * === 6. Gestire le Classi CSS ===
+ * `classList` permette di aggiungere, rimuovere o alternare classi CSS.
+ * Metodi utili: .add(), .remove(), .toggle().
+ */
+// TODO: Seleziona nuovamente il div 'box-stile'.
+// TODO: Aggiungi la classe 'evidenziato' (definita nel CSS) usando `classList.add`.
+// TODO: Rimuovi la classe 'box' usando `classList.remove`.
+// TODO: Alterna la classe 'box' o la classe 'evidenziato' usando `classList.toggle`.
+
--- a/DOM/tutorial_interattivo_parte2.js
+++ b/DOM/tutorial_interattivo_parte2.js
@@ -0,0 +1,60 @@
+// TUTORIAL INTERATTIVO: DOM Parte 2 - Creazione, Rimozione ed Eventi
+// Apri il file 'tutorial_parte2.html'.
+
+/**
+ * ===========================================
+ * === 1. Creazione di Elementi ===
+ * `document.createElement(tagName)` crea un nuovo elemento in memoria (non ancora visibile).
+ */
+// TODO: Crea un nuovo elemento 'li' e salvalo in una variabile chiamata `nuovoElemento`.
+// TODO: Imposta il suo `textContent` a "Sono un nuovo elemento creato via JS".
+
+
+/**
+ * ===========================================
+ * === 2. Aggiunta di Elementi al DOM ===
+ * `genitore.appendChild(figlio)` o `genitore.append(figlio)` aggiunge l'elemento alla pagina.
+ */
+// TODO: Seleziona la lista `ul` con id 'lista-dinamica'.
+// TODO: Aggiungi `nuovoElemento` alla lista usando `appendChild`.
+
+
+/**
+ * ===========================================
+ * === 3. Rimozione di Elementi ===
+ * `elemento.remove()` elimina l'elemento dal DOM.
+ */
+// TODO: Seleziona il PRIMO elemento `li` della lista (puoi usare querySelector che prende il primo).
+// TODO: Rimuovilo usando il metodo `.remove()`.
+
+
+/**
+ * ===========================================
+ * === 4. AddEventListener (Click) ===
+ * Permette di eseguire una funzione quando avviene un evento.
+ */
+// TODO: Seleziona il bottone con id 'btn-aggiungi'.
+// TODO: Aggiungi un ascoltatore per l'evento 'click'.
+// TODO: Nella funzione, mostra un `alert("Hai cliccato il bottone!")`.
+
+
+/**
+ * ===========================================
+ * === 5. Eventi Comuni (Input) ===
+ * L'evento 'input' scatta ogni volta che si digita in un campo di testo.
+ */
+// TODO: Seleziona l'input con id 'input-utente' e lo span con id 'output-testo'.
+// TODO: Aggiungi un listener 'input' al campo di testo.
+// TODO: Nella funzione, copia il valore dell'input (`input.value`) dentro il `textContent` dello span.
+
+
+/**
+ * ===========================================
+ * === 6. Event Object (e.target) ===
+ * La funzione dell'evento riceve un argomento (spesso chiamato `e` o `event`) che contiene dettagli.
+ * `e.target` è l'elemento specifico che ha scatenato l'evento.
+ */
+// TODO: Seleziona l'intera lista `ul` ('lista-dinamica').
+// TODO: Aggiungi un listener 'click' alla LISTA INTERA (non ai singoli li).
+// TODO: Nella funzione, usa `e.target.style.color = 'red'`.
+
--- a/Dati/calcolatrice/index.html
+++ b/Dati/calcolatrice/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <title>Calcolatrice JS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold;">← Dashboard</a>
+
+    <div class="calcolatrice">
+        <input type="text" id="display" placeholder="Es: 10 + 5">
+        
+        <div id="messaggio-errore" class="nascosto">⚠️ Formato errato! Usa: num spazio op spazio num</div>
+
+        <div class="tastiera">
+            <button class="tasto">7</button>
+            <button class="tasto">8</button>
+            <button class="tasto">9</button>
+            <button class="tasto op">/</button>
+            
+            <button class="tasto">4</button>
+            <button class="tasto">5</button>
+            <button class="tasto">6</button>
+            <button class="tasto op">*</button>
+            
+            <button class="tasto">1</button>
+            <button class="tasto">2</button>
+            <button class="tasto">3</button>
+            <button class="tasto op">-</button>
+            
+            <button class="tasto" id="btn-cancella">C</button>
+            <button class="tasto">0</button>
+            <button class="tasto" id="btn-uguale">=</button>
+            <button class="tasto op">+</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/Dati/calcolatrice/script.js
+++ b/Dati/calcolatrice/script.js
@@ -0,0 +1,94 @@
+// SELEZIONE ELEMENTI
+const display = document.querySelector('#display');
+const btnUguale = document.querySelector('#btn-uguale');
+const btnCancella = document.querySelector('#btn-cancella');
+const msgErrore = document.querySelector('#messaggio-errore');
+// Selezioniamo tutti i tasti "normali" (numeri e operazioni) per farli scrivere nel display
+const tasti = document.querySelectorAll('.tasto:not(#btn-uguale):not(#btn-cancella)');
+
+// Array di operatori validi (utile per la validazione)
+const operatoriValidi = ['+', '-', '*', '/'];
+
+
+/**
+ * 1. FUNZIONE: Aggiungi caratteri al display
+ * Per ogni tasto, aggiungiamo un event listener che, quando cliccato,
+ * prende il testo del tasto e lo aggiunge al display.
+ * Bisono fare attenzione agli spazi per gli operatori.
+ * 
+ * Passi:
+ * - Per ogni tasto, aggiungiamo un event listener
+ * - Quando clicchiamo, prendiamo il testo del tasto e lo aggiungiamo al display
+ * - Se è un operatore, aggiungiamo spazi prima e dopo per facilitare il calcolo
+ * - Altrimenti aggiungiamo solo il numero
+ */
+
+
+/**
+ * 2. FUNZIONE: Cancella display
+ * Quando clicchiamo il tasto "C", il display deve essere svuotato.
+ * 
+ * Passi:
+ * - Aggiungiamo un event listener al tasto "C"
+ * - Quando clicchiamo, svuotiamo il valore del display
+ */
+
+
+/**
+ * 3. FUNZIONE: Calcola
+ * Prendiamo in input un numero, un operatore e un altro numero,
+ * e restituiamo il risultato del calcolo in base all'operatore.
+ * Se l'operatore non è valido, mostriamo un messaggio di errore.
+ * 
+ * Passi:
+ * - Prendiamo in input il primo numero, l'operatore e il secondo numero
+ * - In base all'operatore, eseguiamo il calcolo
+ * - Restituiamo il risultato
+ * - Se l'operatore non è valido, mostriamo un messaggio di errore con mostraErrore() e restituiamo null
+ * Nota: Si può usare uno switch per semplicità senza break (dato che restituiamo subito il risultato)
+ */
+function calcola(num1, operatore, num2) {
+
+}
+
+
+/**
+ * 4. FUNZIONE: Calcola risultato
+ * Quando clicchiamo il tasto "=", dobbiamo prendere il testo del display,
+ * analizzarlo, eseguire il calcolo e mostrare il risultato.
+ * 
+ * Passi:
+ * A. Prendi il testo del display e puliscilo (rimuovi spazi inutili all'inizio e alla fine)
+ * B. Spezza la stringa in parti (numero, operatore, numero) in base agli spazi
+ * C. Valida i dati:
+ *   - Controlla che ci siano esattamente 3 pezzi
+ *   - Controlla che i numeri siano validi (trasforma e controlla non NaN)
+ *   - Controlla che l'operatore sia valido (tra quelli definiti)
+ * D. Esegui il calcolo chiamando la funzione calcola()
+ * E. Mostra il risultato nel display
+*/
+function calcolaRisultato() {
+
+}
+
+
+
+/****************************************************/
+/********* FUNZIONI HELPER E EVENT LISTENER *********/
+/****************************************************/
+
+function mostraErrore() {
+    msgErrore.classList.remove('nascosto');
+    display.style.borderColor = "red";
+    setTimeout(() => {
+        display.style.borderColor = "#bdc3c7";
+        msgErrore.classList.add('nascosto');
+    }, 2000);
+}
+
+// Aggiungiamo gli event listener per il calcolo del risultato
+btnUguale.addEventListener('click', calcolaRisultato);
+// Permettiamo anche di premere "Enter" per calcolare
+display.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') calcolaRisultato();
+});
--- a/Dati/calcolatrice/style.css
+++ b/Dati/calcolatrice/style.css
@@ -0,0 +1,79 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.calcolatrice {
+    background: #ecf0f1;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+    width: 300px;
+}
+
+#display {
+    width: 100%;
+    padding: 15px;
+    font-size: 1.5rem;
+    text-align: right;
+    margin-bottom: 10px;
+    border: 2px solid #bdc3c7;
+    border-radius: 5px;
+    box-sizing: border-box; /* Importante per il padding */
+}
+
+#messaggio-errore {
+    color: red;
+    font-size: 0.8rem;
+    text-align: center;
+    margin-bottom: 10px;
+    height: 20px; /* Per non far saltare il layout */
+}
+
+.nascosto {
+    visibility: hidden; /* Nasconde ma tiene lo spazio */
+}
+
+.tastiera {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* 4 colonne uguali */
+    gap: 10px;
+}
+
+.tasto {
+    padding: 20px;
+    font-size: 1.2rem;
+    border: none;
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.tasto:hover {
+    background-color: #dfe6e9;
+}
+
+.tasto.op {
+    background-color: #f39c12;
+    color: white;
+}
+
+.tasto.op:hover {
+    background-color: #e67e22;
+}
+
+#btn-uguale {
+    background-color: #27ae60;
+    color: white;
+}
+
+#btn-cancella {
+    background-color: #c0392b;
+    color: white;
+}
--- a/Show More
+++ b/Show More