https://github.com/xdaybreakerx/pokemon-generator

A Tailwind + DaisyUI website to generate random Pokémon team and encounters with the PokeAPI via JavaScript
https://github.com/xdaybreakerx/pokemon-generator

css daisyui html pokeapi tailwindcss

Last synced: 16 days ago
JSON representation

A Tailwind + DaisyUI website to generate random Pokémon team and encounters with the PokeAPI via JavaScript

• Host: GitHub
• URL: https://github.com/xdaybreakerx/pokemon-generator
• Owner: xdaybreakerx
• Created: 2024-04-26T23:19:26.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-28T08:16:22.000Z (8 months ago)
• Last Synced: 2024-04-29T07:50:23.996Z (8 months ago)
• Topics: css, daisyui, html, pokeapi, tailwindcss
• Language: CSS
• Homepage: https://x-pokemon-generator.netlify.app/
• Size: 646 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pokémon Encounter and Team Generator

![desktop](./img/desktop.png)

## What is this project?

This project is a Pokémon-themed web application that allows users to interact with Pokémon data dynamically. 

It has two main features:

- Single Pokémon Encounter: 

	- This section of the application displays detailed information about a single Pokémon. Users can view a Pokémon's image, name, and type(s). Additionally, there's functionality to play the Pokémons 'cry'.

- Pokémon Team Creation: 

	- In this part of the application, users can generate and view a team of Pokémon. This area allows for multiple Pokémon to be displayed together, each represented in a card format which includes their images, names, types, and an option to hear their specific cry.

The layout is responsive, making it suitable for both mobile and desktop devices. On mobile devices, the sections stack vertically with the single Pokémon display on top, followed by the team display below, allowing users to scroll through content seamlessly. On desktops, these sections are displayed side-by-side, with the single Pokémon details appearing in a sidebar.

## What does this project use?

- HTML

- CSS/Tailwind CSS + DaisyUI

- JavaScript

- External Pokémon API - [PokeAPI](https://pokeapi.co/)

### Deployment:

[Netlify](https://x-pokemon-generator.netlify.app/)

## To-Do 

- [x] Cries

- [x] Shiny chance

- [x] Team generator

	- [ ] select number of Pokemon to generate in the team