fix es 12 .1 & .2

javascript/JS_Esercizi 11 - API/01_get_singolo_utente/script.js

@@ -1,17 +1,16 @@
-// ⚠️ COMPILARE PRIMA DI INIZIARE
+// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
-// Inserisci l'URL del server corretto
 const BASE_URL = 'http://192.168.1.7:3000/api';
-
-// ELEMENTI DEL DOM (controlla che siano corretti)
 const userId = document.querySelector('#userId');
 const loading = document.querySelector('#loading');
 const result = document.querySelector('#result');
+const btnFetch = document.querySelector('#btnFetch');
 
 
 /**
  * FUNZIONE: Crea utente card
  * 
  * Crea la card completa dell'utente e la inserisce nell'elemento result
+ * Funzione già fatta - non modificare
  * L'oggetto user ha questa struttura:
  * {
  *   id: number,
@@ -24,7 +23,7 @@ const result = document.querySelector('#result');
  *   attivo: boolean
  * }
  */
-function createUserCard(user) {
+function creaCardUtente(user) {
     result.innerHTML = `
         <div class="user-card">
             <div class="card-header">
@@ -57,19 +56,15 @@ function createUserCard(user) {
  * 
  * Mostra un messaggio di errore nell'elemento result
  * e logga l'errore in console (per debug)
+ * Funzione già fatta - non modificare
  */
 function handleError(message) {
-    result.innerHTML = '';
-
-    let div = document.createElement('div');
-    div.className = 'error';
-
-    let strong = document.createElement('strong');
-    strong.textContent = `❌ ${message}`;
-
-    div.appendChild(strong);
-    result.appendChild(div);
     console.error('Errore:', message);
+    result.innerHTML = `
+    <div class="error">
+        <strong>❌ ${message}</strong>
+    </div>
+    `;
 }
 
 
@@ -92,11 +87,11 @@ function handleError(message) {
  * 8. Nascondi lo spinner di caricamento (aggiungi la classe nascosto)
  */
 async function fetchUser() {
-    // PLACEHOLDER - Rimuovi questa riga quando completi
+    // TODO Rimuovi questa riga e completa la funzione
     handleError('Codice non implementato - Completa la funzione fetchUser()');
 }
 
 
 // COLLEGA IL BOTTONE AL CLICK
-document.getElementById('btnFetch').addEventListener('click', fetchUser);
+btnFetch.addEventListener('click', fetchUser);
 

javascript/JS_Esercizi 11 - API/02_get_lista_utenti/index.html

@@ -19,7 +19,7 @@
         </div>
 
         <!-- LOADING SPINNER -->
-        <div id="loading" class="loading" style="display: none;">
+        <div id="loading" class="loading nascosto">
             ⏳ Caricamento...
         </div>
 
@@ -27,22 +27,10 @@
         <div id="counter" style="display: none; text-align: center; color: #666; margin-bottom: 20px; font-weight: bold;"></div>
 
         <!-- GRIGLIA UTENTI -->
-        <div id="usersContainer" class="users-grid"></div>
+        <div id="users-container" class="users-grid"></div>
 
-        <!-- ISTRUZIONI -->
+        <!-- RISULTATO -->
-        <div class="instructions-box" style="margin-top: 30px;">
+        <div id="result" class=""></div>
-            <h2>📝 Istruzioni</h2>
-            <ol>
-                <li>Apri <code>script.js</code> e completa <code>fetchAllUsers()</code></li>
-                <li>Compila <code>BASE_URL</code></li>
-                <li>GET a <code>/users</code> e usa <code>map()</code> per creare card</li>
-            </ol>
-
-            <div class="hint">
-                <strong>💡 Suggerimento:</strong>
-                <pre>const html = users.map(user => `&lt;div&gt;...&lt;/div&gt;`).join('');</pre>
-            </div>
-        </div>
     </div>
 
     <script src="script.js"></script>

javascript/JS_Esercizi 11 - API/02_get_lista_utenti/script.js

@@ -1,5 +1,9 @@
-// ⚠️ COMPILARE PRIMA DI INIZIARE
+// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
 const BASE_URL = 'http://localhost:3000/api';
+const loading = document.querySelector('#loading');
+const counter = document.querySelector('#counter');
+const result = document.querySelector('#result');
+const btnFetch = document.querySelector('#btnLoadUsers');
 
 
 /**
@@ -19,80 +23,63 @@ const BASE_URL = 'http://localhost:3000/api';
  *       </div>
  *   </div>
  */
-function creaCardUser(user) {
+function creaCardUtente(user) {
     return ``;
 }
 
 
+/**
+ * FUNZIONE: Gestione errori
+ * 
+ * Mostra un messaggio di errore nell'elemento result
+ * e logga l'errore in console (per debug)
+ * Funzione già fatta - non modificare
+ */
+function handleError(message) {
+    result.innerHTML = '';
+
+    let div = document.createElement('div');
+    div.className = 'error';
+
+    let strong = document.createElement('strong');
+    strong.textContent = `❌ ${message}`;
+
+    div.appendChild(strong);
+    result.appendChild(div);
+    console.error('Errore:', message);
+}
+
 
 /**
- * ESERCIZIO 2: Recupera TUTTI gli utenti
+ * FUNZIONE: Fetch lista utenti
  * 
- * Devi completare questa funzione:
+ * Passi:
- * 1. Fai una fetch GET a: BASE_URL + '/users'
+ * 1. Mostra lo spinner di caricamento (rimuovi la classe nascosto)
- * 2. Converti in JSON
+ * 2. Fai una fetch GET a /users
- * 3. Chiama displayUsers() passando l'array
+ * 3. Se la risposta non è OK, usa handleError() per mostrare un messaggio e return
- * 4. Gestisci gli errori
+ * 4. Converti la risposta da stringa JSON a oggetto JavaScript
+ * 5. Mostra i dati degli utenti chiamando mostraUtenti(users)
+ * 6. Nascondi lo spinner di caricamento (aggiungi la classe nascosto)
  */
 async function fetchAllUsers() {
-    const loading = document.getElementById('loading');
+    // TODO Rimuovi questa riga e completa la funzione
-    const container = document.getElementById('usersContainer');
+    handleError('Codice non implementato - Completa la funzione fetchAllUsers()');
-    const counter = document.getElementById('counter');
-
-    loading.style.display = 'block';
-    container.innerHTML = '';
-    counter.style.display = 'none';
-
-    try {
-        // 👇 SCRIVI QUI IL TUO CODICE 👇
-        // const response = await fetch(...);
-        // const users = await response.json();
-        // displayUsers(users);
-
-        // PLACEHOLDER - Rimuovi questa riga quando completi
-        throw new Error('Codice non implementato - Completa la funzione fetchAllUsers()');
-
-    } catch (error) {
-        container.innerHTML = `
-            <div class="error">
-                <strong>❌ Errore:</strong> ${error.message}
-            </div>
-        `;
-        console.error('Errore:', error);
-    } finally {
-        loading.style.display = 'none';
-    }
 }
 
+
 /**
  * Visualizza gli utenti in una griglia di card
- * (Questa funzione è già fatta - non modificare)
+ * Funzione già fatta - non modificare
  */
-function displayUsers(users) {
+function mostraUtenti(users) {
-    const container = document.getElementById('usersContainer');
-    const counter = document.getElementById('counter');
-
     if (!Array.isArray(users) || users.length === 0) {
-        container.innerHTML = '<div class="error">❌ Nessun utente trovato</div>';
+        handleError('Nessun utente trovato');
         return;
     }
 
     // CREA CARD PER OGNI UTENTE
-    const cardsHTML = users.map(user => `
+    const cardsHTML = users.map(user => creaCardUtente(user)).join('');
-        <div class="user-card">
+    result.innerHTML = cardsHTML;
-            <img src="${user.avatar || 'https://placehold.co/100'}" alt="Avatar" class="card-avatar">
-            <div class="card-content">
-                <h3>${user.nome} ${user.cognome}</h3>
-                <p class="email">📧 ${user.email}</p>
-                <p class="location">📍 ${user.comune}</p>
-                <div class="status ${user.attivo ? 'attivo' : 'inattivo'}">
-                    ${user.attivo ? '🟢 Attivo' : '🔴 Inattivo'}
-                </div>
-            </div>
-        </div>
-    `).join('');
-
-    container.innerHTML = cardsHTML;
 
     // MOSTRA CONTATORE
     counter.innerHTML = `📊 Totale: <strong>${users.length} utenti</strong>`;
@@ -100,4 +87,4 @@ function displayUsers(users) {
 }
 
 // COLLEGA IL BOTTONE
-document.getElementById('btnLoadUsers').addEventListener('click', fetchAllUsers);
+btnFetch.addEventListener('click', fetchAllUsers);

javascript/JS_Esercizi 11 - API/02_get_lista_utenti/style.css

@@ -187,3 +187,7 @@ h1 {
     color: #333;
     margin: 0;
 }
+
+.nascosto {
+    display: none;
+}