Projecte PokeAPI is a web-based Pokédex simulation designed to resemble a fully functional Nintendo DS Lite interface. It fetches and displays Pokémon data from the PokeAPI and presents it as an interactive experience.
📝 Note: This project includes an explanation in Catalan, as it is part of an academic exercise during my training. This facilitates evaluation and correction.
- 🏗️ HTML5 - Structuring the web page.
- 🎨 CSS3 - Styling and animations.
- ⚡ JavaScript (ES6+) - Handling logic and API requests.
- 📱 Bootstrap - Providing responsive design components.
- 🔍 PokeAPI - Fetching Pokémon data.
ProjectePokeAPI/
│-- index.html # Main HTML file
│-- styles.css # Custom styles
│-- script.js # Core logic and API handling
│-- README.md # Project documentation
- 🔄 Fetches Pokémon data dynamically using
fetchandaxios. - 📜 Displays Pokémon details such as name, type, and stats.
- 🎶 Implements animations and sound effects for a more immersive experience.
- 📌 Uses a dropdown menu to select Pokémon from the Sinnoh Pokédex (Platinum version).
- 🎮 DS-like UI simulation with clickable buttons and screens.
- API Requests: Uses
fetchto request Pokémon data from PokeAPI. - DOM Manipulation: Updates UI dynamically based on API responses.
- Event Listeners: Implements button interactions to simulate a real DS interface.
- CSS Animations & Transitions: Used for smooth UI effects.
- Audio Integration: Includes sound effects for UI feedback.
- Responsive Design: Works on different screen sizes using Bootstrap and CSS Media Queries.
-
Clone the repository:
git clone https://github.com/Alexasto12/ProjectePokeAPI.git
-
Navigate to the project folder:
cd ProjectePokeAPI -
Open
index.htmlin a browser.
🔗 You can view the project live here: Pokedex
This project was developed by Alexasto12.
🎨 The design of the Nintendo DS in this project is inspired by and adapted from Anton Essential's work on CodePen, available under the MIT license.
💡 Thanks to his contribution, I was able to create this interactive Pokédex experience.
📚 Special thanks to PokeAPI for providing the data.