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

update 11.*

Browse Source 
added new es.
moved all the others
fixed some problems
added db entries
This commit is contained in:
Giacomo Bertolazzi
2026-02-11 22:58:42 +01:00
parent ed35f3cfd7
commit 1e3ff291ce
14 changed files with 802 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
javascript/JS_Esercizi 11 - API/04_ricerca_post/index.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esercizio 4 - Ricerca Post</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold;">← Dashboard</a>
<div class="app-container">
<h1>🔍 Ricerca Post</h1>
<p class="subtitle">Fetch multipli con filtri incrociati</p>
<!-- SEZIONE CONFIGURAZIONE -->
<div class="config-box">
<label for="keyword">Ricerca per parola chiave:</label>
<div class="input-group">
<input type="text" id="keyword" placeholder="Es: JavaScript, CSS, React...">
<button id="btnSearch">Cerca</button>
</div>
</div>
<!-- LOADING -->
<div id="loading" class="loading nascosto">
⏳ Caricamento...
</div>
<!-- RISULTATI -->
<div id="resultsContainer" class="results-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>

115
javascript/JS_Esercizi 11 - API/04_ricerca_post/script.js Normal file
View File

@@ -0,0 +1,115 @@
// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
const BASE_URL = 'http://localhost:3000/api';
const keyword = document.querySelector('#keyword');
const loading = document.querySelector('#loading');
const resultsContainer = document.querySelector('#resultsContainer');
const btnSearch = document.querySelector('#btnSearch');
/**
* FUNZIONE: Crea la card HTML per un autore e i suoi post trovati
*
* Funzione già fatta - non modificare
*/
function createAuthorCard(author, posts) {
const postsHTML = posts.map(post => `
<div class="post-item">
<div class="post-title">${post.titolo}</div>
<div class="post-preview">${post.contenuto}</div>
<div class="post-meta">
<span>📅 ${post.data}</span>
<span>❤️ ${post.likes} likes</span>
</div>
</div>
`).join('');
return `
<div class="author-section">
<div class="author-header">
<img src="${author.avatar}" alt="Avatar" class="author-avatar">
<div class="author-info">
<h3>${author.nome} ${author.cognome}</h3>
<p>📧 ${author.email}</p>
</div>
</div>
<div class="posts-list">
<div style="font-weight: 600; margin-bottom: 10px; color: #333;">
Post trovati (${posts.length})
</div>
${postsHTML}
</div>
</div>
`;
}
/**
* FUNZIONE: Gestione errori
*
* Mostra un messaggio di errore e logga in console
* Funzione già fatta - non modificare
*/
function handleError(message) {
resultsContainer.innerHTML = `
<div class="error">
<strong>❌ ${message}</strong>
</div>
`;
console.error('Errore:', message);
}
/**
* FUNZIONE: Visualizza i risultati della ricerca
*
* Raggruppa i post per autore e mostra le card
* Funzione già fatta - non modificare
*/
function displayResults(results) {
if (results.length === 0) {
resultsContainer.innerHTML = `
<div class="empty">
Nessun post trovato con la parola chiave
</div>
`;
return;
}
const cardsHTML = results.map(item =>
createAuthorCard(item.author, item.posts)
).join('');
resultsContainer.innerHTML = cardsHTML;
}
/**
* ESERCIZIO 5: Ricerca Post con Autori
*
* Devi completare questa funzione:
* 1. Leggi la parola chiave dall'input
* 2. Valida che non sia vuota (usa trim)
* 3. Mostra lo spinner di caricamento
* 4. Apri un blocco try/catch
* 5. Fai una GET a /posts
* 6. Filtra i post dove titolo O contenuto contiene la keyword (case-insensitive)
* 7. Se nessun post trovato, usa handleError() e return
* 8. Estrai gli ID univoci degli utenti che hanno scritto questi post
* 9. Fai una GET a /users
* 10. Crea un array di risultati: [{author: userObj, posts: [...]}, ...]
* dove posts sono solo quelli trovati per quell'autore
* 11. Chiama displayResults(results)
* 12. Gestisci gli errori con handleError()
* 13. Nascondi lo spinner di caricamento
*/
async function fetchPostsByKeyword() {
}
// COLLEGA IL BOTTONE
btnSearch.addEventListener('click', fetchPostsByKeyword);
// PERMETTI ENTER
keyword.addEventListener('keypress', (e) => {
if (e.key === 'Enter') fetchPostsByKeyword();
});

207
javascript/JS_Esercizi 11 - API/04_ricerca_post/style.css Normal file
View File

@@ -0,0 +1,207 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.app-container {
background: white;
width: 100%;
max-width: 700px;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
h1 {
color: #333;
text-align: center;
margin: 0 0 10px 0;
font-size: 1.8rem;
}
.subtitle {
color: #666;
text-align: center;
margin: 0 0 30px 0;
font-size: 1rem;
}
.config-box {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
}
.config-box label {
display: block;
color: #333;
font-weight: 600;
margin-bottom: 12px;
}
.input-group {
display: flex;
gap: 10px;
}
.input-group input,
.input-group button {
padding: 12px 15px;
border-radius: 6px;
border: 1px solid #ddd;
font-size: 1rem;
}
.input-group input {
flex: 1;
border-color: #ddd;
}
.input-group input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}
.input-group button {
background: #007bff;
color: white;
border: none;
font-weight: bold;
cursor: pointer;
padding: 12px 25px;
}
.input-group button:hover {
background: #0056b3;
}
.loading {
text-align: center;
color: #666;
font-size: 1rem;
padding: 30px;
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.results-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.author-section {
background: #f9f9f9;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.author-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
}
.author-info h3 {
margin: 0 0 5px 0;
font-size: 1.2rem;
}
.author-info p {
margin: 0;
font-size: 0.9rem;
opacity: 0.9;
}
.posts-list {
padding: 15px;
}
.post-item {
background: white;
padding: 12px;
margin-bottom: 10px;
border-radius: 6px;
border-left: 3px solid #667eea;
}
.post-item:last-child {
margin-bottom: 0;
}
.post-title {
font-weight: 600;
color: #333;
margin: 0 0 5px 0;
}
.post-preview {
color: #666;
font-size: 0.9rem;
margin: 0 0 8px 0;
line-height: 1.4;
}
.post-meta {
display: flex;
gap: 15px;
font-size: 0.8rem;
color: #999;
}
.empty {
text-align: center;
color: #999;
padding: 40px 20px;
font-size: 1.1rem;
}
.error {
background: #fee;
color: #c00;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #c00;
font-weight: 500;
}
.nascosto {
display: none;
}

0
javascript/JS_Esercizi 11 - API/04_todo_app_crud/index.html → javascript/JS_Esercizi 11 - API/05_todo_app_crud/index.html
View File

0
javascript/JS_Esercizi 11 - API/04_todo_app_crud/script.js → javascript/JS_Esercizi 11 - API/05_todo_app_crud/script.js
View File

0
javascript/JS_Esercizi 11 - API/04_todo_app_crud/style.css → javascript/JS_Esercizi 11 - API/05_todo_app_crud/style.css
View File

2
javascript/JS_Esercizi 11 - API/05_meteo/index.html → javascript/JS_Esercizi 11 - API/extra_meteo/index.html
View File

@@ -26,7 +26,7 @@
</div> </div>
<!-- LOADING --> <!-- LOADING -->
<div id="loading" class="loading" style="display: none;"> <div id="loading" class="loading nascosto">
⏳ Caricamento meteo... ⏳ Caricamento meteo...
</div> </div>

94
javascript/JS_Esercizi 11 - API/05_meteo/script.js → javascript/JS_Esercizi 11 - API/extra_meteo/script.js
View File

@@ -7,55 +7,101 @@
* API Base: https://api.open-meteo.com/v1/forecast * API Base: https://api.open-meteo.com/v1/forecast
*/ */
// ===== VARIABILI DEL DOM =====
const latitude = document.getElementById('latitude');
const longitude = document.getElementById('longitude');
const btnSearch = document.getElementById('btnSearch');
const loading = document.getElementById('loading');
const weatherContainer = document.getElementById('weatherContainer');
/** /**
* Ricerca il meteo per latitudine e longitudine * FUNZIONE: Gestione errori
* *
* Parametri obbligatori: * Mostra un messaggio di errore e logga in console
*/
function handleError(message) {
weatherContainer.innerHTML = `
<div class="error">
<strong>❌ ${message}</strong>
</div>
`;
console.error('Errore:', message);
}
/**
* FUNZIONE: Ricerca il meteo per latitudine e longitudine
*
* Parametri obbligatori dell'API:
* - latitude: numero decimale * - latitude: numero decimale
* - longitude: numero decimale * - longitude: numero decimale
* - current: variabili da ottenere (separati da virgola) * - current: variabili da ottenere (separati da virgola)
* - timezone: 'auto' oppure fuso orario specifico * - timezone: 'auto' oppure fuso orario specifico
*
* Passi:
* 1. Leggi latitudine e longitudine dagli input
* 2. Valida che siano compilati
* 3. Mostra lo spinner di caricamento
* 4. Costruisci l'URL con i parametri corretti
* 5. Fai una GET a https://api.open-meteo.com/v1/forecast
* 6. Se non OK, mostra errore e return
* 7. Converti in JSON
* 8. Estrai data.current
* 9. Chiama displayWeather() per visualizzare
* 10. Nascondi lo spinner
*/ */
async function searchWeather() { async function searchWeather() {
const latitude = document.getElementById('latitude').value; const lat = latitude.value;
const longitude = document.getElementById('longitude').value; const lon = longitude.value;
const loading = document.getElementById('loading');
const container = document.getElementById('weatherContainer');
// VALIDAZIONE // VALIDAZIONE
if (!latitude || !longitude) { if (!lat || !lon) {
container.innerHTML = '<div class="error">❌ Inserisci latitudine e longitudine</div>'; handleError('Inserisci latitudine e longitudine');
return; return;
} }
loading.style.display = 'block'; loading.classList.remove('nascosto');
container.innerHTML = ''; weatherContainer.innerHTML = '';
try { try {
// 👇 SCRIVI QUI IL TUO CODICE 👇 // 👇 SCRIVI QUI IL TUO CODICE 👇
// Costruisci l'URL con i parametri corretti: // 1. Costruisci l'URL con i parametri corretti:
// const url = 'https://api.open-meteo.com/v1/forecast?latitude=' + ... // const url = 'https://api.open-meteo.com/v1/forecast' +
// '?latitude=' + lat +
// '&longitude=' + lon +
// '&current=temperature_2m,relative_humidity_2m,weather_code' +
// '&timezone=auto';
// 2. Fai la fetch
// const response = await fetch(url); // const response = await fetch(url);
// 3. Se non OK, mostra errore e return
// if (!response.ok) {
// throw new Error('Errore nel caricamento dei dati meteo');
// }
// 4. Converti in JSON
// const data = await response.json(); // const data = await response.json();
// displayWeather(data.current, latitude, longitude);
// 5. Estrai i dati meteo e visualizza
// displayWeather(data.current, lat, lon);
throw new Error('Codice non implementato - Completa searchWeather()'); throw new Error('Codice non implementato - Completa searchWeather()');
} catch (error) { } catch (error) {
container.innerHTML = `<div class="error">❌ ${error.message}</div>`; handleError(error.message);
console.error('Errore:', error);
} finally { } finally {
loading.style.display = 'none'; loading.classList.add('nascosto');
} }
} }
/** /**
* Visualizza i dati meteo * FUNZIONE: Visualizza i dati meteo
* (Questa funzione è già fatta) * (Questa funzione è già fatta - non modificare)
*/ */
function displayWeather(current, lat, lon) { function displayWeather(current, lat, lon) {
const container = document.getElementById('weatherContainer');
// Converti codice meteo in descrizione // Converti codice meteo in descrizione
const weatherDescriptions = { const weatherDescriptions = {
@@ -95,17 +141,17 @@ function displayWeather(current, lat, lon) {
</div> </div>
`; `;
container.innerHTML = html; weatherContainer.innerHTML = html;
} }
// COLLEGA IL BOTTONE // ===== COLLEGA GLI EVENTI =====
document.getElementById('btnSearch').addEventListener('click', searchWeather); btnSearch.addEventListener('click', searchWeather);
// PERMETTI ENTER // PERMETTI ENTER
document.getElementById('latitude').addEventListener('keypress', (e) => { latitude.addEventListener('keypress', (e) => {
if (e.key === 'Enter') searchWeather(); if (e.key === 'Enter') searchWeather();
}); });
document.getElementById('longitude').addEventListener('keypress', (e) => { longitude.addEventListener('keypress', (e) => {
if (e.key === 'Enter') searchWeather(); if (e.key === 'Enter') searchWeather();
}); });

127
javascript/JS_Esercizi 11 - API/05_meteo/style.css → javascript/JS_Esercizi 11 - API/extra_meteo/style.css
View File

@@ -40,30 +40,39 @@ h1 {
margin-bottom: 25px; margin-bottom: 25px;
} }
.search-box h2 {
color: #333;
margin: 0 0 15px 0;
font-size: 1.1rem;
}
.search-box label { .search-box label {
display: block; display: block;
color: #555; color: #555;
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 0.95rem;
} }
.coord-group { .coord-group {
display: flex; display: flex;
gap: 10px; gap: 10px;
margin-bottom: 10px;
} }
.coord-group input { .coord-group input {
flex: 1; flex: 1;
padding: 12px; padding: 10px;
border: 2p0px;
border: 2px solid #ddd; border: 2px solid #ddd;
border-radius: 6px; border-radius: 6px;
font-size: 15px; font-size: 15px;
font-family: inherit;
} }
.coord-group input:focus { .coord-group input:focus {
outline: none; outline: none;
border-color: #007bff; border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
} }
.coord-group button { .coord-group button {
@@ -74,23 +83,25 @@ h1 {
border-radius: 6px; border-radius: 6px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
white-space: nowrap; transition: background 0.2s;
} }
.coord-group button:hover { .coord-group button:hover {
background: #0056b3 background: #0056b3;
}
.hint-text { .hint-text {
color: #666; color: #666;
font-size: 0.9em; font-size: 0.9rem;
margin-top: 185rpx; margin-top: 10px;
} }
.loading { .loading {
text-align: center; text-align: center;
color: white; color: #666;
font-si#666; font-size: 1rem;
padding: 3 pulse 1s infinite; padding: 30px;
animation: pulse 1s infinite;
} }
@keyframes pulse { @keyframes pulse {
@@ -100,7 +111,6 @@ h1 {
.weather-container { .weather-container {
margin-bottom: 50px; margin-bottom: 50px;
}30px;
} }
.weather-card { .weather-card {
@@ -108,25 +118,14 @@ h1 {
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
animation: slideIn 0.3s ease-out;
}
.location { .location {
text-align: center; text-align: center;
color: #666; color: #666;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 0.95em; font-size: 0.95rem;
}
.weather-main {
text-align: center;
margin: 30px 0;
}
.emoji {
font-size: 4em;
color: #666;
margin-bottom: 20px;
font-size: 0.9rem;
text-align: center;
} }
.weather-main { .weather-main {
@@ -135,12 +134,12 @@ h1 {
} }
.emoji { .emoji {
font-size: 3.5em; font-size: 3.5rem;
margin-bottom: 10px; margin-bottom: 10px;
} }
.temp { .temp {
font-size: 2.2em; font-size: 2.2rem;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
@@ -149,28 +148,25 @@ h1 {
background: white; background: white;
padding: 15px; padding: 15px;
border-radius: 6px; border-radius: 6px;
border-left: 4px solid #007bff; margin-top: 15px;
} }
.weather-details p { .weather-details p {
margin: 8px 0;
color: #555; color: #555;
margin: 10px 0; font-size: 0.95rem;
line-height: 1.5 rgba(255, 255, 255, 0.95);
padding: 25px;
border-radius: 12px;
margin-top: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
} }
.instructions h2 { .error {
color: #333; background: #fee;
margin-bottom: 20px; color: #c00;
font-size15px; padding: 15px;
border-radius: 6px; border-radius: 6px;
border-left: 4px solid #c border-left: 4px solid #c00;
margin-left: 25px; font-weight: 500;
color: #555; }
line-heig-box {
.instructions {
background: #f9f9f9; background: #f9f9f9;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
@@ -178,29 +174,30 @@ h1 {
margin-top: 30px; margin-top: 30px;
} }
.instructions-box h2 { .instructions h2 {
color: #333; color: #333;
margin: 0 0 15px 0; margin: 0 0 15px 0;
font-size: 1.1rem; font-size: 1.1rem;
} }
.instructions-box ol, .instructions-box ul { .instructions ol,
.instructions ul {
margin-left: 20px; margin-left: 20px;
color: #555; color: #555;
line-height: 1.7; line-height: 1.7;
} }
.instructions-box li { .instructions li {
margin-bottom: 8px; margin-bottom: 8px;
} }
.instructions-box code { .instructions code {
background: white; background: white;
padding: 2px 5px; padding: 2px 5px;
border-radius: 3px; border-radius: 3px;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
color: #d63384; color: #d63384;
font-size: 0.9em; font-size: 0.9rem;
} }
.hint { .hint {
@@ -222,7 +219,41 @@ h1 {
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
overflow-x: auto; overflow-x: auto;
font-size: 0.8em; font-size: 0.85rem;
color: #333; color: #333;
margin: 0; margin: 0;
word-break: break-all }
.challenge {
background: white;
border: 1px solid #ddd;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
}
.challenge strong {
color: #28a745;
display: block;
margin-bottom: 10px;
}
.challenge p {
margin: 0;
color: #555;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nascosto {
display: none;
}

2
javascript/JS_Esercizi 11 - API/06_pokedex/index.html → javascript/JS_Esercizi 11 - API/extra_pokedex/index.html
View File

@@ -25,7 +25,7 @@
</div> </div>
<!-- LOADING --> <!-- LOADING -->
<div id="loading" class="loading" style="display: none;"> <div id="loading" class="loading nascosto">
⏳ Cercando Pokémon... ⏳ Cercando Pokémon...
</div> </div>

71
javascript/JS_Esercizi 11 - API/06_pokedex/script.js → javascript/JS_Esercizi 11 - API/extra_pokedex/script.js
View File

@@ -7,60 +7,89 @@
* API Base: https://pokeapi.co/api/v2/ * API Base: https://pokeapi.co/api/v2/
*/ */
// ===== VARIABILI DEL DOM =====
const pokemonInput = document.getElementById('pokemonInput');
const btnSearch = document.getElementById('btnSearch');
const loading = document.getElementById('loading');
const pokemonContainer = document.getElementById('pokemonContainer');
/** /**
* Ricerca un Pokémon per nome o numero * FUNZIONE: Gestione errori
*
* Mostra un messaggio di errore e logga in console
*/
function handleError(message) {
pokemonContainer.innerHTML = `
<div class="error">
<strong>❌ ${message}</strong>
</div>
`;
console.error('Errore:', message);
}
/**
* FUNZIONE: Ricerca un Pokémon per nome o numero
* *
* Parametri: * Parametri:
* - Accetta nome (in minuscolo) o numero ID * - Accetta nome (in minuscolo) o numero ID
* - Ritorna oggetto con tutte le info del Pokémon * - Ritorna oggetto con tutte le info del Pokémon
*
* Passi:
* 1. Leggi il valore dall'input
* 2. Converti a minuscolo e trim()
* 3. Valida che non sia vuoto
* 4. Mostra lo spinner di caricamento
* 5. Fai una GET a https://pokeapi.co/api/v2/pokemon/{input}
* 6. Se la risposta non è OK (404), mostra "Pokémon non trovato" e return
* 7. Converti in JSON
* 8. Chiama displayPokemon() per visualizzare
* 9. Nascondi lo spinner
*/ */
async function searchPokemon() { async function searchPokemon() {
const input = document.getElementById('pokemonInput').value.trim().toLowerCase(); const input = pokemonInput.value.trim().toLowerCase();
const loading = document.getElementById('loading');
const container = document.getElementById('pokemonContainer');
// VALIDAZIONE // VALIDAZIONE
if (!input) { if (!input) {
container.innerHTML = '<div class="error">❌ Inserisci il nome o numero di un Pokémon</div>'; handleError('Inserisci il nome o numero di un Pokémon');
return; return;
} }
loading.style.display = 'block'; loading.classList.remove('nascosto');
container.innerHTML = ''; pokemonContainer.innerHTML = '';
try { try {
// 👇 SCRIVI QUI IL TUO CODICE 👇 // 👇 SCRIVI QUI IL TUO CODICE 👇
// Fai una fetch GET a: https://pokeapi.co/api/v2/pokemon/ + input // 1. Fai una fetch GET a: https://pokeapi.co/api/v2/pokemon/ + input
// const response = await fetch('https://pokeapi.co/api/v2/pokemon/' + input); // const response = await fetch('https://pokeapi.co/api/v2/pokemon/' + input);
// Controlla se la risposta è OK (non 404) // 2. Controlla se la risposta è OK (non 404)
// if (!response.ok) { // if (!response.ok) {
// throw new Error('Pokémon non trovato'); // throw new Error('Pokémon non trovato');
// } // }
// Converti in JSON // 3. Converti in JSON
// const pokemon = await response.json(); // const pokemon = await response.json();
// Visualizza // 4. Visualizza
// displayPokemon(pokemon); // displayPokemon(pokemon);
throw new Error('Codice non implementato - Completa searchPokemon()'); throw new Error('Codice non implementato - Completa searchPokemon()');
} catch (error) { } catch (error) {
container.innerHTML = `<div class="error">❌ ${error.message}</div>`; handleError(error.message);
console.error('Errore:', error);
} finally { } finally {
loading.style.display = 'none'; loading.classList.add('nascosto');
} }
} }
/** /**
* Visualizza le informazioni del Pokémon * FUNZIONE: Visualizza le informazioni del Pokémon
* (Questa funzione è già fatta) * (Questa funzione è già fatta - non modificare)
*/ */
function displayPokemon(pokemon) { function displayPokemon(pokemon) {
const container = document.getElementById('pokemonContainer');
// ESTRAI I DATI // ESTRAI I DATI
const name = pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1); const name = pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1);
@@ -101,14 +130,14 @@ function displayPokemon(pokemon) {
</div> </div>
`; `;
container.innerHTML = html; pokemonContainer.innerHTML = html;
} }
// COLLEGA IL BOTTONE // ===== COLLEGA GLI EVENTI =====
document.getElementById('btnSearch').addEventListener('click', searchPokemon); btnSearch.addEventListener('click', searchPokemon);
// PERMETTI ENTER // PERMETTI ENTER
document.getElementById('pokemonInput').addEventListener('keypress', (e) => { pokemonInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
searchPokemon(); searchPokemon();
} }

171
javascript/JS_Esercizi 11 - API/06_pokedex/style.css → javascript/JS_Esercizi 11 - API/extra_pokedex/style.css
View File

@@ -34,30 +34,30 @@ h1 {
} }
.search-box { .search-box {
background: white; background: #f9f9f9;
padding: 25px; padding: 20px;
border-radius: 12px; border-radius: 10px;
margin-bottom: 30px; margin-bottom: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
} }
.search-box h2 { .search-box h2 {
color: #333; color: #333;
margin-bottom: 20px; margin: 0 0 15px 0;
font-size: 1.2em; font-size: 1.1rem;
}
#f9f9f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
} }
.search-box label { .search-box label {
display: block; display: block;
color: #555; color: #555;
font-weight: 600; font-weight: 600;
margin-bottom: 10 #ddd; margin-bottom: 10px;
border-radius: 60px; font-size: 0.95rem;
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 10px;
} }
.input-group input { .input-group input {
@@ -66,11 +66,13 @@ h1 {
border: 2px solid #ddd; border: 2px solid #ddd;
border-radius: 6px; border-radius: 6px;
font-size: 15px; font-size: 15px;
font-family: inherit;
} }
.input-group input:focus { .input-group input:focus {
outline: none; outline: none;
border-color: #007bff; border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
} }
.input-group button { .input-group button {
@@ -81,17 +83,26 @@ h1 {
border-radius: 6px; border-radius: 6px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
transition: background 0.2s;
} }
.input-group button:hover { .input-group button:hover {
background: #85r056b3 background: #0056b3;
}
.hint-text {
color: #666;
font-size: 0.9rem;
margin-top: 10px;
}
.loading { .loading {
text-align: center; text-align: center;
color: white; color: #666;
font-size: 1.2em; font-size: 1rem;
padding#666; padding: 30px;
padding: 3 animation: pulse 1s infinite;
}
@keyframes pulse { @keyframes pulse {
0%, 100% { opacity: 1; } 0%, 100% { opacity: 1; }
@@ -102,14 +113,15 @@ h1 {
margin-bottom: 50px; margin-bottom: 50px;
} }
.pokemon-card {30px;
}
.pokemon-card { .pokemon-card {
background: #f9f9f9; background: #f9f9f9;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);-header { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
animation: slideIn 0.3s ease-out;
}
.card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; color: white;
padding: 20px; padding: 20px;
@@ -117,44 +129,33 @@ h1 {
} }
.card-header h2 { .card-header h2 {
font-size: 1.8em; margin: 0;
font-size: 1.3rem;
} }
.card-image { .card-image {
background: #f9f9f9; background: white;
padding: 30px; padding: 30px;
text-align: center; text-align: center;
border-bottom: 2px solid #f0f0f0;
}007bff 0%, #0056b3 100%);
color: white;
padding: 20px;
text-align: center;
}
.card-header h2 {
margin: 0;
font-size: 1.3r
.card-details {white;
padding: 20px;
text-align: center;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
} }
.card-image img { .card-image img {
max-width: 18 0; max-width: 180px;
border-bottom: 1px solid #eee; height: auto;
} }
.detail-row:last-child { .card-details {
border-bottom: none; padding: 20px;
}0px;
} }
.detail-row { .detail-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #eee;
color: #555;
font-size: 0.95rem;
} }
.detail-row:last-child { .detail-row:last-child {
@@ -162,33 +163,41 @@ h1 {
} }
.detail-row strong { .detail-row strong {
color: #333solid #eee; color: #333;
font-weight: 600;
}
.card-footer {
background: #f9f9f9;
padding: 12px 20px;
text-align: center;
border-top: 1px solid #eee;
} }
.card-footer small { .card-footer small {
color: #999; color: #999;
font-size: 0.8rem;
} }
.card-footer a { .card-footer a {
color: #667eea; color: #007bff;
text-decoration: none; text-decoration: none;
font-weight: 500;
}2px;
text-align: center;
border-top: 1px solid #f0f0f0;
font-size: 0.85rem;
color: #999;
} }
.card-footer a { .card-footer a:hover {
color: #007bff 8px; text-decoration: underline;
}
.error {
background: #fee;
color: #c00;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #c00; border-left: 4px solid #c00;
font-weight: 500; font-weight: 500;
} }
.instructions { .instructions {
background: rgba(255, 255, 255, 0.95);
padding: -box {
background: #f9f9f9; background: #f9f9f9;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
@@ -196,29 +205,30 @@ h1 {
margin-top: 30px; margin-top: 30px;
} }
.instructions-box h2 { .instructions h2 {
color: #333; color: #333;
margin: 0 0 15px 0; margin: 0 0 15px 0;
font-size: 1.1rem; font-size: 1.1rem;
} }
.instructions-box ol, .instructions-box ul { .instructions ol,
.instructions ul {
margin-left: 20px; margin-left: 20px;
color: #555; color: #555;
line-height: 1.7; line-height: 1.7;
} }
.instructions-box li { .instructions li {
margin-bottom: 8px; margin-bottom: 8px;
} }
.instructions-box code { .instructions code {
background: white; background: white;
padding: 2px 5px; padding: 2px 5px;
border-radius: 3px; border-radius: 3px;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
color: #d63384; color: #d63384;
font-size: 0.9em; font-size: 0.9rem;
} }
.hint { .hint {
@@ -240,6 +250,41 @@ h1 {
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
overflow-x: auto; overflow-x: auto;
font-size: 0.8em; font-size: 0.85rem;
color: #333; color: #333;
margin: 0 margin: 0;
}
.challenge {
background: white;
border: 1px solid #ddd;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
}
.challenge strong {
color: #28a745;
display: block;
margin-bottom: 10px;
}
.challenge p {
margin: 0;
color: #555;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.nascosto {
display: none;
}

18
javascript/JS_Esercizi 11 - API/index.html
View File

@@ -211,7 +211,15 @@
</div> </div>
</a> </a>
<a href="04_todo_app_crud/index.html" class="card"> <a href="04_ricerca_post/index.html" class="card">
<div class="icon">🔍</div>
<div class="info">
<h3>Ricerca Post <span class="difficulty medium">Medio</span></h3>
<p>Fetch multipli con filtri incrociati</p>
</div>
</a>
<a href="05_todo_app_crud/index.html" class="card">
<div class="icon">✅</div> <div class="icon">✅</div>
<div class="info"> <div class="info">
<h3>Todo App CRUD <span class="difficulty hard">Difficile</span></h3> <h3>Todo App CRUD <span class="difficulty hard">Difficile</span></h3>
@@ -222,7 +230,7 @@
<h2>Esercizi su Server Esterno</h2> <h2>Esercizi su Server Esterno</h2>
<div class="exercise-list"> <div class="exercise-list">
<a href="05_meteo/index.html" class="card"> <a href="extra_meteo/index.html" class="card">
<div class="icon">🌤️</div> <div class="icon">🌤️</div>
<div class="info"> <div class="info">
<h3>App Meteo <span class="difficulty medium">Medio</span></h3> <h3>App Meteo <span class="difficulty medium">Medio</span></h3>
@@ -230,7 +238,7 @@
</div> </div>
</a> </a>
<a href="06_pokedex/index.html" class="card"> <a href="extra_pokedex/index.html" class="card">
<div class="icon">🔴</div> <div class="icon">🔴</div>
<div class="info"> <div class="info">
<h3>Pokédex <span class="difficulty medium">Medio</span></h3> <h3>Pokédex <span class="difficulty medium">Medio</span></h3>
@@ -241,7 +249,9 @@
<div class="important-note"> <div class="important-note">
<strong>⚠️ Prima di Iniziare:</strong><br> <strong>⚠️ Prima di Iniziare:</strong><br>
Per esercizi 1-4: avvia il server con <code>cd server-api</code> e poi <code>npm start</code> Per esercizi 1-5: avvia il server con <code>cd server-api</code> e poi <code>npm start</code><br>
L'insegnante dovrebbe averlo già avviato, ma potete farlo anche in locale.<br>
Controllare sempre che <code>BASE_URL</code> in ogni script punti al corretto URL.
</div> </div>
</div> </div>
</body> </body>

120
server-api/database/db.json
View File

@@ -481,6 +481,126 @@
"contenuto": "Chi vuole aiutarmi con una app open source?", "contenuto": "Chi vuole aiutarmi con una app open source?",
"likes": 0, "likes": 0,
"data": "2023-10-14" "data": "2023-10-14"
},
{
"id": 11,
"userId": 5,
"titolo": "JavaScript async/await",
"contenuto": "Finalmente ho capito la differenza tra Promises e async/await.",
"likes": 67,
"data": "2023-10-16"
},
{
"id": 12,
"userId": 1,
"titolo": "API REST in 10 minuti",
"contenuto": "Un semplice tutorial su come creare una API.",
"likes": 34,
"data": "2023-10-18"
},
{
"id": 13,
"userId": 12,
"titolo": "Imparare CSS Grid",
"contenuto": "Grid è più semplice di quanto pensi.",
"likes": 28,
"data": "2023-10-17"
},
{
"id": 14,
"userId": 10,
"titolo": "Debugging con console.log",
"contenuto": "A volte le soluzioni più semplici funzionano meglio.",
"likes": 15,
"data": "2023-10-19"
},
{
"id": 15,
"userId": 7,
"titolo": "Open source per principianti",
"contenuto": "Iniziare a contribuire al tuo primo progetto.",
"likes": 42,
"data": "2023-10-20"
},
{
"id": 16,
"userId": 15,
"titolo": "Il mio primo npm package",
"contenuto": "Ho pubblicato la mia prima libreria JavaScript.",
"likes": 11,
"data": "2023-10-21"
},
{
"id": 17,
"userId": 2,
"titolo": "CSS Flexbox Tips",
"contenuto": "Alcuni trucchi utili per usare Flexbox meglio.",
"likes": 56,
"data": "2023-10-22"
},
{
"id": 18,
"userId": 20,
"titolo": "Testing in JavaScript",
"contenuto": "Perché i test sono importanti per il tuo codice.",
"likes": 73,
"data": "2023-10-23"
},
{
"id": 19,
"userId": 5,
"titolo": "TypeScript per chi inizia",
"contenuto": "Le basi di TypeScript senza complicazioni.",
"likes": 89,
"data": "2023-10-24"
},
{
"id": 20,
"userId": 12,
"titolo": "Responsive Design Essenziale",
"contenuto": "Mobile first è il nuovo standard.",
"likes": 44,
"data": "2023-10-25"
},
{
"id": 21,
"userId": 1,
"titolo": "DOM Manipulation Semplice",
"contenuto": "Come modificare il DOM senza framework.",
"likes": 26,
"data": "2023-10-26"
},
{
"id": 22,
"userId": 4,
"titolo": "Alternativa a jQuery",
"contenuto": "Non hai bisogno di jQuery per le cose semplici.",
"likes": 37,
"data": "2023-10-27"
},
{
"id": 23,
"userId": 15,
"titolo": "Gestione degli errori",
"contenuto": "Try/catch: quando e come usarlo.",
"likes": 19,
"data": "2023-10-28"
},
{
"id": 24,
"userId": 10,
"titolo": "Le Arrow Function",
"contenuto": "Cosa sono e quando usarle nella pratica.",
"likes": 31,
"data": "2023-10-29"
},
{
"id": 25,
"userId": 20,
"titolo": "Destructuring in JavaScript",
"contenuto": "Una sintassi comoda che ti farà risparmiare tempo.",
"likes": 52,
"data": "2023-10-30"
} }
], ],
"todos": [ "todos": [