rinomina esercizi js

2026-02-12 18:36:35 +01:00
parent f0b6b85b36
commit 60878cf770
150 changed files with 16 additions and 0 deletions
--- a/javascript/11_API/extra_pokedex/index.html
+++ b/javascript/11_API/extra_pokedex/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Extra 2 - Pokédex</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>🔴 Pokédex</h1>
+        <p class="subtitle">API pubblica PokéAPI</p>
+
+        <!-- SEZIONE RICERCA -->
+        <div class="search-box">
+            <h2>🔍 Cerca Pokémon</h2>
+            <label>Nome o Numero:</label>
+            <div class="input-group">
+                <input type="text" id="pokemonInput" placeholder="Pikachu oppure 25" value="pikachu">
+                <button id="btnSearch">Cerca</button>
+            </div>
+            <p class="hint-text">💡 Esempi: pikachu, charizard, 1 (Bulbasaur), 6 (Charizard)</p>
+        </div>
+
+        <!-- LOADING -->
+        <div id="loading" class="loading nascosto">
+            ⏳ Cercando Pokémon...
+        </div>
+
+        <!-- RISULTATO -->
+        <div id="pokemonContainer" class="pokemon-container"></div>
+
+        <!-- ISTRUZIONI -->
+        <div class="instructions">
+            <h2>📝 Cosa Devi Fare</h2>
+            <ol>
+                <li>Leggi il nome/numero dal campo input</li>
+                <li>Fai una GET a <code>https://pokeapi.co/api/v2/pokemon/{name_or_id}</code></li>
+                <li>Verifica che la risposta sia OK (gestisci errori 404)
+                    <ul style="margin-top: 10px;">
+                        <li>Se <code>!response.ok</code>, mostra un errore</li>
+                    </ul>
+                </li>
+                <li>Estrai i dati da <code>response</code>:
+                    <ul style="margin-top: 10px;">
+                        <li><code>name</code> - Nome</li>
+                        <li><code>sprites.front_default</code> - Immagine</li>
+                        <li><code>height</code> - Altezza (in decimetri)</li>
+                        <li><code>weight</code> - Peso (in ettogrammi)</li>
+                        <li><code>types[].type.name</code> - Tipi (è un ARRAY!)</li>
+                    </ul>
+                </li>
+                <li>Visualizza le informazioni in una card</li>
+            </ol>
+
+            <div class="hint">
+                <strong>💡 URL Completo (esempio Pikachu):</strong>
+                <pre>https://pokeapi.co/api/v2/pokemon/pikachu</pre>
+            </div>
+
+            <div class="hint">
+                <strong>💡 Array Annidati - Come Accedere a <code>types</code>:</strong>
+                <p><code>types</code> è un ARRAY di oggetti. Ogni elemento ha <code>type.name</code>:</p>
+                <pre>// response.types = [{type: {name: "electric"}}, {type: {name: "flying"}}]
+// Per estrarre i nomi, usa map():
+const typeNames = response.types.map(t => t.type.name);
+// Risultato: ["electric", "flying"]</pre>
+            </div>
+
+            <div class="hint">
+                <strong>💡 Struttura Card da Visualizzare:</strong>
+                <pre>&lt;div class="pokemon-card"&gt;
+  &lt;img src="sprites.front_default" alt="name"&gt;
+  &lt;h3&gt;name&lt;/h3&gt;
+  &lt;p&gt;Altezza: height dm&lt;/p&gt;
+  &lt;p&gt;Peso: weight hg&lt;/p&gt;
+  &lt;p&gt;Tipi: typeNames.join(", ")&lt;/p&gt;
+&lt;/div&gt;</pre>
+            </div>
+
+            <div class="hint">
+                <strong>💡 Gestire Errori:</strong>
+                <pre>if (!response.ok) {
+    throw new Error('Pokémon non trovato');
+}</pre>
+            </div>
+
+            <div class="challenge">
+                <strong>🎯 Bonus Challenge:</strong>
+                <p>Aggiungi una funzione che carica 6 Pokémon casuali al caricamento della pagina (usa numeri random tra 1 e 151 per Pokémon validi)</p>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/javascript/11_API/extra_pokedex/script.js
+++ b/javascript/11_API/extra_pokedex/script.js
@@ -0,0 +1,144 @@
+/**
+ * EXTRA 2: Pokédex con PokéAPI
+ * 
+ * PokéAPI è un'API PUBBLICA e GRATUITA con migliaia di dati su Pokémon!
+ * NON richiede autenticazione, puoi fare tante richieste quante vuoi.
+ * 
+ * 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');
+
+
+/**
+ * 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 = pokemonInput.value.trim().toLowerCase();
+
+    // VALIDAZIONE
+    if (!input) {
+        handleError('Inserisci il nome o numero di un Pokémon');
+        return;
+    }
+
+    loading.classList.remove('nascosto');
+    pokemonContainer.innerHTML = '';
+
+    try {
+        // 👇 SCRIVI QUI IL TUO CODICE 👇
+        
+        // 1. Fai una fetch GET a: https://pokeapi.co/api/v2/pokemon/ + input
+        // const response = await fetch('https://pokeapi.co/api/v2/pokemon/' + input);
+        
+        // 2. Controlla se la risposta è OK (non 404)
+        // if (!response.ok) {
+        //     throw new Error('Pokémon non trovato');
+        // }
+        
+        // 3. Converti in JSON
+        // const pokemon = await response.json();
+        
+        // 4. Visualizza
+        // displayPokemon(pokemon);
+
+        throw new Error('Codice non implementato - Completa searchPokemon()');
+
+    } catch (error) {
+        handleError(error.message);
+    } finally {
+        loading.classList.add('nascosto');
+    }
+}
+
+/**
+ * FUNZIONE: Visualizza le informazioni del Pokémon
+ * (Questa funzione è già fatta - non modificare)
+ */
+function displayPokemon(pokemon) {
+
+    // ESTRAI I DATI
+    const name = pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1);
+    const id = pokemon.id;
+    const image = pokemon.sprites.front_default || 'https://placehold.co/200';
+    const height = (pokemon.height / 10).toFixed(1); // Converti da dm a metri
+    const weight = (pokemon.weight / 10).toFixed(1); // Converti da hg a kg
+    const types = pokemon.types.map(t => t.type.name).join(', ');
+
+    const html = `
+        <div class="pokemon-card">
+            <div class="card-header">
+                <h2>#${id} - ${name}</h2>
+            </div>
+
+            <div class="card-image">
+                <img src="${image}" alt="${name}">
+            </div>
+
+            <div class="card-details">
+                <div class="detail-row">
+                    <strong>Tipo:</strong>
+                    <span>${types}</span>
+                </div>
+                <div class="detail-row">
+                    <strong>Altezza:</strong>
+                    <span>${height} m</span>
+                </div>
+                <div class="detail-row">
+                    <strong>Peso:</strong>
+                    <span>${weight} kg</span>
+                </div>
+            </div>
+
+            <div class="card-footer">
+                <small>Dati da <a href="https://pokeapi.co/" target="_blank">PokéAPI</a></small>
+            </div>
+        </div>
+    `;
+
+    pokemonContainer.innerHTML = html;
+}
+
+// ===== COLLEGA GLI EVENTI =====
+btnSearch.addEventListener('click', searchPokemon);
+
+// PERMETTI ENTER
+pokemonInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        searchPokemon();
+    }
+});
--- a/javascript/11_API/extra_pokedex/style.css
+++ b/javascript/11_API/extra_pokedex/style.css
@@ -0,0 +1,290 @@
+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: 550px;
+    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;
+}
+
+.search-box {
+    background: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    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;
+}
+
+.input-group {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.input-group input {
+    flex: 1;
+    padding: 10px;
+    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 {
+    padding: 10px 20px;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.input-group button:hover {
+    background: #0056b3;
+}
+
+.hint-text {
+    color: #666;
+    font-size: 0.9rem;
+    margin-top: 10px;
+}
+
+.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; }
+}
+
+.pokemon-container {
+    margin-bottom: 50px;
+}
+
+.pokemon-card {
+    background: #f9f9f9;
+    border-radius: 10px;
+    overflow: hidden;
+    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;
+    text-align: center;
+}
+
+.card-header h2 {
+    margin: 0;
+    font-size: 1.3rem;
+}
+
+.card-image {
+    background: white;
+    padding: 30px;
+    text-align: center;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.card-image img {
+    max-width: 180px;
+    height: auto;
+}
+
+.card-details {
+    padding: 20px;
+}
+
+.detail-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+    color: #555;
+    font-size: 0.95rem;
+}
+
+.detail-row:last-child {
+    border-bottom: none;
+}
+
+.detail-row strong {
+    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: #007bff;
+    text-decoration: none;
+}
+
+.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: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    border-left: 4px solid #007bff;
+    margin-top: 30px;
+}
+
+.instructions h2 {
+    color: #333;
+    margin: 0 0 15px 0;
+    font-size: 1.1rem;
+}
+
+.instructions ol,
+.instructions ul {
+    margin-left: 20px;
+    color: #555;
+    line-height: 1.7;
+}
+
+.instructions li {
+    margin-bottom: 8px;
+}
+
+.instructions code {
+    background: white;
+    padding: 2px 5px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    color: #d63384;
+    font-size: 0.9rem;
+}
+
+.hint {
+    background: white;
+    border: 1px solid #ddd;
+    padding: 15px;
+    border-radius: 6px;
+    margin-top: 15px;
+}
+
+.hint strong {
+    color: #007bff;
+    display: block;
+    margin-bottom: 10px;
+}
+
+.hint pre {
+    background: #f0f0f0;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 0.85rem;
+    color: #333;
+    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;
+}