renamed js folder

javascript/JS_Esercizi 08 - 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;
+});

javascript/JS_Esercizi 08 - 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'.
+ */
+

javascript/JS_Esercizi 08 - 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!".
+ */
+