Esercizio 8 DOM+ fix

2026-02-03 21:23:15 +01:00
parent 4c93abc7c0
commit 870f2bc461
19 changed files with 1024 additions and 9 deletions
--- a/DOM+/00_ripasso/index.html
+++ b/DOM+/00_ripasso/index.html
@@ -0,0 +1,115 @@
+<!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>
+
+        <!-- ============ RIASSUNTO ============ -->
+        <div class="step riepilogo">
+            <h2>✅ Riepilogo</h2>
+            <p id="status-completamento">Completa gli esercizi per vedere il riepilogo...</p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/DOM+/00_ripasso/script.js
+++ b/DOM+/00_ripasso/script.js
@@ -0,0 +1,292 @@
+/**
+ * ============================================================
+ * 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
+ * 2. Leggi il suo textContent
+ * 3. Aggiorna il paragrafo con id="risultato-1-2" scrivendo "✅ Prima classe trovata: " + il testo
+ * 
+ * Nota: Se vuoi selezionare TUTTI gli elementi con classe, usa querySelectorAll
+ */
+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
+ * 2. Leggi il suo textContent
+ * 3. Aggiorna il paragrafo con id="risultato-1-3" scrivendo "✅ Span trovato: " + il testo
+ */
+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! ✨"
+ *   - Aggiorna il risultato a "✅ Testo cambato"
+ */
+function esercizio_2_1() {
+    const btn = document.querySelector('');
+    const paragrafo = document.querySelector('');
+    const risultato = document.querySelector('#risultato-2-1');
+    
+    if (btn && paragrafo) {
+        btn.addEventListener('click', () => {
+            paragrafo.textContent
+            risultato.textContent
+        });
+    }
+}
+
+
+/**
+ * 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
+ *   - Aggiorna il risultato a "✅ Elemento aggiunto"
+ */
+function esercizio_2_2() {
+    const btn = document.querySelector('');
+    const area = document.querySelector('');
+    const risultato = document.querySelector('#risultato-2-2');
+    
+    if (btn && area) {
+        btn.addEventListener('click', () => {
+            const nuovoParagrafo = document.createElement('');
+            nuovoParagrafo.textContent
+            risultato.textContent
+
+        });
+    }
+}
+
+
+/**
+ * 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]! 👋"
+ *   - Aggiorna il risultato a "✅ Saluto inviato"
+ */
+function esercizio_2_3() {
+    const input = document.querySelector('');
+    const btn = document.querySelector('');
+    const area = document.querySelector('');
+    const risultato = document.querySelector('#risultato-2-3');
+    
+    if (input && btn && area) {
+        btn.addEventListener('click', () => {
+            const nome = ''; // Leggi il valore dall'input
+            area.textContent
+            risultato.textContent
+        });
+    }
+}
+
+
+// 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. Crea una variabile 'count' = 0 fuori dalla funzione
+ * 4. Aggiungi un event listener che, al click:
+ *   - Incrementa count (count++)
+ *   - Aggiorna il testo mostrando "Click: " + count
+ *   - Aggiorna il risultato a "✅ Contatore attivo"
+ */
+let count = 0; // Variabile globale
+
+function esercizio_3_1() {
+    const btn = document.querySelector('');
+    const contatore = document.querySelector('');
+    const risultato = document.querySelector('#risultato-3-1');
+    
+    if (btn && contatore) {
+        btn.addEventListener('click', () => {
+            
+        });
+    }
+}
+
+
+/**
+ * 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..."
+ *   - Aggiorna il risultato a "✅ Echo attivo"
+ * 
+ * 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('');
+    const risultato = document.querySelector('#risultato-3-2');
+    
+    if (input && echo) {
+        input.addEventListener('input', (event) => {
+
+        });
+    }
+}
+
+
+/**
+ * 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)
+ *   - Aggiungi al log-click: "[id del box] cliccato\n"
+ *   - Aggiorna il risultato a "✅ Log attivo"
+ * 
+ * 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('');
+    const risultato = document.querySelector('#risultato-3-3');
+    
+    if (boxes.length > 0) {
+        boxes.forEach((box) => {
+            box.addEventListener('click', (event) => {
+                
+            });
+        });
+    }
+}
+
+
+/**
+ * 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
+ *   - Aggiorna il risultato a "✅ Toggle attivo"
+ * 
+ * Nota: Assicurati che in style.css esista una classe .elemento-attivo
+ */
+function esercizio_3_4() {
+    const elemento = document.querySelector(''); // Selector per l'elemento
+    const risultato = document.querySelector('#risultato-3-4');
+    
+    if (elemento) {
+        elemento.addEventListener('click', () => {
+            
+        });
+    }
+}
+
+
+// Eseguire gli esercizi 3.x
+esercizio_3_1();
+esercizio_3_2();
+esercizio_3_3();
+esercizio_3_4();
+
+
+// ============ RIEPILOGO ============
+
+/**
+ * Controlla quanti esercizi sono stati completati
+ * Aggiorna il messaggio di riepilogo
+ */
+function aggiornaRiepilogo() {
+    const risultati = document.querySelectorAll('.risultato');
+    const completati = Array.from(risultati).filter(r => r.textContent.includes('✅')).length;
+    const totale = risultati.length;
+    
+    const status = document.querySelector('#status-completamento');
+    if (completati === totale) {
+        status.textContent = `✨ Fantastico! Hai completato tutti gli ${totale} esercizi! ✨`;
+        status.style.color = '#27ae60';
+        status.style.fontSize = '1.2rem';
+        status.style.fontWeight = 'bold';
+    } else {
+        status.textContent = `Completati ${completati}/${totale} esercizi. Continua!`;
+    }
+}
+
+// Aggiorna il riepilogo ogni 500ms per vedere i progressi in tempo reale
+setInterval(aggiornaRiepilogo, 500);
+aggiornaRiepilogo();
--- a/DOM+/00_ripasso/style.css
+++ b/DOM+/00_ripasso/style.css
@@ -0,0 +1,215 @@
+/* ============================================================
+   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;
+    color: #555;
+    font-size: 0.9rem;
+}
+
+/* ============ 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 ============ */
+
+.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);
+}
+
+/* ============ 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);
+}
+
+/* ============ RIEPILOGO ============ */
+#riepilogo {
+    background: #f8fafb;
+    color: #2c3e50;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    border-bottom: none;
+    border-left: none;
+    border: 1px solid #d5d8dc;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    border-bottom: none;
+    border-left: none;
+}
+
+.riepilogo h2 {
+    color: #2c3e50;
+    font-size: 1.4rem;
+    margin-top: 0;
+}
+
+#status-completamento {
+    font-size: 1rem;
+    color: #2c3e50;
+    transition: all 0.3s ease;
+}
--- a/DOM+/01_card_profilo/index.html
+++ b/DOM+/01_card_profilo/index.html
--- a/DOM+/01_card_profilo/script.js
+++ b/DOM+/01_card_profilo/script.js
--- a/DOM+/01_card_profilo/style.css
+++ b/DOM+/01_card_profilo/style.css
--- 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
--- a/DOM+/04_lista_spesa/script.js
+++ b/DOM+/04_lista_spesa/script.js
--- a/DOM+/04_lista_spesa/style.css
+++ b/DOM+/04_lista_spesa/style.css
--- a/DOM+/05_gestionale/index.html
+++ b/DOM+/05_gestionale/index.html
--- a/DOM+/05_gestionale/script.js
+++ b/DOM+/05_gestionale/script.js
--- a/DOM+/05_gestionale/style.css
+++ b/DOM+/05_gestionale/style.css
--- a/JS_Esercizi/JS_Esercizi
+++ b/JS_Esercizi/JS_Esercizi
@@ -44,10 +44,17 @@
    <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_card_profilo/index.html" class="card">
+            <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>
@@ -56,20 +63,38 @@
                <div class="arrow">→</div>
            </a>

-            <a href="02_lista_spesa/index.html" class="card">
-                <div class="icon">🛒</div>
+            <a href="02_card_profilo/index.html" class="card">
+                <div class="icon">🆕</div>
                <div class="info">
-                    <h3>2. Lista Spesa <span class="badge medium">Intermedio</span></h3>
-                    <p>Array, Cicli, Creazione elementi e Totali.</p>
+                    <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_gestionale/index.html" class="card">
+            <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>3. Gestionale <span class="badge hard">Avanzato</span></h3>
-                    <p>Tabelle, Filtri di ricerca, aggiunta/rimozione dipendenti.</p>
+                    <h3>5. Gestionale <span class="badge hard">Avanzato</span></h3>
+                    <p>Tabelle, Filtri di ricerca, aggiunta/rimozione.</p>
                </div>
                <div class="arrow">→</div>
            </a>