Esercizio 11 API

2026-02-05 11:57:28 +01:00
parent f4d3e40059
commit 86611fd6e2
37 changed files with 5057 additions and 0 deletions
--- a/API/03_utente_e_post/script.js
+++ b/API/03_utente_e_post/script.js
@@ -0,0 +1,124 @@
+// ⚠️ COMPILARE PRIMA DI INIZIARE
+const BASE_URL = 'http://localhost:3000/api';
+
+/**
+ * ESERCIZIO 3: Recupera un utente E tutti i suoi post
+ * 
+ * Devi completare questa funzione:
+ * 1. Leggi l'ID dell'utente
+ * 2. Fai DUE fetch:
+ *    - GET /users/{id}
+ *    - GET /posts
+ * 3. Filtra i post per trovare solo quelli di questo utente (usando userId)
+ * 4. Mostra i risultati
+ * 5. Gestisci gli errori
+ */
+async function fetchUserAndPosts() {
+    const userId = document.getElementById('userId').value;
+    const loading = document.getElementById('loading');
+    const userProfile = document.getElementById('userProfile');
+    const postsContainer = document.getElementById('postsContainer');
+
+    if (!userId || userId < 1 || userId > 40) {
+        userProfile.innerHTML = '<div class="error">❌ Inserisci un ID valido tra 1 e 40</div>';
+        return;
+    }
+
+    loading.style.display = 'block';
+    userProfile.innerHTML = '';
+    postsContainer.innerHTML = '';
+
+    try {
+        // 👇 SCRIVI QUI IL TUO CODICE 👇
+        // 1. Fetch utente
+        // const userResponse = await fetch(...);
+        // const user = await userResponse.json();
+
+        // 2. Fetch tutti i post
+        // const postsResponse = await fetch(...);
+        // const allPosts = await postsResponse.json();
+
+        // 3. Filtra i post di questo utente
+        // const userPosts = allPosts.filter(post => post.userId === user.id);
+
+        // 4. Visualizza
+        // displayUserWithPosts(user, userPosts);
+
+        // PLACEHOLDER - Rimuovi questa riga quando completi
+        throw new Error('Codice non implementato - Completa la funzione fetchUserAndPosts()');
+
+    } catch (error) {
+        userProfile.innerHTML = `
+            <div class="error">
+                <strong>❌ Errore:</strong> ${error.message}
+            </div>
+        `;
+        console.error('Errore:', error);
+    } finally {
+        loading.style.display = 'none';
+    }
+}
+
+/**
+ * Visualizza utente e post
+ * (Questa funzione è già fatta - non modificare)
+ */
+function displayUserWithPosts(user, posts) {
+    const userProfile = document.getElementById('userProfile');
+    const postsContainer = document.getElementById('postsContainer');
+
+    // CARD UTENTE
+    const userHTML = `
+        <div class="user-card">
+            <div class="card-header">
+                <img src="${user.avatar}" alt="Avatar" class="avatar">
+                <div class="user-info">
+                    <h2>${user.nome} ${user.cognome}</h2>
+                    <p class="email">📧 ${user.email}</p>
+                    <p class="location">📍 ${user.comune}</p>
+                </div>
+            </div>
+        </div>
+    `;
+
+    userProfile.innerHTML = userHTML;
+
+    // POST DELL'UTENTE
+    if (!posts || posts.length === 0) {
+        postsContainer.innerHTML = `
+            <div class="posts-section">
+                <h2>📄 Post (0)</h2>
+                <div class="empty">Questo utente non ha scritto nessun post</div>
+            </div>
+        `;
+        return;
+    }
+
+    const postsHTML = `
+        <div class="posts-section">
+            <h2>📄 Post (${posts.length})</h2>
+            ${posts.map(post => `
+                <div class="post-card">
+                    <div class="post-header">
+                        <h3>${post.titolo}</h3>
+                        <span class="post-date">📅 ${post.data}</span>
+                    </div>
+                    <p class="post-content">${post.contenuto}</p>
+                    <div class="post-footer">
+                        <span class="likes">❤️ ${post.likes} likes</span>
+                    </div>
+                </div>
+            `).join('')}
+        </div>
+    `;
+
+    postsContainer.innerHTML = postsHTML;
+}
+
+// COLLEGA IL BOTTONE
+document.getElementById('btnFetch').addEventListener('click', fetchUserAndPosts);
+
+// PERMETTI ENTER
+document.getElementById('userId').addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') fetchUserAndPosts();
+});