Remember to take your time and work through each question diligently! Test your code, make sure it works, and try to find ways to improve. Once you are happy and satisfied with your code, upload it to Github, then turn in your Github link at the bottom of the page!
Don't forget. Make sure this assignment is in it's own repository. Not mixed in with others!
In this PokeAPI Integration project, you'll develop a web application that seamlessly integrates with the PokeAPI, providing users with an immersive experience into the world of Pokémon. Leveraging HTML, Bootstrap, CSS, and Asychronous JavaScript, you'll create a dynamic and interactive platform for exploring Pokémon data and information.
Project Requirements
Homepage:
Design a visually appealing landing page with Bootstrap components and custom CSS styles.
Implement responsive design principles to ensure compatibility across various devices and screen sizes.
Pokémon Search Page:
Create a search page where users can enter a Pokémon's name or ID to retrieve relevant information.
Utilize JavaScript asynchronous functions to fetch data from the PokeAPI and dynamically update the webpage content based on user input.
Pokémon Details Page:
Develop a details page that displays comprehensive information about a specific Pokémon, including its abilities, types, stats, and image.
You can do this with cards, carousels, tables, and/or accordions with Bootstrap.
Apply CSS styling to enhance the presentation of Pokémon details and ensure readability.
Pokémon Team Builder (Bonus):
Create a team builder feature that allows users to assemble and customize their Pokémon teams.
Implement drag-and-drop functionality or interactive forms for adding and removing Pokémon from the team.
Pokémon Battle Simulator (Bonus):
Develop a Pokémon battle simulator that simulates Pokémon battles based on user-selected teams and moves.
Utilize JavaScript to simulate battle mechanics, calculate damage, and determine battle outcomes.
GitHub Repository:
Create a GitHub repository for the project and commit code regularly.
Maintain a clean and interactive
README.md
file in the GitHub repository, providing clear instructions on how to run the application and explanations of its features.Include a link to the GitHub repository in the project documentation.
Submission
Upon completing the project, submit your code and video, including all source code files, and the
README.md
file in your GitHub repository to your instructor or designated platform.
Project Tips
Utilize Bootstrap Components: Leverage Bootstrap's built-in components for rapid prototyping and responsive layout design. Familiarize yourself with Bootstrap classes and utilities to create visually appealing landing pages effortlessly.
Customize CSS Styles: While Bootstrap provides a solid foundation, don't hesitate to customize CSS styles to match the project's aesthetic and branding requirements. Experiment with custom colors, fonts, and spacing to create a unique look and feel for the homepage.
Dynamic Content with JavaScript: For the Pokémon search page, utilize JavaScript to fetch data from the PokeAPI dynamically. Implement event listeners to capture user input and update the webpage content in real-time, providing a smooth and interactive search experience.
Enhance Pokémon Details Page: Apply CSS styling to enhance the presentation of Pokémon details on the details page. Use CSS to format text, images, and layout elements for improved readability and visual appeal
GitHub Repository and Version Control: Establish a GitHub repository for your project and commit code regularly. Utilize version control to keep track of changes and collaborate effectively with team members if applicable.
Effective Communication: Consider creating a video presentation or explanation of your Personal Portfolio. This can be an excellent opportunity to showcase your understanding of technical concepts and project details in a concise and understandable manner.