renamed js folder

javascript/JS_Esercizi 08 - 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:

javascript/JS_Esercizi 08 - 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:

javascript/JS_Esercizi 08 - 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:

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

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

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

javascript/JS_Esercizi 08 - 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>

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