Tutti gli altri (6-10)

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

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

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

JS_Esercizi/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:
+ * 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').
+ */
+
+// Scrivi qui il tuo codice...

JS_Esercizi/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:
+ * 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.
+ */
+
+// Scrivi qui il tuo codice...

JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/esercizi2/debug.js

@@ -0,0 +1,20 @@
+/**
+ * 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 la console e leggi l'errore quando clicchi il bottone.
+ * 2. Capisci perché `style` non funziona.
+ * 3. Correggi il codice.
+ */
+
+const bottone = document.getElementById('btn-colora-tutti');
+const paragrafi = document.querySelectorAll('.testo-colorato');
+
+bottone.addEventListener('click', function() {
+    paragrafi.style.color = 'blue'; 
+    console.log("Colorati!");
+});

JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/esercizio.html

@@ -0,0 +1,86 @@
+<!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 */
+        .esercizio-box { min-height: 50px; border: 1px dashed #999; padding: 10px; margin: 10px 0; }
+        .error { color: red; }
+        .success { color: green; }
+    </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 -->
+</body>
+</html>

JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/extra/debug_avanzato.js

@@ -0,0 +1,30 @@
+/**
+ * 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.getElementById('container-extra-debug');
+container.innerHTML = `
+  <ul id="lista-a"><li>Item 1</li></ul>
+  <ul id="lista-b"></ul>
+`;
+
+// CODICE BUGGATO:
+const item = document.querySelector('li');
+const listaB = document.getElementById('lista-b');
+
+// Vogliamo che al click, l'item vada nella lista B
+item.addEventListener('click', function () {
+    // Codice attuale che non fa nulla o da errore se non completato:
+    listaB.innerHTML = item;
+});

JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/extra/generatore_box.js

@@ -0,0 +1,16 @@
+/**
+ * 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):
+ * - Crea un nuovo `div`.
+ * - Assegnagli una larghezza e altezza di 100px.
+ * - Assegnagli il colore di sfondo prendendolo dall'array in base all'indice.
+ * - Aggiungi un evento 'click' al div: quando cliccato, il div deve rimuoversi da solo (`this.remove()`).
+ * - Aggiungi il div al 'container-extra-box'.
+ */

JS_Esercizi/JS_Esercizi 08 - DOM/esercizi/extra/validatore_input.js

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ * 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!".
+ */