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/04_todo_app_crud/index.html
+++ b/API/04_todo_app_crud/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Esercizio 4 - Todo App CRUD</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold;">← Dashboard</a>
+
+    <div class="app-container">
+        <h1>✅ Todo App CRUD</h1>
+        <p class="subtitle">GET, POST, PUT, DELETE - App completa</p>
+
+        <!-- SEZIONE SELEZIONE UTENTE -->
+        <div class="config-box">
+            <h2>👤 Seleziona Utente</h2>
+            <div class="input-group">
+                <input type="number" id="userId" min="1" max="40" value="1" placeholder="ID Utente (1-40)">
+                <button id="btnLoadTodos">Carica TODO</button>
+            </div>
+        </div>
+
+        <!-- SEZIONE AGGIUNTA TODO -->
+        <div id="addTodoSection" class="add-todo-box" style="display: none;">
+            <h2>➕ Aggiungi Nuovo TODO</h2>
+            <div class="input-group">
+                <input type="text" id="todoInput" placeholder="Scrivi un nuovo TODO...">
+                <button id="btnAddTodo">Aggiungi</button>
+            </div>
+        </div>
+
+        <!-- LOADING -->
+        <div id="loading" class="loading" style="display: none;">
+            ⏳ Caricamento...
+        </div>
+
+        <!-- COUNTER -->
+        <div id="counter" class="counter" style="display: none;"></div>
+
+        <!-- LISTA TODO -->
+        <div id="todosContainer" class="todos-container"></div>
+
+        <!-- ISTRUZIONI -->
+        <div class="instructions">
+            <h2>📝 Cosa Devi Fare</h2>
+            <p style="margin-bottom: 15px;"><strong>Questa è l'esercitazione finale!</strong> Devi implementare TUTTE le operazioni CRUD:</p>
+            
+            <h3>1️⃣ Carica TODO (GET)</h3>
+            <ul style="margin-left: 20px; margin-bottom: 15px;">
+                <li>Fai una GET a <code>/todos?userId={id}</code> per ottenere i TODO dell'utente</li>
+                <li>Visualizza la lista</li>
+            </ul>
+
+            <h3>2️⃣ Aggiungi TODO (POST)</h3>
+            <ul style="margin-left: 20px; margin-bottom: 15px;">
+                <li>Fai una POST a <code>/todos</code> con: <code>{userId, titolo, completato: false}</code></li>
+                <li>Ricarica la lista</li>
+            </ul>
+
+            <h3>3️⃣ Modifica TODO (PUT)</h3>
+            <ul style="margin-left: 20px; margin-bottom: 15px;">
+                <li>Fai una PUT a <code>/todos/{id}</code> con: <code>{completato: !currentValue}</code></li>
+                <li>Aggiorna la lista</li>
+            </ul>
+
+            <h3>4️⃣ Elimina TODO (DELETE)</h3>
+            <ul style="margin-left: 20px; margin-bottom: 15px;">
+                <li>Fai una DELETE a <code>/todos/{id}</code></li>
+                <li>Rimuovi dalla lista</li>
+            </ul>
+
+            <div class="hint">
+                <strong>💡 Struttura del codice:</strong>
+                <pre>// Funzioni che devi implementare:
+loadUserTodos(userId)     // GET
+addTodo()                 // POST
+toggleTodo(id, current)   // PUT
+deleteTodo(id)            // DELETE
+displayTodos(todos)       // Visualizza (già fatto)</pre>
+            </div>
+
+            <div class="challenge">
+                <strong>🎯 Bonus Challenge:</strong>
+                <p>Aggiungi un riepilogo: quanti TODO sono completati vs quanti rimangono?</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>