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>
<!-- LOADING -->
<div id="loading" class="loading" style="display: none;">
<div id="loading" class="loading nascosto">
⏳ Caricamento meteo...
</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
*/
// ===== 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
* - longitude: numero decimale
* - current: variabili da ottenere (separati da virgola)
* - 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() {
const latitude = document.getElementById('latitude').value;
const longitude = document.getElementById('longitude').value;
const loading = document.getElementById('loading');
const container = document.getElementById('weatherContainer');
const lat = latitude.value;
const lon = longitude.value;
// VALIDAZIONE
if (!latitude || !longitude) {
container.innerHTML = '<div class="error">❌ Inserisci latitudine e longitudine</div>';
if (!lat || !lon) {
handleError('Inserisci latitudine e longitudine');
return;
}
loading.style.display = 'block';
container.innerHTML = '';
loading.classList.remove('nascosto');
weatherContainer.innerHTML = '';
try {
// 👇 SCRIVI QUI IL TUO CODICE 👇
// Costruisci l'URL con i parametri corretti:
// const url = 'https://api.open-meteo.com/v1/forecast?latitude=' + ...
// 1. Costruisci l'URL con i parametri corretti:
// 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);
// 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();
// 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()');
} catch (error) {
container.innerHTML = `<div class="error">❌ ${error.message}</div>`;
console.error('Errore:', error);
handleError(error.message);
} finally {
loading.style.display = 'none';
loading.classList.add('nascosto');
}
}
/**
* Visualizza i dati meteo
* (Questa funzione è già fatta)
* FUNZIONE: Visualizza i dati meteo
* (Questa funzione è già fatta - non modificare)
*/
function displayWeather(current, lat, lon) {
const container = document.getElementById('weatherContainer');
// Converti codice meteo in descrizione
const weatherDescriptions = {
@@ -95,17 +141,17 @@ function displayWeather(current, lat, lon) {
</div>
`;
container.innerHTML = html;
weatherContainer.innerHTML = html;
}
// COLLEGA IL BOTTONE
document.getElementById('btnSearch').addEventListener('click', searchWeather);
// ===== COLLEGA GLI EVENTI =====
btnSearch.addEventListener('click', searchWeather);
// PERMETTI ENTER
document.getElementById('latitude').addEventListener('keypress', (e) => {
latitude.addEventListener('keypress', (e) => {
if (e.key === 'Enter') searchWeather();
});
document.getElementById('longitude').addEventListener('keypress', (e) => {
longitude.addEventListener('keypress', (e) => {
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;
}
.search-box h2 {
color: #333;
margin: 0 0 15px 0;
font-size: 1.1rem;
}
.search-box label {
display: block;
color: #555;
font-weight: 600;
margin-bottom: 10px;
font-size: 0.95rem;
}
.coord-group {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.coord-group input {
flex: 1;
padding: 12px;
border: 2p0px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 15px;
font-family: inherit;
}
.coord-group input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}
.coord-group button {
@@ -74,23 +83,25 @@ h1 {
border-radius: 6px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.coord-group button:hover {
background: #0056b3
background: #0056b3;
}
.hint-text {
color: #666;
font-size: 0.9em;
margin-top: 185rpx;
font-size: 0.9rem;
margin-top: 10px;
}
.loading {
text-align: center;
color: white;
font-si#666;
padding: 3 pulse 1s infinite;
color: #666;
font-size: 1rem;
padding: 30px;
animation: pulse 1s infinite;
}
@keyframes pulse {
@@ -100,7 +111,6 @@ h1 {
.weather-container {
margin-bottom: 50px;
}30px;
}
.weather-card {
@@ -108,25 +118,14 @@ h1 {
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
animation: slideIn 0.3s ease-out;
}
.location {
text-align: center;
color: #666;
margin-bottom: 20px;
font-size: 0.95em;
}
.weather-main {
text-align: center;
margin: 30px 0;
}
.emoji {
font-size: 4em;
color: #666;
margin-bottom: 20px;
font-size: 0.9rem;
text-align: center;
font-size: 0.95rem;
}
.weather-main {
@@ -135,12 +134,12 @@ h1 {
}
.emoji {
font-size: 3.5em;
font-size: 3.5rem;
margin-bottom: 10px;
}
.temp {
font-size: 2.2em;
font-size: 2.2rem;
font-weight: bold;
color: #333;
}
@@ -149,28 +148,25 @@ h1 {
background: white;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #007bff;
margin-top: 15px;
}
.weather-details p {
margin: 8px 0;
color: #555;
margin: 10px 0;
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);
font-size: 0.95rem;
}
.instructions h2 {
color: #333;
margin-bottom: 20px;
font-size15px;
.error {
background: #fee;
color: #c00;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #c
margin-left: 25px;
color: #555;
line-heig-box {
border-left: 4px solid #c00;
font-weight: 500;
}
.instructions {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
@@ -178,29 +174,30 @@ h1 {
margin-top: 30px;
}
.instructions-box h2 {
.instructions h2 {
color: #333;
margin: 0 0 15px 0;
font-size: 1.1rem;
}
.instructions-box ol, .instructions-box ul {
.instructions ol,
.instructions ul {
margin-left: 20px;
color: #555;
line-height: 1.7;
}
.instructions-box li {
.instructions li {
margin-bottom: 8px;
}
.instructions-box code {
.instructions code {
background: white;
padding: 2px 5px;
border-radius: 3px;
font-family: 'Courier New', monospace;
color: #d63384;
font-size: 0.9em;
font-size: 0.9rem;
}
.hint {
@@ -222,7 +219,41 @@ h1 {
padding: 10px;
border-radius: 4px;
overflow-x: auto;
font-size: 0.8em;
font-size: 0.85rem;
color: #333;
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>
<!-- LOADING -->
<div id="loading" class="loading" style="display: none;">
<div id="loading" class="loading nascosto">
⏳ Cercando Pokémon...
</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/
*/
// ===== 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:
* - Accetta nome (in minuscolo) o numero ID
* - 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() {
const input = document.getElementById('pokemonInput').value.trim().toLowerCase();
const loading = document.getElementById('loading');
const container = document.getElementById('pokemonContainer');
const input = pokemonInput.value.trim().toLowerCase();
// VALIDAZIONE
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;
}
loading.style.display = 'block';
container.innerHTML = '';
loading.classList.remove('nascosto');
pokemonContainer.innerHTML = '';
try {
// 👇 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);
// Controlla se la risposta è OK (non 404)
// 2. Controlla se la risposta è OK (non 404)
// if (!response.ok) {
// throw new Error('Pokémon non trovato');
// }
// Converti in JSON
// 3. Converti in JSON
// const pokemon = await response.json();
// Visualizza
// 4. Visualizza
// displayPokemon(pokemon);
throw new Error('Codice non implementato - Completa searchPokemon()');
} catch (error) {
container.innerHTML = `<div class="error">❌ ${error.message}</div>`;
console.error('Errore:', error);
handleError(error.message);
} finally {
loading.style.display = 'none';
loading.classList.add('nascosto');
}
}
/**
* Visualizza le informazioni del Pokémon
* (Questa funzione è già fatta)
* FUNZIONE: Visualizza le informazioni del Pokémon
* (Questa funzione è già fatta - non modificare)
*/
function displayPokemon(pokemon) {
const container = document.getElementById('pokemonContainer');
// ESTRAI I DATI
const name = pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1);
@@ -101,14 +130,14 @@ function displayPokemon(pokemon) {
</div>
`;
container.innerHTML = html;
pokemonContainer.innerHTML = html;
}
// COLLEGA IL BOTTONE
document.getElementById('btnSearch').addEventListener('click', searchPokemon);
// ===== COLLEGA GLI EVENTI =====
btnSearch.addEventListener('click', searchPokemon);
// PERMETTI ENTER
document.getElementById('pokemonInput').addEventListener('keypress', (e) => {
pokemonInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
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 {
background: white;
padding: 25px;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
}
.search-box h2 {
color: #333;
margin-bottom: 20px;
font-size: 1.2em;
}
#f9f9f9;
padding: 20px;
border-radius: 10px;
margin-bottom: 25px;
margin: 0 0 15px 0;
font-size: 1.1rem;
}
.search-box label {
display: block;
color: #555;
font-weight: 600;
margin-bottom: 10 #ddd;
border-radius: 60px;
margin-bottom: 10px;
font-size: 0.95rem;
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.input-group input {
@@ -66,11 +66,13 @@ h1 {
border: 2px solid #ddd;
border-radius: 6px;
font-size: 15px;
font-family: inherit;
}
.input-group input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}
.input-group button {
@@ -81,17 +83,26 @@ h1 {
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s;
}
.input-group button:hover {
background: #85r056b3
background: #0056b3;
}
.hint-text {
color: #666;
font-size: 0.9rem;
margin-top: 10px;
}
.loading {
text-align: center;
color: white;
font-size: 1.2em;
padding#666;
padding: 3
color: #666;
font-size: 1rem;
padding: 30px;
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
@@ -102,14 +113,15 @@ h1 {
margin-bottom: 50px;
}
.pokemon-card {30px;
}
.pokemon-card {
background: #f9f9f9;
border-radius: 10px;
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%);
color: white;
padding: 20px;
@@ -117,44 +129,33 @@ h1 {
}
.card-header h2 {
font-size: 1.8em;
margin: 0;
font-size: 1.3rem;
}
.card-image {
background: #f9f9f9;
background: white;
padding: 30px;
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;
}
.card-image img {
max-width: 18 0;
border-bottom: 1px solid #eee;
max-width: 180px;
height: auto;
}
.detail-row:last-child {
border-bottom: none;
}0px;
.card-details {
padding: 20px;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid #eee;
color: #555;
font-size: 0.95rem;
}
.detail-row:last-child {
@@ -162,33 +163,41 @@ h1 {
}
.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 {
color: #999;
font-size: 0.8rem;
}
.card-footer a {
color: #667eea;
color: #007bff;
text-decoration: none;
font-weight: 500;
}2px;
text-align: center;
border-top: 1px solid #f0f0f0;
font-size: 0.85rem;
color: #999;
}
.card-footer a {
color: #007bff 8px;
.card-footer a:hover {
text-decoration: underline;
}
.error {
background: #fee;
color: #c00;
padding: 15px;
border-radius: 6px;
border-left: 4px solid #c00;
font-weight: 500;
}
.instructions {
background: rgba(255, 255, 255, 0.95);
padding: -box {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
@@ -196,29 +205,30 @@ h1 {
margin-top: 30px;
}
.instructions-box h2 {
.instructions h2 {
color: #333;
margin: 0 0 15px 0;
font-size: 1.1rem;
}
.instructions-box ol, .instructions-box ul {
.instructions ol,
.instructions ul {
margin-left: 20px;
color: #555;
line-height: 1.7;
}
.instructions-box li {
.instructions li {
margin-bottom: 8px;
}
.instructions-box code {
.instructions code {
background: white;
padding: 2px 5px;
border-radius: 3px;
font-family: 'Courier New', monospace;
color: #d63384;
font-size: 0.9em;
font-size: 0.9rem;
}
.hint {
@@ -240,6 +250,41 @@ h1 {
padding: 10px;
border-radius: 4px;
overflow-x: auto;
font-size: 0.8em;
font-size: 0.85rem;
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;
}

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

@@ -124,7 +124,7 @@
text-transform: uppercase;
letter-spacing: 0.5px;
}
.difficulty.tutorial {
background: #e3f2fd;
color: #1565c0;
@@ -211,7 +211,15 @@
</div>
</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="info">
<h3>Todo App CRUD <span class="difficulty hard">Difficile</span></h3>
@@ -222,7 +230,7 @@
<h2>Esercizi su Server Esterno</h2>
<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="info">
<h3>App Meteo <span class="difficulty medium">Medio</span></h3>
@@ -230,7 +238,7 @@
</div>
</a>
<a href="06_pokedex/index.html" class="card">
<a href="extra_pokedex/index.html" class="card">
<div class="icon">🔴</div>
<div class="info">
<h3>Pokédex <span class="difficulty medium">Medio</span></h3>
@@ -241,7 +249,9 @@
<div class="important-note">
<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>
</body>

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

@@ -481,6 +481,126 @@
"contenuto": "Chi vuole aiutarmi con una app open source?",
"likes": 0,
"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": [