- ${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
deleted file mode 100644
index 7852413..0000000
--- a/JS_Esercizi 11 - API/todo_app/styles.css
+++ /dev/null
@@ -1,316 +0,0 @@
-* {
- 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
deleted file mode 100644
index ec4c73c..0000000
--- a/JS_Esercizi 11 - API/tutorial/index.html
+++ /dev/null
@@ -1,187 +0,0 @@
-
-
-
-
-
π‘ 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
-