fix api

javascript/11_API/05_todo_app_crud/script.js

@@ -13,12 +13,36 @@ const loading = document.querySelector('#loading');
 const counter = document.querySelector('#counter');
 
 
-
 /**
- * FUNZIONE: Crea la card HTML per tutti i TODO passati come parametro
+ * FUNZIONE: Visualizza i TODO nella pagina
+ * 
+ * Prende in input un array di oggetti TODO (con struttura visibile nella documentazione API)
+ * e crea la lista dei TODO all'interno dell'elemento todosContainer.
+ * Ogni TODO mostra titolo, ID, e uno checkbox per completarlo.
+ * Se l'array è vuoto, mostra un messaggio "Nessun TODO. Creane uno!".
+ * Funzione già fatta - non modificare
  */
-function creaCardsTodos(todoList) {
-    allTodos = todoList.map((todo) => `
+function creaListaTodos(todos) {
+
+    if (!Array.isArray(todos) || todos.length === 0) {
+        todosContainer.innerHTML = '<div class="empty">Nessun TODO. Creane uno!</div>';
+        counter.classList.add('nascosto');
+        return;
+    }
+
+    // CONTA COMPLETATI E NON
+    const completed = todos.filter(t => t.completato).length;
+    const pending = todos.length - completed;
+
+    // MOSTRA COUNTER
+    counter.innerHTML = `
+        📊 Totale: <strong>${todos.length}</strong> |
+        ✅ Completati: <strong>${completed}</strong> |
+        ⏳ In Sospeso: <strong>${pending}</strong>
+    `;
+    counter.classList.remove('nascosto');
+
+    todosContainer.innerHTML = todos.map((todo) => `
       <div class="todo-item ${todo.completato ? 'completed' : ''}">
             <div class="todo-checkbox">
                 <input type="checkbox" 
@@ -32,24 +56,21 @@ function creaCardsTodos(todoList) {
             <button class="btn-delete" onclick="deleteTodo(${todo.id})">🗑️ Elimina</button>
         </div>
     `).join('');
-
-    todosContainer.innerHTML = allTodos;
 }
 
 
-
 /**
  * FUNZIONE: Gestione errori
  * 
  * Mostra un messaggio di errore e logga in console
  */
-function handleError(message) {
+function mostraErrore(message) {
+    console.error('Errore:', message);
     todosContainer.innerHTML = `
         <div class="error">
             <strong>❌ ${message}</strong>
         </div>
     `;
-    console.error('Errore:', message);
 }
 
 
@@ -57,10 +78,10 @@ function handleError(message) {
  * ESERCIZIO 4: Todo App CRUD Completa
  * 
  * Devi implementare 4 funzioni:
- * 1. fetchTodosUtente()  - GET /todos?userId={id}  (READ)
- * 2. addTodo()           - POST /todos             (CREATE)
- * 3. toggleTodo()        - PUT /todos/{id}         (UPDATE)
- * 4. deleteTodo()        - DELETE /todos/{id}      (DELETE)
+ * 1. fetchTodosUtente()  - GET    /todos?userId={id}  (READ)
+ * 2. addTodo()           - POST   /todos              (CREATE)
+ * 3. toggleTodo()        - PUT    /todos/{id}         (UPDATE)
+ * 4. deleteTodo()        - DELETE /todos/{id}         (DELETE)
  * 
  * BONUS (OPZIONALE): Persistenza con localStorage
  * Se hai completato tutte le funzioni, puoi aggiungere la persistenza dell'utente:
@@ -82,15 +103,16 @@ let currentUserId = null; // Variabile globale per tenere traccia dell'ID utente
  *  3. Mostra lo spinner di caricamento
  *  4. Apri un blocco try/catch
  *  5. Fai una GET a /todos?userId={id}
- *  6. Se non OK, mostra errore e return
+ *  6. Se non OK, lancia un errore con messaggio che include lo status code
  *  7. Converti la risposta in JSON
  *  8. Chiama displayTodos() per visualizzare
- *  9. Nascondi lo spinner e mostra addTodoSection
- * 10. Salva l'ID utente in currentUserId
+ *  9. Nel catch, mostra un messaggio di errore
+ * 10. Nascondi lo spinner e mostra addTodoSection
+ * 11. Salva l'ID utente nella variabile globale currentUserId
  */
 async function fetchTodosUtente() {
     // TODO Rimuovi questa riga e completa la funzione
-    handleError('Codice non implementato - Completa la funzione fetchTodosUtente()');
+    mostraErrore('Codice non implementato - Completa la funzione fetchTodosUtente()');
 }
 
 
@@ -98,16 +120,17 @@ async function fetchTodosUtente() {
  * FUNZIONE 2️⃣: Aggiungi TODO (POST)
  * 
  * Passi:
- * 1. Verifica che un utente sia stato caricato (currentUserId !== null)
- *    Altrimenti, mostra errore "Carica prima un utente!" e return
- * 2. Leggi il testo dal campo di input del nuovo TODO
- * 3. Valida con trim che non sia vuoto
- * 4. Mostra lo spinner di caricamento
- * 5. Apri un blocco try/catch
- * 6. Fai una POST a /todos con body: {userId, titolo, completato: false}
- * 7. Se non OK, mostra errore
- * 8. Se OK, svuota l'input
- * 9. Ricarica la lista chiamando fetchTodosUtente()
+ *  1. Verifica che un utente sia stato caricato (currentUserId !== null)
+ *     Altrimenti, mostra errore "Carica prima un utente!" e return
+ *  2. Leggi il testo dal campo di input del nuovo TODO
+ *  3. Valida con trim che non sia vuoto
+ *  4. Mostra lo spinner di caricamento
+ *  5. Apri un blocco try/catch
+ *  6. Fai una POST a /todos con body: {userId, titolo, completato: false}
+ *  7. Se non OK, lancia un errore con messaggio che include lo status code
+ *  8. Se OK, svuota l'input e ricarica la lista chiamando fetchTodosUtente()
+ * 10. Nel catch, mostra un messaggio di errore
+ * 11. Nascondi lo spinner di caricamento
  */
 async function addTodo() {
 }
@@ -119,8 +142,9 @@ async function addTodo() {
  * Passi:
  * 1. Ricevi id e currentCompleted come parametri
  * 2. Fai una PUT a /todos/{id} con body: {completato: !currentCompleted}
- * 3. Se non OK, mostra errore
+ * 3. Se non OK, lancia un errore con messaggio che include lo status code
  * 4. Se OK, ricarica la lista chiamando fetchTodosUtente()
+ * 5. Nel catch, mostra un messaggio di errore
  */
 async function toggleTodo(id, currentCompleted) {
 }
@@ -130,11 +154,10 @@ async function toggleTodo(id, currentCompleted) {
  * FUNZIONE 4️⃣: Elimina TODO (DELETE)
  * 
  * Passi:
- * 1. Chiedi conferma con confirm("Sicuro?")
- * 2. Se l'utente cancella, return
- * 3. Fai una DELETE a /todos/{id}
- * 4. Se non OK, mostra errore
- * 5. Se OK, ricarica la lista chiamando fetchTodosUtente()
+ * 1. Fai una DELETE a /todos/{id}
+ * 2. Se non OK, lancia un errore con messaggio che include lo status code
+ * 3. Se OK, ricarica la lista chiamando fetchTodosUtente()
+ * 4. Nel catch, mostra un messaggio di errore
  */
 async function deleteTodo(id) {
 }
@@ -164,33 +187,6 @@ async function deleteTodo(id) {
  */
 
 
-/**
- * FUNZIONE: Visualizza i TODO
- * Funzione già fatta - non modificare
- */
-function displayTodos(todos) {
-
-    if (!Array.isArray(todos) || todos.length === 0) {
-        todosContainer.innerHTML = '<div class="empty">Nessun TODO. Creane uno!</div>';
-        counter.classList.add('nascosto');
-        return;
-    }
-
-    // CONTA COMPLETATI E NON
-    const completed = todos.filter(t => t.completato).length;
-    const pending = todos.length - completed;
-
-    // MOSTRA COUNTER
-    counter.innerHTML = `
-        📊 Totale: <strong>${todos.length}</strong> |
-        ✅ Completati: <strong>${completed}</strong> |
-        ⏳ In Sospeso: <strong>${pending}</strong>
-    `;
-    counter.classList.remove('nascosto');
-
-    creaCardsTodos(todos);
-}
-
 // ===== COLLEGA GLI EVENTI =====
 btnLoadTodos.addEventListener('click', fetchTodosUtente);
 btnAddTodo.addEventListener('click', addTodo);