1 00:00:00,090 --> 00:00:04,040 Great job on making it this far into the course, shall we add some buttons? 2 00:00:04,060 --> 00:00:05,460 That's what we're going to do in this lesson. 3 00:00:05,460 --> 00:00:12,090 We're going to add in and briefly, in the last one we saw that we can add page tokens and page tokens 4 00:00:12,090 --> 00:00:15,970 represent the different pages so you can go through all the different pages. 5 00:00:16,080 --> 00:00:20,250 So one page to the next page to the next page and you can see the results are going to be changing. 6 00:00:20,340 --> 00:00:23,250 So you can have different results depending on what page are on. 7 00:00:23,460 --> 00:00:26,210 And that's going to produce different results back from the API. 8 00:00:26,400 --> 00:00:28,020 And there's a lot of pages. 9 00:00:28,230 --> 00:00:29,670 So there's total pages. 10 00:00:29,910 --> 00:00:35,100 There's what's that number one million while a lot of pages that are being returned back. 11 00:00:35,130 --> 00:00:36,600 So a lot of videos with test. 12 00:00:37,050 --> 00:00:38,640 So let's create these buttons. 13 00:00:38,790 --> 00:00:41,010 And of course, this is JavaScript. 14 00:00:41,020 --> 00:00:43,830 So we're going to do this dynamically as possible. 15 00:00:44,160 --> 00:00:47,280 So creating a button, we can create button one. 16 00:00:47,490 --> 00:00:55,980 Or how about we give it a name where we can call next button button next and call this button next document 17 00:00:56,940 --> 00:00:58,770 create element. 18 00:00:59,220 --> 00:01:01,490 And the element that we're creating is a button. 19 00:01:01,650 --> 00:01:03,720 And so we want to be able to click this button. 20 00:01:03,990 --> 00:01:08,370 But by default, I want this button to have an attribute of disabled. 21 00:01:08,730 --> 00:01:13,710 So I will select the button button next and set attribute. 22 00:01:14,160 --> 00:01:20,010 And the attribute that we're setting is going to be disabled and we're sending that to a boolean value 23 00:01:20,010 --> 00:01:22,830 of true and then adding it into the page. 24 00:01:22,890 --> 00:01:28,880 So we'll do put append child and the child that we're going to Pender's the next button. 25 00:01:29,250 --> 00:01:31,040 So we've got our next button there. 26 00:01:31,080 --> 00:01:33,560 We should also put some text in there, of course. 27 00:01:33,900 --> 00:01:36,890 So next and give it text content. 28 00:01:37,350 --> 00:01:40,210 So there's a next button and we'll do the same thing for previous. 29 00:01:40,560 --> 00:01:49,530 So I have two buttons, one next one previous button, previous and button previous will also be disabled 30 00:01:49,530 --> 00:01:50,160 to be true. 31 00:01:50,490 --> 00:01:53,250 And also it will have actually different text. 32 00:01:53,250 --> 00:01:55,320 It's not going to be next. 33 00:01:55,320 --> 00:01:56,190 It'll be previous. 34 00:01:57,870 --> 00:02:03,360 And I'll update the order of these so that we have by default, we have the previous and then we're 35 00:02:03,360 --> 00:02:04,170 going to have the next. 36 00:02:04,350 --> 00:02:05,040 So there we go. 37 00:02:05,040 --> 00:02:06,720 We've got previous and next. 38 00:02:07,020 --> 00:02:12,510 So I also want to add in some of that listeners to these buttons where when we click the button, we 39 00:02:12,510 --> 00:02:15,880 want to initiate the search and you can do that as well. 40 00:02:15,900 --> 00:02:21,600 So instead of just having query selector button after we've created and added the buttons on the page, 41 00:02:21,750 --> 00:02:28,980 how about we call it the buttons, buttons and update this to query selector all so all of them can 42 00:02:28,980 --> 00:02:31,220 get the same of that listener attached to it. 43 00:02:31,470 --> 00:02:37,250 So that means that of course we have to loop through buttons and then attach the listener to the button. 44 00:02:37,530 --> 00:02:42,720 So have for each and for each one of the buttons within that node list. 45 00:02:42,960 --> 00:02:48,890 We've got our item or we can just call it button and then adding an event listener for buttons. 46 00:02:48,890 --> 00:02:51,480 So Button and this actually turns out to be the same thing. 47 00:02:51,960 --> 00:02:53,370 So button search. 48 00:02:53,520 --> 00:02:59,460 So that means that any button that gets clicked is going to be having the search function added to it. 49 00:02:59,580 --> 00:03:01,890 So search will still work the same way. 50 00:03:02,040 --> 00:03:06,330 There's no difference in how the search is treated, but each one of these buttons as well is going 51 00:03:06,330 --> 00:03:11,320 to have that same event listener added to it because we've added it to all the elements that have button. 52 00:03:11,580 --> 00:03:16,440 Also, one of the things that I did want to update before we conclude this lesson and then work through 53 00:03:16,590 --> 00:03:21,780 adding in the next, we're going to do a second part to this lesson where we're going to add in the 54 00:03:21,780 --> 00:03:25,950 tokens into the object and then utilize that within the search. 55 00:03:25,950 --> 00:03:27,380 We're going to look for that within the search. 56 00:03:27,780 --> 00:03:32,370 So first thing that we want it to do as well is we want to update that output because this doesn't look 57 00:03:32,370 --> 00:03:37,320 nice and neat anymore where we've got the buttons and technically they should be sitting beside the 58 00:03:37,320 --> 00:03:37,940 search button. 59 00:03:38,250 --> 00:03:43,800 So let's take a look at our code and you can see that we've got output down here or another element 60 00:03:43,800 --> 00:03:46,380 there that's going to have the previous and the next. 61 00:03:46,590 --> 00:03:52,080 So instead of adding it and appending it to output, I'm going to add the previous next. 62 00:03:52,080 --> 00:03:57,300 And of course, you can style this probably a lot better afterwards, but this is just to have the buttons 63 00:03:57,300 --> 00:03:58,740 available and functional. 64 00:03:59,040 --> 00:04:05,730 So instead of adding it to output, I can add it to document body and we'll add this one as well to 65 00:04:05,730 --> 00:04:10,100 document body so that when we do the search, the next and previous are at the bottom there. 66 00:04:10,290 --> 00:04:15,240 So it's ideal because if the user wants to move next, they'll go through all of these and move next 67 00:04:15,240 --> 00:04:16,890 and previous if it is available. 68 00:04:17,750 --> 00:04:23,280 So coming up, we need to attach the tokens that we saw over here. 69 00:04:23,450 --> 00:04:29,360 We need to attach these different page tokens into previous and next and enable and disable them as 70 00:04:29,360 --> 00:04:29,750 needed. 71 00:04:30,200 --> 00:04:34,130 So that's coming up in the next lesson, part two to adding next and previous.