A dynamic, interactive web application that allows users to explore and discover Pokémon using the PokéAPI. This project showcases modern JavaScript development practices with a responsive, user-friendly interface built using vanilla JavaScript, HTML5, and CSS3.
- Pokémon Discovery: Browse through 150 Pokémon with paginated display
- Detailed Information: View comprehensive Pokémon details including stats, abilities, height, and weight
- Search Functionality: Search for Pokémon by name
- Responsive Design: Optimized for both desktop and mobile devices
- Modal Interface: Interactive modal windows for detailed Pokémon information
- Bootstrap Integration: Modern UI components with Bootstrap 5
- Smooth Animations: Enhanced user experience with CSS animations
- GitHub Repository: https://github.com/souravdas090300/das-js-app
- Live Demo: https://souravdas090300.github.io/das-js-app
.png)
Main application interface showing the Pokémon grid layout with search functionality
.png)
Interactive modal displaying detailed Pokémon information including stats and abilities
.png)
Mobile-responsive design showcasing the application's adaptability across different screen sizes
- HTML5: Semantic markup and structure
- CSS3: Styling with modern CSS features and animations
- JavaScript (ES6+): Core functionality and API interactions
- Bootstrap 5: Responsive design framework
- PokéAPI: RESTful API for Pokémon data
- Animate.css: CSS animation library
das-js-app/
├── index.html # Main HTML file
├── favicon.png # Application favicon
├── css/ # Stylesheets directory
├── src/
│ ├── scripts.js # Main JavaScript functionality
│ └── styles.css # Custom CSS styles
├── dist/ # Minified/compiled assets
└── README.md # Project documentation
- Modular JavaScript architecture using IIFE (Immediately Invoked Function Expression)
- API integration with error handling
- Pagination system for better performance
- Dynamic DOM manipulation
- Search: Real-time search functionality
- Pagination: Efficient data loading with 30 items per page
- Modal Details: Interactive modal windows displaying:
- Pokémon images
- Stats (HP, Attack, Defense, etc.)
- Abilities and types
- Physical characteristics
- Mobile-first approach
- Bootstrap grid system
- Accessible UI components
- Cross-browser compatibility
Frontend Architecture: Implemented a modular JavaScript structure focusing on separation of concerns, with dedicated modules for API interactions, DOM manipulation, and user interface management.
API Integration: Utilized the PokéAPI to fetch real-time Pokémon data, implementing proper error handling and loading states to ensure a smooth user experience.
Performance Optimization: Implemented pagination to reduce initial load times and improve application performance when dealing with large datasets.
- API Integration: Gained experience working with RESTful APIs and handling asynchronous JavaScript operations
- Modular Programming: Implemented clean, maintainable code structure using JavaScript modules
- Responsive Design: Created a mobile-friendly interface using Bootstrap and custom CSS
- User Experience: Focused on creating intuitive interactions and smooth user flows
-
Clone the repository:
git clone https://github.com/souravdas090300/das-js-app.git
-
Navigate to project directory:
cd das-js-app -
Open in browser: Simply open
index.htmlin your preferred web browser, or use a local server:# Using Python python -m http.server 8000 # Using Node.js (if you have live-server installed) live-server
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
This project is open source and available under the MIT License.
- PokéAPI for providing the comprehensive Pokémon data
- Bootstrap for the responsive design framework
- Animate.css for smooth animations