From 2660c4f56ad4cf04651c114213c3ff860eeaf1d4 Mon Sep 17 00:00:00 2001 From: Berack96 Date: Thu, 5 Feb 2026 12:23:02 +0100 Subject: [PATCH] removed unnecessary files --- JS_Esercizi 11 - API/README.md | 166 ---------- JS_Esercizi 11 - API/index.html | 200 ------------ JS_Esercizi 11 - API/lista_utenti/index.html | 41 --- JS_Esercizi 11 - API/lista_utenti/script.js | 59 ---- JS_Esercizi 11 - API/lista_utenti/styles.css | 179 ----------- JS_Esercizi 11 - API/meteo/index.html | 45 --- JS_Esercizi 11 - API/meteo/script.js | 65 ---- JS_Esercizi 11 - API/meteo/styles.css | 185 ----------- JS_Esercizi 11 - API/todo_app/index.html | 66 ---- JS_Esercizi 11 - API/todo_app/script.js | 158 ---------- JS_Esercizi 11 - API/todo_app/styles.css | 316 ------------------- JS_Esercizi 11 - API/tutorial/index.html | 187 ----------- JS_Esercizi 11 - API/tutorial/styles.css | 208 ------------ 13 files changed, 1875 deletions(-) delete mode 100644 JS_Esercizi 11 - API/README.md delete mode 100644 JS_Esercizi 11 - API/index.html delete mode 100644 JS_Esercizi 11 - API/lista_utenti/index.html delete mode 100644 JS_Esercizi 11 - API/lista_utenti/script.js delete mode 100644 JS_Esercizi 11 - API/lista_utenti/styles.css delete mode 100644 JS_Esercizi 11 - API/meteo/index.html delete mode 100644 JS_Esercizi 11 - API/meteo/script.js delete mode 100644 JS_Esercizi 11 - API/meteo/styles.css delete mode 100644 JS_Esercizi 11 - API/todo_app/index.html delete mode 100644 JS_Esercizi 11 - API/todo_app/script.js delete mode 100644 JS_Esercizi 11 - API/todo_app/styles.css delete mode 100644 JS_Esercizi 11 - API/tutorial/index.html delete mode 100644 JS_Esercizi 11 - API/tutorial/styles.css diff --git a/JS_Esercizi 11 - API/README.md b/JS_Esercizi 11 - API/README.md deleted file mode 100644 index 7b65f45..0000000 --- a/JS_Esercizi 11 - API/README.md +++ /dev/null @@ -1,166 +0,0 @@ -# πŸ”Œ 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 deleted file mode 100644 index 0b32b15..0000000 --- a/JS_Esercizi 11 - API/index.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - - - - Hub Esercizi API - - - - - -
-

Esercizi API

-

Corso Web Developer

- -
- - -
πŸ§ͺ
-
-

TutorialTutorial

-

Impara a comunicare con le API REST e recuperare dati dal server.

-
-
β†’
- - - -
🌀️
-
-

App Meteo Base

-

Fetch API, GET request, manipolazione JSON.

-
-
β†’
- - - -
πŸ‘₯
-
-

Lista Utenti Intermedio

-

GET request, iterazione array, DOM manipulation.

-
-
β†’
- - - -
βœ“
-
-

Todo App Avanzato

-

POST, PUT, DELETE request, gestione dello stato.

-
-
β†’
- - -
-
- - - - diff --git a/JS_Esercizi 11 - API/lista_utenti/index.html b/JS_Esercizi 11 - API/lista_utenti/index.html deleted file mode 100644 index 9f84375..0000000 --- a/JS_Esercizi 11 - API/lista_utenti/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Lista Utenti - GET e DOM Manipulation - - - -
-

πŸ‘₯ Lista Utenti

-

Recupera e visualizza utenti dal server

- -
-

πŸ“ Obiettivo dell'Esercizio

-

Dovrai scrivere il codice JavaScript per:

-
    -
  1. Recuperare la lista di utenti da /api/users
    2. -
  2. Iterare attraverso l'array di utenti
    3. -
  3. Creare e inserire dinamicamente le card degli utenti nel DOM
    4. -
  4. Mostrare il numero totale di utenti
    5. -
-
- - - -
- -

Caricamento utenti...

-
- -
- -
- - ← Torna al Hub -
- - - - diff --git a/JS_Esercizi 11 - API/lista_utenti/script.js b/JS_Esercizi 11 - API/lista_utenti/script.js deleted file mode 100644 index 1ad019e..0000000 --- a/JS_Esercizi 11 - API/lista_utenti/script.js +++ /dev/null @@ -1,59 +0,0 @@ -// TODO: Completa questa funzione -async function fetchAndDisplayUsers() { - const loading = document.getElementById('loading'); - const container = document.getElementById('usersContainer'); - - // 1. Mostra il loading spinner - loading.style.display = 'block'; - container.innerHTML = ''; - - try { - // 2. Scrivi qui il fetch per ottenere gli utenti da: - // http://localhost:3000/api/users - // 3. Converti la risposta in JSON - // 4. Passa i dati alla funzione displayUsers() - - // SUGGERIMENTO: - // const response = await fetch('...'); - // const users = await response.json(); - // displayUsers(users); - - console.log('Scrivi il codice qui!'); - throw new Error('Codice non implementato'); - - } catch (error) { - console.error('Errore:', error); - container.innerHTML = ` -
- ❌ Errore: ${error.message} -
- `; - } finally { - loading.style.display = 'none'; - } -} - -// Funzione helper per visualizzare gli utenti -function displayUsers(users) { - const container = document.getElementById('usersContainer'); - - if (!Array.isArray(users) || users.length === 0) { - container.innerHTML = '
Nessun utente trovato
'; - return; - } - - // Crea le card per ogni utente - const cardsHTML = users.map(user => ` -
-

${user.name || 'Nome sconosciuto'}

-

πŸ“§ Email: ${user.email || 'N/A'}

-

πŸ“ž Telefono: ${user.phone || 'N/A'}

-

🌐 Website: ${user.website || 'N/A'}

-
- `).join(''); - - // Aggiungi il contatore di utenti - const counterHTML = `
πŸ“Š Totale: ${users.length} utenti
`; - - container.innerHTML = cardsHTML + counterHTML; -} diff --git a/JS_Esercizi 11 - API/lista_utenti/styles.css b/JS_Esercizi 11 - API/lista_utenti/styles.css deleted file mode 100644 index c0150fd..0000000 --- a/JS_Esercizi 11 - API/lista_utenti/styles.css +++ /dev/null @@ -1,179 +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: 800px; - 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; -} - -button { - width: 100%; - padding: 12px; - background: #667eea; - color: white; - border: none; - border-radius: 4px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: all 0.3s; - margin-bottom: 20px; -} - -button:hover { - background: #764ba2; - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); -} - -.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); } -} - -.users-container { - margin-top: 30px; -} - -.user-card { - background: #f9f9f9; - border-left: 4px solid #667eea; - padding: 15px; - margin-bottom: 15px; - border-radius: 4px; - transition: all 0.3s; -} - -.user-card:hover { - background: #f5f5f5; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.user-card h3 { - color: #333; - margin-bottom: 8px; - margin-top: 0; -} - -.user-card p { - color: #666; - margin: 5px 0; - font-size: 0.95rem; -} - -.user-card strong { - color: #667eea; -} - -.error { - background: #ffebee; - border-left-color: #f44336; - color: #c62828; - padding: 15px; - border-radius: 4px; - margin-top: 20px; -} - -.empty { - text-align: center; - color: #999; - padding: 40px 20px; -} - -.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; -} diff --git a/JS_Esercizi 11 - API/meteo/index.html b/JS_Esercizi 11 - API/meteo/index.html deleted file mode 100644 index 4512d4b..0000000 --- a/JS_Esercizi 11 - API/meteo/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - App Meteo - GET Request - - - -
-

🌀️ App Meteo

-

Impara a fare GET request con Fetch API

- -
-

πŸ“ Obiettivo dell'Esercizio

-

Dovrai scrivere il codice JavaScript per:

-
    -
  1. Recuperare una lista di dati meteo dal server usando fetch()
    2. -
  2. Visualizzare i dati ricevuti nella pagina
    3. -
  3. Gestire gli errori di rete
    4. -
-
- -
- - -
- - - -
- -

Caricamento dati...

-
- -
-
-
- - ← Torna al Hub -
- - - - diff --git a/JS_Esercizi 11 - API/meteo/script.js b/JS_Esercizi 11 - API/meteo/script.js deleted file mode 100644 index 9da78c9..0000000 --- a/JS_Esercizi 11 - API/meteo/script.js +++ /dev/null @@ -1,65 +0,0 @@ -// TODO: Completa questa funzione -async function fetchWeatherData() { - const loading = document.getElementById('loading'); - const result = document.getElementById('result'); - const weatherInfo = document.getElementById('weatherInfo'); - - // 1. Mostra il loading spinner - loading.style.display = 'block'; - result.classList.remove('show'); - - try { - // 2. Scrivi qui il fetch per ottenere i dati da: - // http://localhost:3000/api/weather - // 3. Converti la risposta in JSON - // 4. Mostra i dati nella pagina - - // SUGGERIMENTO: Usa la struttura vista nel tutorial - // const response = await fetch('...'); - // const data = await response.json(); - - console.log('Scrivi il codice qui!'); - throw new Error('Codice non implementato'); - - } catch (error) { - console.error('Errore:', error); - result.classList.add('show'); - weatherInfo.innerHTML = ` -
- ❌ Errore: ${error.message} -
- `; - } finally { - loading.style.display = 'none'; - } -} - -// Funzione helper per formattare la risposta -function displayWeatherData(data) { - const weatherInfo = document.getElementById('weatherInfo'); - const result = document.getElementById('result'); - - if (Array.isArray(data)) { - // Se Γ¨ un array - weatherInfo.innerHTML = data.map(item => ` -
-

${item.city || item.name || 'CittΓ  sconosciuta'}

-

🌑️ Temperatura: ${item.temperature || item.temp || 'N/A'}°C

-

πŸ’¨ UmiditΓ : ${item.humidity || 'N/A'}%

-

☁️ Condizioni: ${item.condition || item.description || 'N/A'}

-
- `).join(''); - } else { - // Se Γ¨ un singolo oggetto - weatherInfo.innerHTML = ` -
-

${data.city || data.name || 'CittΓ  sconosciuta'}

-

🌑️ Temperatura: ${data.temperature || data.temp || 'N/A'}°C

-

πŸ’¨ UmiditΓ : ${data.humidity || 'N/A'}%

-

☁️ Condizioni: ${data.condition || data.description || 'N/A'}

-
- `; - } - - result.classList.add('show'); -} diff --git a/JS_Esercizi 11 - API/meteo/styles.css b/JS_Esercizi 11 - API/meteo/styles.css deleted file mode 100644 index d7c3264..0000000 --- a/JS_Esercizi 11 - API/meteo/styles.css +++ /dev/null @@ -1,185 +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: 600px; - 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; -} - -.input-group { - margin-bottom: 20px; -} - -label { - display: block; - color: #333; - font-weight: 600; - margin-bottom: 8px; -} - -input { - width: 100%; - padding: 10px; - border: 2px solid #ddd; - border-radius: 4px; - font-size: 1rem; - transition: border-color 0.3s; -} - -input:focus { - outline: none; - border-color: #667eea; -} - -button { - width: 100%; - padding: 12px; - background: #667eea; - color: white; - border: none; - border-radius: 4px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: all 0.3s; -} - -button:hover { - background: #764ba2; - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); -} - -.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); } -} - -.result { - margin-top: 30px; - padding: 20px; - background: #f5f5f5; - border-radius: 8px; - display: none; -} - -.result.show { - display: block; -} - -.weather-info { - text-align: center; -} - -.weather-info h2 { - color: #333; - margin-bottom: 15px; -} - -.weather-detail { - background: white; - padding: 10px; - margin: 10px 0; - border-radius: 4px; - border-left: 4px solid #667eea; -} - -.error { - background: #ffebee; - border-left-color: #f44336; - color: #c62828; -} - -.success { - background: #e8f5e9; - border-left-color: #4caf50; - color: #2e7d32; -} - -.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; -} diff --git a/JS_Esercizi 11 - API/todo_app/index.html b/JS_Esercizi 11 - API/todo_app/index.html deleted file mode 100644 index 6ddafea..0000000 --- a/JS_Esercizi 11 - API/todo_app/index.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - Todo App - CRUD Operations - - - -
-

βœ“ Todo App

-

Operazioni CRUD (Create, Read, Update, Delete)

- -
-

πŸ“ Obiettivo dell'Esercizio

-

Dovrai implementare un'app TODO con tutte le operazioni CRUD:

-
    -
  1. Ricerca: Seleziona un utente dalla barra di ricerca
    2. -
  2. CREATE: Aggiungi nuovi todo per l'utente selezionato
    3. -
  3. READ: Visualizza i todo dell'utente
    4. -
  4. UPDATE: Segna come completato
    5. -
  5. DELETE: Elimina todo
    6. -
-
- - -
-

πŸ‘€ Seleziona Utente

-
- -
-
-
Nessun utente selezionato
-
- - -
- - -
- -
- -

Caricamento...

-
- -
- -
- - ← Torna al Hub -
- - - - \ No newline at end of file diff --git a/JS_Esercizi 11 - API/todo_app/script.js b/JS_Esercizi 11 - API/todo_app/script.js deleted file mode 100644 index 46c1b1a..0000000 --- a/JS_Esercizi 11 - API/todo_app/script.js +++ /dev/null @@ -1,158 +0,0 @@ -let currentUserId = null; - -// 1. Funzione che crea un todo (oggetto) -function createTodo(id, title, completato) { - return { id, title, completato }; -} - -// 2. Carica tutti i todos di un particolare utente -async function loadUserTodos(userId) { - const loading = document.getElementById('loading'); - const container = document.getElementById('todosContainer'); - - loading.style.display = 'block'; - container.innerHTML = ''; - - try { - const response = await fetch(`http://localhost:3000/api/todos?userId=${userId}`); - const todos = await response.json(); - displayTodos(todos); - } catch (error) { - container.innerHTML = `
❌ ${error.message}
`; - } finally { - loading.style.display = 'none'; - } -} - -// 3. Aggiungi un todo -async function addTodo() { - if (!currentUserId) { - alert('Seleziona un utente prima!'); - return; - } - - const input = document.getElementById('todoInput'); - const title = input.value.trim(); - - if (!title) { - alert('Inserisci un todo!'); - return; - } - - try { - const response = await fetch('http://localhost:3000/api/todos', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ userId: currentUserId, title, completato: false }) - }); - input.value = ''; - loadUserTodos(currentUserId); - } catch (error) { - alert('Errore: ' + error.message); - } -} - -// 4. Toggle completato -async function toggleTodo(id, currentCompleted) { - try { - const response = await fetch(`http://localhost:3000/api/todos/${id}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ completato: !currentCompleted }) - }); - loadUserTodos(currentUserId); - } catch (error) { - alert('Errore: ' + error.message); - } -} - -// 5. Rimuovi un todo -async function deleteTodo(id) { - if (!confirm('Sei sicuro di voler eliminare?')) { - return; - } - - try { - const response = await fetch(`http://localhost:3000/api/todos/${id}`, { - method: 'DELETE' - }); - loadUserTodos(currentUserId); - } catch (error) { - alert('Errore: ' + error.message); - } -} - -// Visualizza i todos -function displayTodos(todos) { - const container = document.getElementById('todosContainer'); - - if (!Array.isArray(todos) || todos.length === 0) { - container.innerHTML = '
Nessun todo
'; - return; - } - - const todosHTML = todos.map(todo => ` -
-
-
${todo.title}
-
ID: ${todo.id}
-
-
- - -
-
- `).join(''); - - container.innerHTML = todosHTML; -} - -// Carica gli utenti nella ricerca -async function loadUsers() { - try { - const response = await fetch('http://localhost:3000/api/users'); - const users = await response.json(); - - const searchInput = document.getElementById('userSearch'); - const suggestionsContainer = document.getElementById('suggestions'); - - // Filtra gli utenti mentre digiti - searchInput.addEventListener('input', (e) => { - const searchTerm = e.target.value.toLowerCase(); - - if (searchTerm.length === 0) { - suggestionsContainer.innerHTML = ''; - return; - } - - const filtered = users.filter(user => - user.nome.toLowerCase().includes(searchTerm) || - user.cognome.toLowerCase().includes(searchTerm) - ); - - suggestionsContainer.innerHTML = filtered.map(user => ` -
- ${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 - - - -
-

πŸ“‘ 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:

-
    -
  1. fetch(url) - Invia la richiesta al server
    2. -
  2. .then(response => response.json()) - Converte la risposta in JSON
    3. -
  3. .then(data => ...) - Ricevi e usa i dati
    4. -
  4. .catch(error => ...) - Gestisci gli errori
    5. -
- -

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 deleted file mode 100644 index 4c1c011..0000000 --- a/JS_Esercizi 11 - API/tutorial/styles.css +++ /dev/null @@ -1,208 +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: 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; -}