Esercizio 8+ fix

JS_Esercizi/JS_Esercizi 08 - DOM+/00_ripasso/index.html

@@ -102,12 +102,6 @@
                 <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>

JS_Esercizi/JS_Esercizi 08 - DOM+/00_ripasso/script.js

@@ -31,10 +31,6 @@ function esercizio_1_1() {
  * 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('');
@@ -50,8 +46,6 @@ function esercizio_1_2() {
  * 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('');
@@ -78,19 +72,20 @@ esercizio_1_3();
  * 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
         });
+
+        const risultato = document.querySelector('#risultato-2-1');
+        risultato.textContent = "✅ Testo cambato"
     }
+
 }
 
 
@@ -102,20 +97,19 @@ function esercizio_2_1() {
  * 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
-
         });
+
+        const risultato = document.querySelector('#risultato-2-2');
+        risultato.textContent = "✅ Elemento aggiunto"
     }
 }
 
@@ -129,20 +123,20 @@ function esercizio_2_2() {
  * 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
+            const nome = '';
             area.textContent
-            risultato.textContent
         });
+
+        const risultato = document.querySelector('#risultato-2-3');
+        risultato.textContent = "✅ Saluto inviato"
     }
 }
 
@@ -160,23 +154,22 @@ esercizio_2_3();
  * 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
+ * 3. Aggiungi un event listener che, al click:
- * 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
+let count = 0; // NOTA: 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', () => {
 
         });
+        const risultato = document.querySelector('#risultato-3-1');
+        risultato.textContent = "✅ Contatore attivo";
     }
 }
 
@@ -190,7 +183,6 @@ function esercizio_3_1() {
  *   - 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
@@ -199,12 +191,14 @@ function esercizio_3_1() {
 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) => {
 
         });
+
+        const risultato = document.querySelector('#risultato-3-2');
+        risultato.textContent = "✅ Echo attivo";
     }
 }
 
@@ -216,15 +210,15 @@ function esercizio_3_2() {
  * 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"
+ *   - Crea un nuovo elemento <p>
- *   - Aggiorna il risultato a "✅ Log attivo"
+ *   - Imposta il testo del paragrafo a "[id del box] cliccato"
+ *   - Aggiungi il paragrafo al log usando append()
  * 
  * 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) => {
@@ -232,6 +226,9 @@ function esercizio_3_3() {
                 
             });
         });
+
+        const risultato = document.querySelector('#risultato-3-3');
+        risultato.textContent = "✅ Log attivo";
     }
 }
 
@@ -242,18 +239,19 @@ function esercizio_3_3() {
  * 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 elemento = document.querySelector('');
-    const risultato = document.querySelector('#risultato-3-4');
 
     if (elemento) {
         elemento.addEventListener('click', () => {
             
         });
+
+        const risultato = document.querySelector('#risultato-3-4');
+        risultato.textContent = "✅ Toggle attivo";
     }
 }
 
@@ -263,30 +261,3 @@ 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();

JS_Esercizi/JS_Esercizi 08 - DOM+/00_ripasso/style.css

@@ -88,10 +88,15 @@ h1 {
 
 .exercise p {
     margin: 5px 0;
-    color: #555;
     font-size: 0.9rem;
 }
 
+.testo-blu {
+    color: #3498db;
+    font-weight: 500;
+}
+
+
 /* ============ INPUT & BUTTON ============ */
 
 input[type="text"],
@@ -143,7 +148,7 @@ button:active {
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
 }
 
-/* ============ RISULTATO ============ */
+/* ============ RISULTATO & AREA OUTPUT ============ */
 
 .risultato {
     background: #f8fafb;
@@ -156,6 +161,20 @@ button:active {
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
 }
 
+.area-output {
+    background: #f8fafb;
+    border: 1px solid #d5d8dc;
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 8px;
+    color: #34495e;
+    font-size: 0.9rem;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
+    min-height: 20px;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
 /* ============ BOX CLICK ============ */
 
 .box-click {
@@ -187,29 +206,27 @@ button:active {
     transform: translateY(0);
 }
 
-/* ============ RIEPILOGO ============ */
+/* ============ ELEMENTO TOGGLE ============ */
-#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 {
+.elemento-normale {
-    color: #2c3e50;
+    padding: 15px;
-    font-size: 1.4rem;
+    border: 2px solid #3498db;
-    margin-top: 0;
+    border-radius: 8px;
-}
+    background: white;
-
+    cursor: pointer;
-#status-completamento {
-    font-size: 1rem;
-    color: #2c3e50;
     transition: all 0.3s ease;
+    color: #2c3e50;
+}
+
+.elemento-normale:hover {
+    background: #ecf0f1;
+    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
+}
+
+.elemento-attivo {
+    background: #3498db;
+    color: white;
+    border-color: #2980b9;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
 }