Proyecto Final: Pokédex con Favoritos

¡Pon en práctica todo lo que has aprendido! Crea un buscador de Pokémon que guarde tus favoritos usando la PokéAPI.

Tiempo estimado: 4-6 horas

Dificultad: Intermedio

Objetivo del Proyecto

Crear una aplicación web que permita buscar información de Pokémon usando la PokéAPI y guardar tus favoritos en localStorage para que persistan aunque recargues la página.

Este proyecto integra todos los conceptos aprendidos: DOM, eventos, async/await, fetch, objetos, arrays, y localStorage.

1. Funcionalidades Requeridas

Búsqueda de Pokémon

Input donde el usuario puede escribir el nombre (ej: "pikachu") o número (ej: "25") del Pokémon
Botón "Buscar" que hace la petición a la API
Mostrar spinner de carga mientras se obtienen los datos
Manejo de errores: si el Pokémon no existe, mostrar mensaje claro

Mostrar Información del Pokémon

Cuando se encuentra un Pokémon, mostrar una tarjeta con:

▸ Imagen del Pokémon (sprite oficial)
▸ Nombre capitalizado
▸ Número de Pokédex (ID)
▸ Tipos (con colores diferentes para cada tipo)
▸ Estadísticas: HP, Attack, Defense, Speed (con barras de progreso)
▸ Botón "⭐ Agregar a Favoritos"

Sistema de Favoritos

Al hacer clic en "Agregar a Favoritos", guardar el Pokémon en un array
Guardar el array en localStorage (usar JSON.stringify())
Validar que no se agregue el mismo Pokémon dos veces
Mostrar lista de favoritos en una sección separada
Cada favorito debe tener un botón "Eliminar"
Al cargar la página, recuperar favoritos de localStorage

2. Trabajando con la PokéAPI

Endpoint de la API

Para buscar un Pokémon específico:

https://pokeapi.co/api/v2/pokemon/NOMBRE_O_NUMERO

Ejemplos:

• https://pokeapi.co/api/v2/pokemon/pikachu
• https://pokeapi.co/api/v2/pokemon/25
• https://pokeapi.co/api/v2/pokemon/charizard

Importante: Simplificar los Datos

La PokéAPI devuelve MUCHA información (más de 100 campos). Pero tú solo necesitas extraer lo que vas a usar.

No es necesario guardar toda la respuesta. Crea un objeto simple con solo los datos que necesitas:

buscar-pokemon.jsjavascript

1async function buscarPokemon(nombreONumero) {
2  try {
3    const response = await fetch(
4      `https://pokeapi.co/api/v2/pokemon/${nombreONumero.toLowerCase()}`
5    );
6 
7    if (!response.ok) {
8      throw new Error('Pokémon no encontrado');
9    }
10 
11    const data = await response.json();
12 
13    // ⚠️ La API devuelve MÁS de 100 campos
14    // Solo extraemos lo que necesitamos:
15    const pokemonSimplificado = {
16      id: data.id,
17      nombre: data.name,
18      imagen: data.sprites.front_default,
19      tipos: data.types.map(t => t.type.name),
20      stats: {
21        hp: data.stats[0].base_stat,
22        attack: data.stats[1].base_stat,
23        defense: data.stats[2].base_stat,
24        speed: data.stats[5].base_stat
25      }
26    };
27 
28    return pokemonSimplificado;
29  } catch (error) {
30    console.error('Error:', error);
31    return null;
32  }
33}

Plantilla del Objeto Simplificado

Este es el formato de objeto que debes crear y guardar en localStorage:

objeto-pokemon.jsjavascript

1// Objeto simplificado que guardarás
2const pokemonSimplificado = {
3  id: 25,
4  nombre: "pikachu",
5  imagen: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png",
6  tipos: ["electric"],
7  stats: {
8    hp: 35,
9    attack: 55,
10    defense: 40,
11    speed: 90
12  }
13};
14 
15// Para guardarlo en favoritos:
16const favoritos = [];
17favoritos.push(pokemonSimplificado);
18localStorage.setItem('pokemonFavoritos', JSON.stringify(favoritos));

3. Estructura HTML Recomendada

Organiza tu HTML en secciones claras:

1.
Sección de búsqueda
- • Input con id busqueda-input
- • Botón con id buscar-btn
- • Div de loading con id loading (oculto por defecto)
2.
Sección de resultado
- • Div con id pokemon-resultado donde se mostrará la tarjeta
3.
Sección de favoritos
- • Título "Mis Pokémon Favoritos"
- • Div con id favoritos-container

Consejo: Usa Plantillas de Bootstrap

No reinventes la rueda. Usa componentes de Bootstrap para acelerar el desarrollo:

• Cards para las tarjetas de Pokémon
• Input groups para el buscador
• Badges para los tipos
• Progress bars para las estadísticas
• Buttons para las acciones
• Spinner para el estado de carga

📚 Ver documentación de Bootstrap 5

4. Pasos Sugeridos para Desarrollar

Sábado - Parte 1: Búsqueda Básica (2-3h)

• Crear estructura HTML con Bootstrap
• Implementar función buscarPokemon() con fetch
• Mostrar datos básicos en una tarjeta simple
• Agregar loading y manejo de errores

Sábado - Parte 2: Mejorar Interfaz (1-2h)

• Agregar imagen del Pokémon
• Mostrar tipos con badges de colores
• Agregar barras de progreso para stats
• Estilizar la tarjeta con CSS personalizado

Domingo - Parte 1: Sistema de Favoritos (2h)

• Función agregarAFavoritos()
• Guardar en localStorage
• Función cargarFavoritos() al inicio
• Renderizar lista de favoritos
• Validar duplicados

Domingo - Parte 2: Pulir Detalles (1h)

• Función eliminar de favoritos
• Mejorar mensajes de error
• Agregar contador de favoritos
• Responsive design
• Testing final

5. Colores para Tipos de Pokémon

Para que tu Pokédex se vea profesional, usa estos colores según el tipo:

colores-tipos.jsjavascript

1const tipoColores = {
2  normal: '#A8A878',
3  fire: '#F08030',
4  water: '#6890F0',
5  electric: '#F8D030',
6  grass: '#78C850',
7  ice: '#98D8D8',
8  fighting: '#C03028',
9  poison: '#A040A0',
10  ground: '#E0C068',
11  flying: '#A890F0',
12  psychic: '#F85888',
13  bug: '#A8B820',
14  rock: '#B8A038',
15  ghost: '#705898',
16  dragon: '#7038F8',
17  dark: '#705848',
18  steel: '#B8B8D0',
19  fairy: '#EE99AC'
20};
21 
22// Uso:
23const tipo = 'fire';
24const color = tipoColores[tipo];
25tipoBadge.style.backgroundColor = color;