Great job on making it this far into the course, shall we add some buttons?
That's what we're going to do in this lesson.
We're going to add in and briefly, in the last one we saw that we can add page tokens and page tokens
represent the different pages so you can go through all the different pages.
So one page to the next page to the next page and you can see the results are going to be changing.
So you can have different results depending on what page are on.
And that's going to produce different results back from the API.
And there's a lot of pages.
So there's total pages.
There's what's that number one million while a lot of pages that are being returned back.
So a lot of videos with test.
So let's create these buttons.
And of course, this is JavaScript.
So we're going to do this dynamically as possible.
So creating a button, we can create button one.
Or how about we give it a name where we can call next button button next and call this button next document
create element.
And the element that we're creating is a button.
And so we want to be able to click this button.
But by default, I want this button to have an attribute of disabled.
So I will select the button button next and set attribute.
And the attribute that we're setting is going to be disabled and we're sending that to a boolean value
of true and then adding it into the page.
So we'll do put append child and the child that we're going to Pender's the next button.
So we've got our next button there.
We should also put some text in there, of course.
So next and give it text content.
So there's a next button and we'll do the same thing for previous.
So I have two buttons, one next one previous button, previous and button previous will also be disabled
to be true.
And also it will have actually different text.
It's not going to be next.
It'll be previous.
And I'll update the order of these so that we have by default, we have the previous and then we're
going to have the next.
So there we go.
We've got previous and next.
So I also want to add in some of that listeners to these buttons where when we click the button, we
want to initiate the search and you can do that as well.
So instead of just having query selector button after we've created and added the buttons on the page,
how about we call it the buttons, buttons and update this to query selector all so all of them can
get the same of that listener attached to it.
So that means that of course we have to loop through buttons and then attach the listener to the button.
So have for each and for each one of the buttons within that node list.
We've got our item or we can just call it button and then adding an event listener for buttons.
So Button and this actually turns out to be the same thing.
So button search.
So that means that any button that gets clicked is going to be having the search function added to it.
So search will still work the same way.
There's no difference in how the search is treated, but each one of these buttons as well is going
to have that same event listener added to it because we've added it to all the elements that have button.
Also, one of the things that I did want to update before we conclude this lesson and then work through
adding in the next, we're going to do a second part to this lesson where we're going to add in the
tokens into the object and then utilize that within the search.
We're going to look for that within the search.
So first thing that we want it to do as well is we want to update that output because this doesn't look
nice and neat anymore where we've got the buttons and technically they should be sitting beside the
search button.
So let's take a look at our code and you can see that we've got output down here or another element
there that's going to have the previous and the next.
So instead of adding it and appending it to output, I'm going to add the previous next.
And of course, you can style this probably a lot better afterwards, but this is just to have the buttons
available and functional.
So instead of adding it to output, I can add it to document body and we'll add this one as well to
document body so that when we do the search, the next and previous are at the bottom there.
So it's ideal because if the user wants to move next, they'll go through all of these and move next
and previous if it is available.
So coming up, we need to attach the tokens that we saw over here.
We need to attach these different page tokens into previous and next and enable and disable them as
needed.
So that's coming up in the next lesson, part two to adding next and previous.