Day 27: Making A PokeDex: Day 2

Lesson 1: PokeDex 5

There are over 1,000 Pokemon, fetching them all at once isn't a good idea, so we're getting them 20 at a time. This is what the extra URL parameters are doing for us with our initial PokeAPI fetch.

1fetch(`${baseAPI}pokemon?limit=20&offset=0`);

This says to get now more than 20 and start from the first (0th) Pokemon.

To get the next 20 we would change this to:

1fetch(`${baseAPI}pokemon?limit=20&offset=20`);

We always get 20 but we move the offset. This is called pagination and is a very common way to display large sets of data in a more sensible manner.

Currently we can imagine that we are viewing page 1, then the next 20 would be page 2, the next 20 page 3 etc.

So if we store a number for the page we are on then we can set offset to 20 * page where page starts at 0 and increases by one each time.

Add this near the top of your JavaScript, before we create addCard:

1let page = 0;

And then change the fetch call to this:

1fetch(`${baseAPI}pokemon?limit=20&offset=${page * 20}`);

Now we can create an event handler so that when we click "Show More >", the next 20 are added to the list:

1const nextPage = () => {
2  page++;
3  getPokemonList();
4};

You would have thought this would be enough to make it work. But if you click "Show More >" you'll see nothing happens!

Well, not quite. If you check the Element tab of your browser developer tools, you'll see that divs are being added but they aren't showing. Can you think why?

Well, once we fetch the Pokemon the first time through we hide the placeholder card, and then we don't re-show it!

So, we need to remove the hidden class from the card first, this way it shows the loading state and means when we copy it, it doesn't have the hidden class.

Add this line to the top of you're nextPage function:

1placeholder.classList.remove("hidden");

And now it works!

It happens pretty quickly though so you may never see the spinner. If you do see it you may notice that it's not in the best place, it's still at the top of the list!

That's not the best place for it.

It should be at the bottom of the list since that's where we will be adding new Pokemon. To do that we actually need to remove it from the DOM and re-add it. Like this:

1const showAndMovePlaceholder = () => {
2  placeholder.classList.remove("hidden");
3  placeholder.remove();
4  flexContainer.appendChild(placeholder);
5};

Then add this line to the top of nextPage:

1showAndMovePlaceholder();

Now, you might still miss seeing it. Let's slow down your internet briefly.

Go to you developer tools and select the Network tab, then where it says "No throttling` click it and select "Fast 3G". You should also click "Disable Cache" just next to it.

Now your internet (for this page) will be much slower.

Make sure to undo this, it will slow down any page with developer tools open on. I once left it on for a week and wondered why my local developer environment was so slow 🤦‍♂️

Finally let's get the numbers correct at the bottom of the page.

Add this to the top:

1const totalPokemon = document.getElementById("total-pokemon");

Then this at the end of nextPage:

1totalPokemon.innerText = (page + 1) * 20;