Skip to content

roofsonfire/pokedex

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pokédex

Una aplicación interactiva que permite buscar, explorar y visualizar información sobre diferentes Pokémon. Diseñada con una interfaz atractiva y funcional, esta Pokédex es ideal para fanáticos de Pokémon y desarrolladores interesados en aprender sobre integración de APIs y diseño interactivo.

Características

  • Búsqueda de Pokémon: Busca Pokémon por nombre o ID.
  • Visualización de estadísticas: Muestra estadísticas como altura, HP, ataque, defensa, velocidad, entre otros.
  • Sprites dinámicos: Cambia entre diferentes sprites de Pokémon, incluyendo versiones shiny.
  • Reproducción de sonidos: Escucha el grito característico de cada Pokémon.
  • Modo de ayuda: Activa un modo interactivo que explica las funciones de los botones.
  • Interfaz interactiva: Incluye botones funcionales como navegación D-Pad, mute, y más.

Tecnologías utilizadas

  • HTML5: Estructura de la aplicación.
  • CSS3: Estilización y diseño responsivo.
  • JavaScript: Lógica interactiva y manejo de eventos.
  • Tone.js: Manejo de audio para los sonidos de los Pokémon.
  • PokéAPI: Fuente de datos para la información de los Pokémon.

Instalación

  1. Clona este repositorio:
    git clone https://github.com/tu-usuario/pokedex.git
  2. Navega al directorio del proyecto:
    cd pokedex
  3. Abre el archivo index.html en tu navegador para ejecutar la aplicación.

Uso

  1. Ingresa el nombre o ID de un Pokémon en el campo de búsqueda.
  2. Presiona el botón de búsqueda para obtener información sobre el Pokémon.
  3. Usa los botones de navegación (D-Pad) para explorar diferentes sprites.
  4. Presiona el botón de sonido para escuchar el grito del Pokémon.
  5. Activa el modo de ayuda para obtener descripciones de los botones.

Capturas de pantalla

Pantalla principal

Pantalla principal

Modo de ayuda

Modo de ayuda

Nota: Asegúrate de que las imágenes main_screen.png y help_mode.png estén ubicadas en la carpeta assets/screenshots.

Contribución

¡Las contribuciones son bienvenidas! Si deseas contribuir:

  1. Haz un fork del repositorio.
  2. Crea una rama para tu funcionalidad:
    git checkout -b nueva-funcionalidad
  3. Realiza tus cambios y haz un commit:
    git commit -m "Agrega nueva funcionalidad"
  4. Envía un pull request.

Créditos

Licencia

Este proyecto está licenciado bajo la MIT License.


¡Atrápalos a todos! 🎮

Packages

No packages published

Languages

  • HTML 69.4%
  • JavaScript 24.9%
  • CSS 5.7%