diff --git a/javascript/JS_Esercizi 11 - API/01_get_singolo_utente/script.js b/javascript/JS_Esercizi 11 - API/01_get_singolo_utente/script.js
index c5f2c0a..4548770 100644
--- a/javascript/JS_Esercizi 11 - API/01_get_singolo_utente/script.js
+++ b/javascript/JS_Esercizi 11 - API/01_get_singolo_utente/script.js
@@ -1,17 +1,16 @@
-// ⚠️ COMPILARE PRIMA DI INIZIARE
-// Inserisci l'URL del server corretto
+// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
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 = `
@@ -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 = `
+
+ ❌ ${message}
+
+ `;
}
@@ -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);
diff --git a/javascript/JS_Esercizi 11 - API/02_get_lista_utenti/index.html b/javascript/JS_Esercizi 11 - API/02_get_lista_utenti/index.html
index 22ec816..081cf92 100644
--- a/javascript/JS_Esercizi 11 - API/02_get_lista_utenti/index.html
+++ b/javascript/JS_Esercizi 11 - API/02_get_lista_utenti/index.html
@@ -19,7 +19,7 @@
-
+
⏳ Caricamento...
@@ -27,22 +27,10 @@
-
+
-
-
-
📝 Istruzioni
-
-
Apri script.js e completa fetchAllUsers()
-
Compila BASE_URL
-
GET a /users e usa map() per creare card
-
-
-
- 💡 Suggerimento:
-
const html = users.map(user => `<div>...</div>`).join('');
*
*/
-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:
- * 1. Fai una fetch GET a: BASE_URL + '/users'
- * 2. Converti in JSON
- * 3. Chiama displayUsers() passando l'array
- * 4. Gestisci gli errori
+ * Passi:
+ * 1. Mostra lo spinner di caricamento (rimuovi la classe nascosto)
+ * 2. Fai una fetch GET a /users
+ * 3. Se la risposta non è OK, usa handleError() per mostrare un messaggio e return
+ * 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');
- const container = document.getElementById('usersContainer');
- 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 = `
-
- ❌ Errore: ${error.message}
-
- `;
- console.error('Errore:', error);
- } finally {
- loading.style.display = 'none';
- }
+ // TODO Rimuovi questa riga e completa la funzione
+ handleError('Codice non implementato - Completa la funzione fetchAllUsers()');
}
+
/**
* Visualizza gli utenti in una griglia di card
- * (Questa funzione è già fatta - non modificare)
+ * Funzione già fatta - non modificare
*/
-function displayUsers(users) {
- const container = document.getElementById('usersContainer');
- const counter = document.getElementById('counter');
-
+function mostraUtenti(users) {
if (!Array.isArray(users) || users.length === 0) {
- container.innerHTML = '