Ver todos los proyectos

Pokemon Search APP

  • HTML
  • CSS
  • JavaScript

Este proyecto consiste en una página web interactiva que permite a los usuarios buscar un Pokémon por nombre o ID. La interfaz, desarrollada con HTML y estilizada con CSS, es sencilla y responsive. El núcleo de la funcionalidad se implementa en JavaScript, que realiza consultas a la API de Pokémon (PokeAPI) y muestra los resultados dinámicamente.

Descripción de la imagen
Ver Proyecto Ver código

Este proyecto es una aplicación web que permite a los usuarios buscar información detallada sobre Pokémon utilizando su nombre o número de identificación (ID). La aplicación consume datos de la PokéAPI Proxy de freeCodeCamp para obtener información como el nombre, ID, peso, altura, tipos y estadísticas (HP, ataque, defensa, etc.) del Pokémon buscado. Además, muestra una imagen del Pokémon (sprite) y visualiza sus estadísticas en barras de progreso.

Conocimientos Aplicados

  • Consumo de APIs: Uso de fetch para realizar solicitudes a la PokéAPI Proxy y obtener datos en formato JSON.
  • Manipulación del DOM: Actualización dinámica de la interfaz utilizando métodos como getElementById, querySelector, textContent y innerHTML.
  • Manejo de eventos: Captura de clics en el botón de búsqueda (#search-button) y validación de la entrada del usuario.
  • Lógica de programación: Implementación de funciones para calcular porcentajes de estadísticas, limpiar la interfaz entre búsquedas y actualizar la información del Pokémon.
  • Diseño responsivo: Estructura HTML semántica y estilos CSS adaptables a diferentes dispositivos.
  • Manejo de errores: Uso de try-catch y alert para notificar al usuario cuando no se encuentra un Pokémon.

Funcionalidades Destacadas

  1. Búsqueda de Pokémon:

    • Permite buscar Pokémon por nombre o ID.
    • Valida la entrada del usuario y muestra un mensaje de error si el Pokémon no existe.

  2. Visualización de Datos:

    • Muestra el nombre, ID, peso, altura y tipos del Pokémon.
    • Incluye una imagen del Pokémon (sprite) en su versión frontal por defecto.

  3. Estadísticas en Barras de Progreso:

    • Calcula el porcentaje de cada estadística (HP, ataque, defensa, etc.) en relación con el valor máximo posible (255).
    • Muestra las estadísticas en barras de progreso visuales.

  4. Limpieza de la Interfaz:

    • Limpia la información del Pokémon anterior antes de mostrar los resultados de una nueva búsqueda.
    • Elimina los tipos del Pokémon anterior para evitar superposiciones.

  5. Manejo de Errores:

    • Notifica al usuario si no se proporciona una entrada válida.
    • Muestra un mensaje de error si el Pokémon no se encuentra en la API.

Conclusión

Este proyecto demuestra cómo integrar una API externa en una aplicación web para obtener y mostrar datos dinámicos. A través de su desarrollo, reforcé mis habilidades en manipulación del DOM, consumo de APIs, manejo de eventos y diseño responsivo. Además, me permitió explorar técnicas avanzadas como la visualización de datos en barras de progreso y la gestión de errores en aplicaciones web.