Build an infinite scrolling list of Pokémon
![Build an infinite scrolling list of Pokémon](/content/images/size/w960/2024/07/scrolling-down.png)
Start by displaying a list of 12 Pokémon.
For each Pokémon, show its name and photo.
As the user scrolls, when he reaches the end of the currently visible items, show a "Loading..." text message and start loading the next page.
You can use the official Poke API to fetch the Pokémon: https://pokeapi.co/
For the images, I suggest using pokemondb, as I found the sprites provided by the official API to be of too low resolution.
const name = 'bulbasaur';
`https://img.pokemondb.net/artwork/${name}.jpg`;
(thanks to this Stack Overflow answer for the tip!)
For detecting when the user reached the end of the page, I suggest using the Intersection Observer API.
When you're ready to check your work, take a look at the official solution.
Member discussion