In this project, you'll be creating a frontend that graphically displays Pokémon information (similiar to a Pokédex). To fetch all the necessary information, you'll be working with the PokeAPI.
- Fork this repository, set the owner to BoG-Dev-Bootcamp-F23, and name it
project1-f23-yourname - Clone the repository onto your local computer
- Navigate to your new project folder and create your HTML, CSS, and JS files
- Create a 0.5-3 minute video walkthrough of your project (include the video link in the README of your project repo)
- Push all your changes to the remote repository. Make sure that the owner is BoG-Dev-Bootcamp-F23 so that we can see the repository! (if you forgot to do this, you can alternatively message Nathan on Slack with the link to your repo)
- Due Date: 10-5-2023
- Must use HTML, CSS, and JS
- Must contain the specified frontend elements
- Must use the free PokeAPI
- Should have at least 20 commits (though not required)
What the end result should look like:
You should try to follow the mockups as closely as possible (including the alignments). The Figma designs can be found here.
This project is designed to replicate real Bits of Good developer work. Typically, developers are given mockups by designers and are tasked with implementing them in code.
You will be pinging the PokeAPI using fetch(). Refer to the PokeAPI docs for more details about endpoints and JSON response formats. You can also view your requests at https://pokeapi.co/.
These buttons control the ID number of the Pokémon you are currently displaying. Whenever a user clicks on these buttons, the ID number should be incremented/decremented, and the other components should be updated accordingly (to achive this, you'd want to create an HTTP request every time the buttons are clicked to fetch the data for the next Pokémon).
Note: be careful about querying an id number that doesn't exist (e.g. 0).
These should update automatically as a user clicks on the arrow buttons. All of the necessary data is available in the response to the HTTP request.
For however many types a Pokémon has, display all of them horizontally. Each type should correspond with a different color. The official hex colors for each type are:
The color of the buttons should differ based on whichever one is currently active (i.e. if the info is showing, then the info button should be green, etc.). Clicking each button should change whether the info or moves button is showing.
The selected setting should remain the same when the user switches between Pokémon using the arrows.
This panel should change accordingly as the user switches between Pokémon. Make sure the units are being displayed correctly — for example, the height stat is returned as an integer from the API but the units are in 0.1m.
Like the info panel, the moves should change accordingly as the user switches between Pokémon. This panel should simply list the names of all the Pokémon's moves.