fix api
This commit is contained in:
@@ -84,7 +84,7 @@ function handleError(message) {
|
||||
* 5. Fai una fetch GET a /users/{id}
|
||||
* 6. Se la risposta non è OK, usa handleError() per mostrare un messaggio e return
|
||||
* 7. Converti la risposta in JSON
|
||||
* 8. Mostra i dati dell'utente chiamando createUserCard(user)
|
||||
* 8. Mostra i dati dell'utente chiamando creaCardUtente(user)
|
||||
* 9. Nascondi lo spinner di caricamento (aggiungi la classe nascosto)
|
||||
*/
|
||||
async function fetchUser() {
|
||||
|
||||
@@ -13,17 +13,11 @@ const loading = document.querySelector('#loading');
|
||||
const counter = document.querySelector('#counter');
|
||||
|
||||
|
||||
// ===== VARIABILE DI STATO =====
|
||||
// Tiene traccia dell'ID utente attualmente caricato
|
||||
// Viene usata per sapere a quale utente associare i nuovi TODO
|
||||
// DA COMPLETARE: Carica questa variabile dal localStorage (se presente)
|
||||
let currentUserId = null;
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: Crea la card HTML per tutti i TODO passati come parametro
|
||||
*/
|
||||
function creaCardTodos(todoList) {
|
||||
function creaCardsTodos(todoList) {
|
||||
allTodos = todoList.map((todo) => `
|
||||
<div class="todo-item ${todo.completato ? 'completed' : ''}">
|
||||
<div class="todo-checkbox">
|
||||
@@ -67,8 +61,18 @@ function handleError(message) {
|
||||
* 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:
|
||||
* - Quando carichi i TODO, salva l'ID utente nel localStorage
|
||||
* - Al caricamento della pagina, recupera l'ID dal localStorage
|
||||
* - Pre-compila l'input e carica automaticamente i TODO se presente
|
||||
*/
|
||||
|
||||
// ===== VARIABILE DI STATO =====
|
||||
let currentUserId = null; // Variabile globale per tenere traccia dell'ID utente corrente
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE 1️⃣: Carica TODO (GET)
|
||||
*
|
||||
@@ -82,7 +86,7 @@ function handleError(message) {
|
||||
* 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 (e localStorage)
|
||||
* 10. Salva l'ID utente in currentUserId
|
||||
*/
|
||||
async function fetchTodosUtente() {
|
||||
// TODO Rimuovi questa riga e completa la funzione
|
||||
@@ -94,7 +98,8 @@ async function fetchTodosUtente() {
|
||||
* FUNZIONE 2️⃣: Aggiungi TODO (POST)
|
||||
*
|
||||
* Passi:
|
||||
* 1. Verifica che un utente sia stato caricato (currentUserId)
|
||||
* 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
|
||||
@@ -135,6 +140,30 @@ async function deleteTodo(id) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ==========================================
|
||||
* BONUS: PERSISTENZA CON LOCALSTORAGE
|
||||
* ==========================================
|
||||
*
|
||||
* Il localStorage permette di salvare dati nel browser che persistono
|
||||
* anche dopo il refresh della pagina.
|
||||
*
|
||||
* OBIETTIVO: Ricordare quale utente era stato caricato l'ultima volta
|
||||
*
|
||||
* PASSI DA IMPLEMENTARE:
|
||||
*
|
||||
* 1️⃣ SALVATAGGIO (in fetchTodosUtente, al passo 10): Salva l'ID come stringa
|
||||
* 2️⃣ CARICAMENTO ALL'AVVIO (aggiungi DOPO gli event listener):
|
||||
* - Recupera l'ID dal localStorage
|
||||
* - Se esiste, pre-compila l'input e chiama fetchTodosUtente() automaticamente
|
||||
*
|
||||
* NOTA: localStorage salva solo stringhe, quindi:
|
||||
* - Salvare: localStorage.setItem('key', valore)
|
||||
* - Recuperare: localStorage.getItem('key')
|
||||
* - Se serve un numero intero: parseInt(localStorage.getItem('key'))
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: Visualizza i TODO
|
||||
* Funzione già fatta - non modificare
|
||||
@@ -159,9 +188,7 @@ function displayTodos(todos) {
|
||||
`;
|
||||
counter.classList.remove('nascosto');
|
||||
|
||||
// CREA CARD TODO
|
||||
const todosHTML = todos.map(todo => creaCardTodos(todo)).join('');
|
||||
todosContainer.innerHTML = todosHTML;
|
||||
creaCardsTodos(todos);
|
||||
}
|
||||
|
||||
// ===== COLLEGA GLI EVENTI =====
|
||||
|
||||
@@ -14,7 +14,7 @@ async function eseguiTutorial() {
|
||||
* La keyword 'await' serve a dire "Fermati qui finché l'operazione non finisce".
|
||||
*/
|
||||
// Questa funzione simula un server che ci mette 1 secondo a rispondere
|
||||
// TODO: Aggiungi 'await' prima di wait(2000) per far funzionare l'attesa.
|
||||
// TODO: Aggiungi 'await' prima di wait(1000) per far funzionare l'attesa.
|
||||
wait(1000);
|
||||
|
||||
mostraOutput(1, "Operazione completata!");
|
||||
@@ -93,7 +93,6 @@ async function eseguiTutorial() {
|
||||
const listaUtenti = await responseUtenti.json();
|
||||
|
||||
// TODO: Usa .map() o un ciclo for per creare un array contenente SOLO i nomi degli utenti.
|
||||
// Esempio: const nomi = listaUtenti.map(u => u.name);
|
||||
const soloNomi = [];
|
||||
|
||||
mostraOutput(6, soloNomi);
|
||||
@@ -123,7 +122,7 @@ async function eseguiTutorial() {
|
||||
// Aggiungi method: 'POST'
|
||||
// Aggiungi headers: { 'Content-Type': 'application/json' }
|
||||
// Aggiungi body: JSON.stringify(nuovoUtente)
|
||||
const rispInvio = await fetch(`${urlBase}/posts`, {
|
||||
const rispInvio = await fetch(`${urlBase}/users`, {
|
||||
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user