Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

fix es 12 .1 & .2

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-11 21:41:02 +01:00
parent 60a1748f64
commit b6b1898c05
4 changed files with 64 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
javascript/JS_Esercizi 11 - API/01_get_singolo_utente/script.js
View File

@@ -1,17 +1,16 @@
// ⚠️ COMPILARE PRIMA DI INIZIARE
// Inserisci l'URL del server corretto
// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
const BASE_URL = 'http://192.168.1.7:3000/api';
// ELEMENTI DEL DOM (controlla che siano corretti)
const userId = document.querySelector('#userId');
const loading = document.querySelector('#loading');
const result = document.querySelector('#result');
const btnFetch = document.querySelector('#btnFetch');
/**
* FUNZIONE: Crea utente card
*
* Crea la card completa dell'utente e la inserisce nell'elemento result
* Funzione già fatta - non modificare
* L'oggetto user ha questa struttura:
* {
* id: number,
@@ -24,7 +23,7 @@ const result = document.querySelector('#result');
* attivo: boolean
* }
*/
function createUserCard(user) {
function creaCardUtente(user) {
result.innerHTML = `
<div class="user-card">
<div class="card-header">
@@ -57,19 +56,15 @@ function createUserCard(user) {
*
* Mostra un messaggio di errore nell'elemento result
* e logga l'errore in console (per debug)
* Funzione già fatta - non modificare
*/
function handleError(message) {
result.innerHTML = '';
let div = document.createElement('div');
div.className = 'error';
let strong = document.createElement('strong');
strong.textContent = `❌ ${message}`;
div.appendChild(strong);
result.appendChild(div);
console.error('Errore:', message);
result.innerHTML = `
<div class="error">
<strong>❌ ${message}</strong>
</div>
`;
}
@@ -92,11 +87,11 @@ function handleError(message) {
* 8. Nascondi lo spinner di caricamento (aggiungi la classe nascosto)
*/
async function fetchUser() {
// PLACEHOLDER - Rimuovi questa riga quando completi
// TODO Rimuovi questa riga e completa la funzione
handleError('Codice non implementato - Completa la funzione fetchUser()');
}
// COLLEGA IL BOTTONE AL CLICK
document.getElementById('btnFetch').addEventListener('click', fetchUser);
btnFetch.addEventListener('click', fetchUser);

20
javascript/JS_Esercizi 11 - API/02_get_lista_utenti/index.html
View File

@@ -19,7 +19,7 @@
</div>
<!-- LOADING SPINNER -->
<div id="loading" class="loading" style="display: none;">
<div id="loading" class="loading nascosto">
⏳ Caricamento...
</div>
@@ -27,22 +27,10 @@
<div id="counter" style="display: none; text-align: center; color: #666; margin-bottom: 20px; font-weight: bold;"></div>
<!-- GRIGLIA UTENTI -->
<div id="usersContainer" class="users-grid"></div>
<div id="users-container" class="users-grid"></div>
<!-- ISTRUZIONI -->
<div class="instructions-box" style="margin-top: 30px;">
<h2>📝 Istruzioni</h2>
<ol>
<li>Apri <code>script.js</code> e completa <code>fetchAllUsers()</code></li>
<li>Compila <code>BASE_URL</code></li>
<li>GET a <code>/users</code> e usa <code>map()</code> per creare card</li>
</ol>
<div class="hint">
<strong>💡 Suggerimento:</strong>
<pre>const html = users.map(user => `&lt;div&gt;...&lt;/div&gt;`).join('');</pre>
</div>
</div>
<!-- RISULTATO -->
<div id="result" class=""></div>
</div>
<script src="script.js"></script>

101
javascript/JS_Esercizi 11 - API/02_get_lista_utenti/script.js
View File

@@ -1,5 +1,9 @@
// ⚠️ COMPILARE PRIMA DI INIZIARE
// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
const BASE_URL = 'http://localhost:3000/api';
const loading = document.querySelector('#loading');
const counter = document.querySelector('#counter');
const result = document.querySelector('#result');
const btnFetch = document.querySelector('#btnLoadUsers');
/**
@@ -19,80 +23,63 @@ const BASE_URL = 'http://localhost:3000/api';
* </div>
* </div>
*/
function creaCardUser(user) {
function creaCardUtente(user) {
return ``;
}
/**
* FUNZIONE: Gestione errori
*
* Mostra un messaggio di errore nell'elemento result
* e logga l'errore in console (per debug)
* Funzione già fatta - non modificare
*/
function handleError(message) {
result.innerHTML = '';
let div = document.createElement('div');
div.className = 'error';
let strong = document.createElement('strong');
strong.textContent = `❌ ${message}`;
div.appendChild(strong);
result.appendChild(div);
console.error('Errore:', message);
}
/**
* ESERCIZIO 2: Recupera TUTTI gli utenti
* FUNZIONE: Fetch lista utenti
*
* Devi completare questa funzione:
* 1. Fai una fetch GET a: BASE_URL + '/users'
* 2. Converti in JSON
* 3. Chiama displayUsers() passando l'array
* 4. Gestisci gli errori
* Passi:
* 1. Mostra lo spinner di caricamento (rimuovi la classe nascosto)
* 2. Fai una fetch GET a /users
* 3. Se la risposta non è OK, usa handleError() per mostrare un messaggio e return
* 4. Converti la risposta da stringa JSON a oggetto JavaScript
* 5. Mostra i dati degli utenti chiamando mostraUtenti(users)
* 6. Nascondi lo spinner di caricamento (aggiungi la classe nascosto)
*/
async function fetchAllUsers() {
const loading = document.getElementById('loading');
const container = document.getElementById('usersContainer');
const counter = document.getElementById('counter');
loading.style.display = 'block';
container.innerHTML = '';
counter.style.display = 'none';
try {
// 👇 SCRIVI QUI IL TUO CODICE 👇
// const response = await fetch(...);
// const users = await response.json();
// displayUsers(users);
// PLACEHOLDER - Rimuovi questa riga quando completi
throw new Error('Codice non implementato - Completa la funzione fetchAllUsers()');
} catch (error) {
container.innerHTML = `
<div class="error">
<strong>❌ Errore:</strong> ${error.message}
</div>
`;
console.error('Errore:', error);
} finally {
loading.style.display = 'none';
}
// TODO Rimuovi questa riga e completa la funzione
handleError('Codice non implementato - Completa la funzione fetchAllUsers()');
}
/**
* Visualizza gli utenti in una griglia di card
* (Questa funzione è già fatta - non modificare)
* Funzione già fatta - non modificare
*/
function displayUsers(users) {
const container = document.getElementById('usersContainer');
const counter = document.getElementById('counter');
function mostraUtenti(users) {
if (!Array.isArray(users) || users.length === 0) {
container.innerHTML = '<div class="error">❌ Nessun utente trovato</div>';
handleError('Nessun utente trovato');
return;
}
// CREA CARD PER OGNI UTENTE
const cardsHTML = users.map(user => `
<div class="user-card">
<img src="${user.avatar || 'https://placehold.co/100'}" alt="Avatar" class="card-avatar">
<div class="card-content">
<h3>${user.nome} ${user.cognome}</h3>
<p class="email">📧 ${user.email}</p>
<p class="location">📍 ${user.comune}</p>
<div class="status ${user.attivo ? 'attivo' : 'inattivo'}">
${user.attivo ? '🟢 Attivo' : '🔴 Inattivo'}
</div>
</div>
</div>
`).join('');
container.innerHTML = cardsHTML;
const cardsHTML = users.map(user => creaCardUtente(user)).join('');
result.innerHTML = cardsHTML;
// MOSTRA CONTATORE
counter.innerHTML = `📊 Totale: <strong>${users.length} utenti</strong>`;
@@ -100,4 +87,4 @@ function displayUsers(users) {
}
// COLLEGA IL BOTTONE
document.getElementById('btnLoadUsers').addEventListener('click', fetchAllUsers);
btnFetch.addEventListener('click', fetchAllUsers);

4
javascript/JS_Esercizi 11 - API/02_get_lista_utenti/style.css
View File

@@ -187,3 +187,7 @@ h1 {
color: #333;
margin: 0;
}
.nascosto {
display: none;
}