This commit is contained in:
2026-02-16 23:22:49 +01:00
parent 0c3ad09db4
commit fb836b3113
3 changed files with 42 additions and 16 deletions

View File

@@ -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() {

View File

@@ -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 =====

View File

@@ -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`, {
});