You're about to write AJAX-backed JavaScript that will access an API and loop through/display data using setInterval.
You can make use of the Pokemon API, or if pokemon isn't your thing, you may find and substitute one of your choice. Your task is to use your JQuery skills to fetch a pokemon from the API and display an image and information about it.
- Fork and clone this repository
- Run
npm installto install dependenciesnpm start- start the BrowserSync servernpm run lint:css- lint CSSnpm run lint:js- lint JS
NOTE: You won't be able to run AJAX requests from a file, so make sure you complete this step! See this Stack Overflow article for more explanation as to why.
- Implement a jQuery AJAX request to the Pokemon API. Make sure that the data can be printed to the Chrome console before continuing.
- Before starting, try going to
https://pokeapi.co/api/v2/pokemon/1. This gets you an individual pokemon with the id of 1 (Bulbasaur). Likewise,https://pokeapi.co/api/v2/pokemon/2will get you the pokemon with the id of 2 (Ivysaur). - There are 150 original pokemon - gotta display 'em all?
- Use a counter to increment the pokemon id for each call to the API
- Once the data has been received from the API, list the name, image, and one other piece of info of your choice (e.g., a list of abilities) for each pokemon you display.
Make a slideshow of pokemon appear on the page.
- Go to https://pokeapi.co/api/v2/pokemon/?limit=150 and use this info to create a full list of all original pokemon names in a sidebar.
- Add an animation for transitioning
- Add a stop button with
clearInterval - If you have a list of pokemon on the sidebar, enable clicking on them to skip to that particular pokemon.
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].