+ ${user.nome} ${user.cognome} (${user.email})
+
+ `).join('');
+ });
+ } catch (error) {
+ console.error('Errore nel caricamento utenti:', error);
+ }
+}
+
+// Seleziona un utente
+function selectUser(userId, userName) {
+ currentUserId = userId;
+ document.getElementById('userSearch').value = userName;
+ document.getElementById('suggestions').innerHTML = '';
+ document.getElementById('selectedUser').textContent = `Utente: ${userName}`;
+ loadUserTodos(userId);
+}
+
+// Carica gli utenti all'avvio
+loadUsers();
\ No newline at end of file
diff --git a/JS_Esercizi 11 - API/todo_app/styles.css b/JS_Esercizi 11 - API/todo_app/styles.css
new file mode 100644
index 0000000..7852413
--- /dev/null
+++ b/JS_Esercizi 11 - API/todo_app/styles.css
@@ -0,0 +1,316 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ min-height: 100vh;
+ padding: 40px 20px;
+}
+
+.container {
+ max-width: 700px;
+ margin: 0 auto;
+ background: white;
+ border-radius: 15px;
+ padding: 40px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+ color: #333;
+ text-align: center;
+ margin-bottom: 10px;
+}
+
+.subtitle {
+ text-align: center;
+ color: #666;
+ margin-bottom: 30px;
+}
+
+.instructions {
+ background: #e3f2fd;
+ border-left: 4px solid #2196F3;
+ padding: 15px;
+ margin-bottom: 30px;
+ border-radius: 4px;
+}
+
+.instructions h3 {
+ color: #1565c0;
+ margin-bottom: 10px;
+}
+
+.instructions ol {
+ margin-left: 20px;
+ color: #333;
+}
+
+.instructions li {
+ margin: 8px 0;
+ font-size: 0.95rem;
+}
+
+.input-group {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 20px;
+}
+
+input {
+ flex: 1;
+ padding: 12px;
+ border: 2px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+ transition: border-color 0.3s;
+}
+
+input:focus {
+ outline: none;
+ border-color: #667eea;
+}
+
+.btn {
+ padding: 12px 20px;
+ background: #667eea;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s;
+ white-space: nowrap;
+}
+
+.btn:hover {
+ background: #764ba2;
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+}
+
+.btn-small {
+ padding: 6px 12px;
+ font-size: 0.85rem;
+ margin-left: 5px;
+}
+
+.btn-delete {
+ background: #f44336;
+}
+
+.btn-delete:hover {
+ background: #d32f2f;
+}
+
+.btn-complete {
+ background: #4caf50;
+}
+
+.btn-complete:hover {
+ background: #388e3c;
+}
+
+.todos-container {
+ margin-top: 30px;
+}
+
+.todo-item {
+ background: #f9f9f9;
+ border-left: 4px solid #667eea;
+ padding: 15px;
+ margin-bottom: 12px;
+ border-radius: 4px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: all 0.3s;
+}
+
+.todo-item:hover {
+ background: #f5f5f5;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.todo-item.completed {
+ opacity: 0.6;
+ border-left-color: #4caf50;
+}
+
+.todo-item.completed .todo-text {
+ text-decoration: line-through;
+ color: #999;
+}
+
+.todo-content {
+ flex: 1;
+}
+
+.todo-text {
+ color: #333;
+ font-size: 1rem;
+ margin-bottom: 5px;
+}
+
+.todo-id {
+ color: #999;
+ font-size: 0.85rem;
+}
+
+.todo-actions {
+ display: flex;
+ gap: 5px;
+}
+
+.error {
+ background: #ffebee;
+ border-left: 4px solid #f44336;
+ color: #c62828;
+ padding: 15px;
+ border-radius: 4px;
+ margin-top: 20px;
+}
+
+.success {
+ background: #e8f5e9;
+ border-left: 4px solid #4caf50;
+ color: #2e7d32;
+ padding: 15px;
+ border-radius: 4px;
+ margin-top: 20px;
+}
+
+.empty {
+ text-align: center;
+ color: #999;
+ padding: 40px 20px;
+}
+
+.loading {
+ display: none;
+ text-align: center;
+ color: #667eea;
+ margin: 20px 0;
+}
+
+.spinner {
+ border: 4px solid #f3f3f3;
+ border-top: 4px solid #667eea;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ animation: spin 1s linear infinite;
+ margin: 0 auto 10px;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.back-button {
+ display: inline-block;
+ margin-top: 30px;
+ padding: 10px 20px;
+ background: #999;
+ color: white;
+ text-decoration: none;
+ border-radius: 4px;
+ transition: all 0.3s;
+}
+
+.back-button:hover {
+ background: #777;
+}
+
+code {
+ background: #f5f5f5;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-family: monospace;
+ color: #d63384;
+}
+
+.counter {
+ background: #667eea;
+ color: white;
+ padding: 8px 12px;
+ border-radius: 20px;
+ display: inline-block;
+ font-size: 0.9rem;
+ margin-top: 10px;
+}
+
+.search-section {
+ background: #f0f4ff;
+ border: 2px solid #667eea;
+ padding: 20px;
+ border-radius: 8px;
+ margin-bottom: 30px;
+}
+
+.search-section h3 {
+ color: #667eea;
+ margin-bottom: 15px;
+}
+
+.search-container {
+ position: relative;
+ margin-bottom: 10px;
+}
+
+#userSearch {
+ width: 100%;
+ padding: 12px;
+ border: 2px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+ transition: border-color 0.3s;
+}
+
+#userSearch:focus {
+ outline: none;
+ border-color: #667eea;
+}
+
+.suggestions {
+ background: white;
+ border: 1px solid #ddd;
+ border-top: none;
+ border-radius: 0 0 4px 4px;
+ max-height: 250px;
+ overflow-y: auto;
+ display: none;
+}
+
+.suggestions:not(:empty) {
+ display: block;
+}
+
+.suggestion-item {
+ padding: 12px;
+ border-bottom: 1px solid #eee;
+ cursor: pointer;
+ transition: background 0.2s;
+ font-size: 0.95rem;
+}
+
+.suggestion-item:hover {
+ background: #f0f4ff;
+ color: #667eea;
+}
+
+.suggestion-item:last-child {
+ border-bottom: none;
+}
+
+.selected-user {
+ color: #666;
+ font-size: 0.95rem;
+ padding: 10px 0;
+}
diff --git a/JS_Esercizi 11 - API/tutorial/index.html b/JS_Esercizi 11 - API/tutorial/index.html
new file mode 100644
index 0000000..ec4c73c
--- /dev/null
+++ b/JS_Esercizi 11 - API/tutorial/index.html
@@ -0,0 +1,187 @@
+
+
+
+
+
📡 Tutorial - API REST e Fetch
+
Impara a comunicare con le API REST
+
+
Cos'è un'API REST?
+
+ Un'API REST (Representational State Transfer) è un insieme di regole che permette a due applicazioni di comunicare.
+ Attraverso una API REST puoi recuperare dati, crearli, modificarli e eliminarli
+ da un server usando richieste HTTP.
+
+
+
Metodi HTTP Principali
+
+
+ GET - Recupera dati dal server
+
+
+ POST - Crea nuovi dati sul server
+
+
+ PUT - Aggiorna completamente un dato
+
+
+ PATCH - Aggiorna parzialmente un dato
+
+
+ DELETE - Elimina un dato dal server
+
+
+
+
L'API che Useremo
+
+ Utilizzeremo un server JSON locale accessibile a http://localhost:3000/api
+ che contiene risorse diverse (utenti, todo, ecc.).
+
+
+
+ ⚠️ Importante: Prima di iniziare gli esercizi, assicurati che il server sia avviato!
+ Apri il terminale nella cartella server-api e digita: npm start
+
+
+
1. Fetch API - GET Request
+
La fetch API è il modo moderno per fare richieste HTTP in JavaScript.
+
+
Sintassi Base:
+
+ fetch('https://api.example.com/data')
+ .then(response => response.json())
+ .then(data => console.log(data))
+ .catch(error => console.error('Errore:', error));
+
+
+
Come Funziona:
+
+ - fetch(url) - Invia la richiesta al server
+ - .then(response => response.json()) - Converte la risposta in JSON
+ - .then(data => ...) - Ricevi e usa i dati
+ - .catch(error => ...) - Gestisci gli errori
+
+
+
Esempio Pratico:
+
+ fetch('http://localhost:3000/api/users')
+ .then(response => response.json())
+ .then(users => {
+ console.log('Utenti ricevuti:', users);
+ users.forEach(user => {
+ console.log(`${user.name} - ${user.email}`);
+ });
+ })
+ .catch(error => console.error('Errore:', error));
+
+
+
2. Fetch API - POST Request
+
Per inviare dati al server, usiamo il metodo POST.
+
+
Sintassi:
+
+ fetch('https://api.example.com/data', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ name: 'Mario',
+ email: 'mario@example.com'
+ })
+})
+ .then(response => response.json())
+ .then(data => console.log('Creato:', data))
+ .catch(error => console.error('Errore:', error));
+
+
+
3. Fetch API - DELETE Request
+
Per eliminare un dato dal server.
+
+
+ fetch('https://api.example.com/users/1', {
+ method: 'DELETE'
+})
+ .then(response => response.json())
+ .then(data => console.log('Eliminato:', data))
+ .catch(error => console.error('Errore:', error));
+
+
+
4. Async/Await - Sintassi Moderna
+
Una sintassi più leggibile e facile da capire rispetto alle Promise.
+
+
Sintassi:
+
+ async function fetchUsers() {
+ try {
+ const response = await fetch('http://localhost:3000/api/users');
+ const users = await response.json();
+ console.log('Utenti:', users);
+ } catch (error) {
+ console.error('Errore:', error);
+ }
+}
+
+fetchUsers();
+
+
+
+ ✓ Vantaggi: Il codice è più leggibile e simile al codice sincrono tradizionale.
+
+
+
5. Gestione degli Errori
+
È importante gestire gli errori quando facciamo richieste HTTP.
+
+
+ fetch('http://localhost:3000/api/users')
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`Errore HTTP: ${response.status}`);
+ }
+ return response.json();
+ })
+ .then(data => console.log(data))
+ .catch(error => {
+ console.error('Errore nella richiesta:', error.message);
+ });
+
+
+
6. Endpoint Disponibili sul Nostro Server
+
+
+ GET /api/users - Ottieni lista utenti
+ Esempio: http://localhost:3000/api/users
+
+
+ GET /api/users/:id - Ottieni un utente
+ Esempio: http://localhost:3000/api/users/1
+
+
+ POST /api/users - Crea nuovo utente
+ Body: { "name": "Mario", "email": "mario@example.com" }
+
+
+ PUT /api/users/:id - Aggiorna utente
+ Body: { "name": "Luigi", "email": "luigi@example.com" }
+
+
+ DELETE /api/users/:id - Elimina utente
+ Esempio: http://localhost:3000/api/users/1
+
+
+
+
Ora Sei Pronto!
+
+ Hai imparato i concetti fondamentali delle API REST e della Fetch API.
+ Ora puoi procedere agli esercizi e metterli in pratica!
+
+
+
← Torna al Hub
+