diff --git a/JS_Esercizi 11 - API/README.md b/JS_Esercizi 11 - API/README.md
new file mode 100644
index 0000000..7b65f45
--- /dev/null
+++ b/JS_Esercizi 11 - API/README.md
@@ -0,0 +1,166 @@
+# 🔌 Esercizi API REST - Guida Completa
+
+## 📋 Struttura del Progetto
+
+```
+JS_Esercizi 11 - API/
+├── index.html # Hub principale - accesso agli esercizi
+├── tutorial/
+│ └── index.html # Tutorial su API REST e Fetch
+└── esercizi/
+ ├── meteo/
+ │ └── index.html # Esercizio 1: GET Request base
+ ├── lista_utenti/
+ │ └── index.html # Esercizio 2: GET con iterazione e DOM
+ └── todo_app/
+ └── index.html # Esercizio 3: CRUD completo (POST, PUT, DELETE)
+```
+
+## 🚀 Come Iniziare
+
+### 1. Avvia il Server API
+Prima di iniziare qualsiasi esercizio, **devi avviare il server**:
+
+```bash
+cd server-api
+npm start
+```
+
+Il server sarà disponibile a: `http://localhost:3000/api`
+
+### ⚠️ Importante
+Se non avvii il server, gli esercizi non funzioneranno perché non riusciranno a recuperare i dati!
+
+## 📚 Contenuto del Corso
+
+### 🎓 Tutorial
+Leggi prima il tutorial per capire:
+- Cos'è un'API REST
+- Come funziona la Fetch API
+- Metodi HTTP (GET, POST, PUT, DELETE)
+- Promise e Async/Await
+
+**Accedi da:** [index.html → Tutorial](tutorial/index.html)
+
+### 🔧 Esercizio 1: App Meteo (GET Base)
+**Difficoltà:** ⭐ Base
+
+Impara i fondamenti delle GET request:
+- Fetch API base
+- Conversione JSON
+- Visualizzazione dati
+- Gestione errori
+
+**Cosa fare:** Scrivi il codice per recuperare e visualizzare dati meteo
+
+**Accedi da:** [index.html → App Meteo](esercizi/meteo/index.html)
+
+### 👥 Esercizio 2: Lista Utenti (GET + DOM)
+**Difficoltà:** ⭐⭐ Intermedio
+
+Sviluppa skills di manipolazione del DOM:
+- GET request avanzato
+- Iterazione array con map()
+- Creazione dinamica di elementi HTML
+- Conteggio e statistiche
+
+**Cosa fare:** Recupera una lista di utenti e crea card dinamiche
+
+**Accedi da:** [index.html → Lista Utenti](esercizi/lista_utenti/index.html)
+
+### ✓ Esercizio 3: Todo App (CRUD Completo)
+**Difficoltà:** ⭐⭐⭐ Avanzato
+
+Implementa tutte le operazioni CRUD:
+- **CREATE:** POST request per aggiungere todo
+- **READ:** GET request per recuperare todo
+- **UPDATE:** PUT request per segnare come completato
+- **DELETE:** DELETE request per eliminare
+
+**Cosa fare:** Crea un'app TODO completa con tutte le operazioni
+
+**Accedi da:** [index.html → Todo App](esercizi/todo_app/index.html)
+
+## 🛠️ API Endpoints Disponibili
+
+Il server fornisce questi endpoint:
+
+```
+GET /api/weather → Ottieni dati meteo
+GET /api/users → Ottieni lista utenti
+GET /api/users/:id → Ottieni un utente
+POST /api/users → Crea nuovo utente
+PUT /api/users/:id → Aggiorna utente
+DELETE /api/users/:id → Elimina utente
+
+GET /api/todos → Ottieni lista todo
+GET /api/todos/:id → Ottieni un todo
+POST /api/todos → Crea nuovo todo
+PUT /api/todos/:id → Aggiorna todo
+DELETE /api/todos/:id → Elimina todo
+```
+
+## 📖 Esempi di Codice
+
+### GET Request Base
+```javascript
+const response = await fetch('http://localhost:3000/api/users');
+const users = await response.json();
+console.log(users);
+```
+
+### POST Request
+```javascript
+const response = await fetch('http://localhost:3000/api/todos', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ title: 'Nuovo todo', completed: false })
+});
+const newTodo = await response.json();
+```
+
+### DELETE Request
+```javascript
+const response = await fetch('http://localhost:3000/api/todos/1', {
+ method: 'DELETE'
+});
+```
+
+## ✅ Checklist Completamento
+
+- [ ] Ho avviato il server `npm start` nella cartella server-api
+- [ ] Ho letto il Tutorial
+- [ ] Ho completato l'Esercizio 1 (App Meteo)
+- [ ] Ho completato l'Esercizio 2 (Lista Utenti)
+- [ ] Ho completato l'Esercizio 3 (Todo App)
+
+## 💡 Suggerimenti
+
+1. **Leggi sempre il tutorial prima** di iniziare gli esercizi
+2. **Apri la console browser** (F12) per vedere i messaggi di errore
+3. **Utilizza network tab** in DevTools per vedere le richieste HTTP
+4. **Prova i comandi curl** nel terminale per testare gli endpoint
+5. **Inizia semplice:** completa prima le funzioni di base
+
+## 🐛 Troubleshooting
+
+**Errore: "Fetch failed"**
+- Controlla che il server sia avviato con `npm start`
+- Verifica che il URL sia corretto
+
+**Errore: "response.json() is not a function"**
+- Controlla che la risposta sia valida JSON
+- Vedi la console per il messaggio di errore esatto
+
+**Dati non visualizzati**
+- Controlla che il codice fetch sia implementato
+- Verifica che il DOM sia aggiornato correttamente
+- Usa `console.log()` per debuggare
+
+## 📚 Risorse Utili
+
+- [MDN - Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- [MDN - async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises)
+- [JSON Server GitHub](https://github.com/typicode/json-server)
+
+Buon lavoro! 🚀
diff --git a/JS_Esercizi 11 - API/index.html b/JS_Esercizi 11 - API/index.html
new file mode 100644
index 0000000..0b32b15
--- /dev/null
+++ b/JS_Esercizi 11 - API/index.html
@@ -0,0 +1,200 @@
+
+
+
+
+
+ ${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
+
+
+
diff --git a/JS_Esercizi 11 - API/tutorial/styles.css b/JS_Esercizi 11 - API/tutorial/styles.css
new file mode 100644
index 0000000..4c1c011
--- /dev/null
+++ b/JS_Esercizi 11 - API/tutorial/styles.css
@@ -0,0 +1,208 @@
+* {
+ 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: 900px;
+ margin: 0 auto;
+ background: white;
+ border-radius: 15px;
+ padding: 40px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+ color: #333;
+ margin-bottom: 10px;
+ text-align: center;
+ font-size: 2.5rem;
+}
+
+.subtitle {
+ text-align: center;
+ color: #666;
+ margin-bottom: 40px;
+ font-size: 1.1rem;
+}
+
+h2 {
+ color: #667eea;
+ margin-top: 40px;
+ margin-bottom: 20px;
+ border-bottom: 3px solid #667eea;
+ padding-bottom: 10px;
+ font-size: 1.8rem;
+}
+
+h3 {
+ color: #555;
+ margin-top: 25px;
+ margin-bottom: 15px;
+ font-size: 1.3rem;
+}
+
+p {
+ color: #666;
+ line-height: 1.8;
+ margin-bottom: 15px;
+ font-size: 1rem;
+}
+
+code {
+ background: #f5f5f5;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-family: 'Courier New', monospace;
+ color: #d63384;
+}
+
+.code-block {
+ background: #f5f5f5;
+ border-left: 4px solid #667eea;
+ padding: 15px;
+ margin: 20px 0;
+ border-radius: 5px;
+ overflow-x: auto;
+}
+
+.code-block code {
+ background: none;
+ padding: 0;
+ color: #333;
+ display: block;
+ font-size: 0.9rem;
+}
+
+.example-section {
+ background: #e3f2fd;
+ border-radius: 8px;
+ padding: 20px;
+ margin: 20px 0;
+ border-left: 5px solid #2196F3;
+}
+
+.example-section h4 {
+ color: #1565c0;
+ margin-bottom: 10px;
+}
+
+.endpoint-list {
+ background: #f9f9f9;
+ padding: 20px;
+ border-radius: 8px;
+ margin: 15px 0;
+}
+
+.endpoint-item {
+ margin: 15px 0;
+ padding: 15px;
+ background: white;
+ border-left: 4px solid #667eea;
+ border-radius: 4px;
+}
+
+.endpoint-item strong {
+ color: #667eea;
+ font-family: monospace;
+}
+
+ul, ol {
+ margin-left: 20px;
+ color: #666;
+ line-height: 1.8;
+}
+
+li {
+ margin: 10px 0;
+}
+
+.back-button {
+ display: inline-block;
+ margin-top: 30px;
+ padding: 12px 30px;
+ background: #667eea;
+ color: white;
+ text-decoration: none;
+ border-radius: 8px;
+ transition: all 0.3s;
+ font-weight: 600;
+}
+
+.back-button:hover {
+ background: #764ba2;
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.note {
+ background: #fff3cd;
+ border-left: 4px solid #ffc107;
+ padding: 15px;
+ border-radius: 4px;
+ margin: 15px 0;
+}
+
+.note strong {
+ color: #856404;
+}
+
+.success {
+ background: #d4edda;
+ border-left: 4px solid #28a745;
+ padding: 15px;
+ border-radius: 4px;
+ margin: 15px 0;
+}
+
+.success strong {
+ color: #155724;
+}
+
+.interactive-demo {
+ background: #f5f5f5;
+ padding: 20px;
+ border-radius: 8px;
+ margin: 20px 0;
+}
+
+.interactive-demo input,
+.interactive-demo button {
+ padding: 10px;
+ margin: 5px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 0.9rem;
+}
+
+.interactive-demo button {
+ background: #667eea;
+ color: white;
+ cursor: pointer;
+ border: none;
+ font-weight: 600;
+}
+
+.interactive-demo button:hover {
+ background: #764ba2;
+}
+
+.result {
+ background: white;
+ padding: 15px;
+ margin-top: 10px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ max-height: 200px;
+ overflow-y: auto;
+ font-size: 0.85rem;
+ font-family: monospace;
+}
diff --git a/javascript/JS_Esercizi 09 - Manipolazione Dati/tutorial/index.html b/javascript/JS_Esercizi 09 - Manipolazione Dati/tutorial/index.html
index 26e5f61..d6a43cb 100644
--- a/javascript/JS_Esercizi 09 - Manipolazione Dati/tutorial/index.html
+++ b/javascript/JS_Esercizi 09 - Manipolazione Dati/tutorial/index.html
@@ -12,6 +12,7 @@