Tutti gli altri (6-10)

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!");
+});