1 00:00:00,420 --> 00:00:05,670 In this lesson, we're going to be wrapping up our data driven, dynamic web application that connects 2 00:00:05,670 --> 00:00:11,570 to the Star Wars API loads, the categories for the endpoints onto the screen. 3 00:00:12,180 --> 00:00:18,600 And when those get clicked, it's going to load the details, the first 10 items from their API data 4 00:00:18,840 --> 00:00:20,160 and output them to the page. 5 00:00:20,190 --> 00:00:24,130 So these are all clickable and then they're also for the different pages. 6 00:00:24,420 --> 00:00:28,260 So in this case, for Starship's, it looks like we've got six separate pages. 7 00:00:28,410 --> 00:00:34,890 We can move to the next page or we can select one of the pages and load the content from the end point 8 00:00:34,890 --> 00:00:35,920 of those pages. 9 00:00:36,390 --> 00:00:39,770 So we're setting all of this up and then, of course, also adding some styling. 10 00:00:39,990 --> 00:00:45,600 Once you select any of the items here from the list, it's going to output the contents contained for 11 00:00:45,600 --> 00:00:49,400 that item and give you the details. 12 00:00:49,830 --> 00:00:54,860 And also, if it is an array, we're able to detect that. 13 00:00:54,870 --> 00:00:58,300 And right now what we're doing is we're just strengthening the contents of the array. 14 00:00:58,530 --> 00:01:00,360 So these are additional endpoints. 15 00:01:00,540 --> 00:01:06,510 So you could potentially load these and add these as something that can be clicked and then those can 16 00:01:06,510 --> 00:01:07,640 be loaded as well. 17 00:01:09,920 --> 00:01:18,500 There's quite a bit that you can do with this API, and it's got a lot of rich data as well as multiple 18 00:01:18,500 --> 00:01:25,850 pages, and you can create a fully interactive Web application with just really minimal HTML code and 19 00:01:25,850 --> 00:01:35,720 all data driven and dynamically generated from the JSON data and then apply the styling as needed, 20 00:01:35,720 --> 00:01:36,590 as necessary. 21 00:01:38,540 --> 00:01:45,200 At this point, you should have your application loading some of the data and being able to make selections 22 00:01:45,200 --> 00:01:46,500 and outputting it on the page. 23 00:01:46,820 --> 00:01:53,780 So there are some additional options that we want it to still load in and some of the results will return 24 00:01:53,780 --> 00:01:55,550 back a number of items. 25 00:01:55,850 --> 00:01:57,990 So in this case, we've got 39. 26 00:01:58,130 --> 00:02:00,050 So we're only showing the first 10. 27 00:02:00,290 --> 00:02:04,940 So what to do is add options for the user can flip through to the different pages. 28 00:02:05,210 --> 00:02:09,480 And there are, as is an indication of how to move to the next page. 29 00:02:09,500 --> 00:02:13,130 So it does have the euro end point here for the next page. 30 00:02:13,370 --> 00:02:19,610 In addition, it tells you what the number count here is and the results so that you can move through 31 00:02:19,640 --> 00:02:22,030 the pages as needed with the results. 32 00:02:22,030 --> 00:02:29,450 So clicking on those different endpoints to generate the data and we are outputting the content on the 33 00:02:29,450 --> 00:02:29,860 page. 34 00:02:29,870 --> 00:02:36,500 So we do have a function that does that where we're building the page and we're looping through the 35 00:02:36,500 --> 00:02:37,820 data from the page. 36 00:02:38,120 --> 00:02:44,870 So we've got a function that's get JSON and then that automatically builds the page and the get JSON 37 00:02:45,200 --> 00:02:48,220 builds it according to the click event. 38 00:02:48,260 --> 00:02:55,820 So if we're clicked on any of those, so we should be able to pass in the next results and build the 39 00:02:55,820 --> 00:02:56,610 next page. 40 00:02:57,020 --> 00:02:57,980 So let's try that. 41 00:02:57,980 --> 00:03:00,460 And first, we're going to just add a next button. 42 00:03:00,830 --> 00:03:06,530 So as we're building the page within the data, we've got our next and a previous. 43 00:03:07,130 --> 00:03:11,950 So adding those options in and I'll just call it pages. 44 00:03:12,380 --> 00:03:20,780 So creating a document create elements and we're going to create a main div container and then add this 45 00:03:20,780 --> 00:03:22,610 div container to the output. 46 00:03:23,000 --> 00:03:33,640 So outputs append pages and then within pages, this is where we can add in the clickable options for 47 00:03:33,650 --> 00:03:34,130 next. 48 00:03:34,790 --> 00:03:40,170 So that's going to be right at the bottom of the screen and within pages. 49 00:03:41,030 --> 00:03:48,230 So first we need to check to see if the data has a value for previous and next. 50 00:03:48,860 --> 00:03:53,750 So let's load in and make sure that we get the property name proper. 51 00:03:53,770 --> 00:03:58,910 So if next exists, then we want to add in a button for next 52 00:04:01,660 --> 00:04:08,360 and give this creating a button, create elements and element that we're creating. 53 00:04:08,810 --> 00:04:10,580 So that's going to be our next button. 54 00:04:14,160 --> 00:04:18,240 Tax content is going to be next. 55 00:04:19,350 --> 00:04:26,970 So this will automatically go to the next page and if it's there, then we're going to load within pages, 56 00:04:27,510 --> 00:04:30,430 append the button to that we just created. 57 00:04:32,430 --> 00:04:34,620 So let's see if that loads to the page. 58 00:04:35,010 --> 00:04:36,510 So does load next. 59 00:04:37,590 --> 00:04:38,740 Does load next. 60 00:04:39,060 --> 00:04:45,960 So we want whenever this button gets clicked that it's going to request to get Jason your URL. 61 00:04:45,960 --> 00:04:47,400 And so we have to build the next page. 62 00:04:50,580 --> 00:04:52,350 So for button to. 63 00:04:55,310 --> 00:05:05,750 Ad of that listener and that listener is going to be listening for a click and the same way that we 64 00:05:06,170 --> 00:05:12,140 had the clicker, that's work here where we're doing the get data, we need to structure the button 65 00:05:12,140 --> 00:05:12,770 the same way. 66 00:05:13,340 --> 00:05:15,730 So it needs to contain your URL. 67 00:05:16,550 --> 00:05:22,640 And this is going to be button to your URLs and the contents of button two. 68 00:05:22,820 --> 00:05:23,750 So there you are. 69 00:05:23,750 --> 00:05:26,900 All is going to be whatever the value of data next is. 70 00:05:30,410 --> 00:05:38,780 And this way, we don't need to have any additional structure, it will just load the next page and 71 00:05:38,780 --> 00:05:40,420 let's just see what happened here. 72 00:05:41,120 --> 00:05:42,880 So it looks like we threw an error. 73 00:05:42,920 --> 00:05:49,070 So let's do some troubleshooting and we'll consider log out the results of the next. 74 00:05:51,410 --> 00:05:58,170 So instead of trying to load the button, so load the values and let's clear the console hit next. 75 00:05:58,430 --> 00:06:06,140 So that is that is the right you, Earl, let's double check within the console and see what we've got 76 00:06:06,140 --> 00:06:07,970 for data that's being returned back. 77 00:06:08,360 --> 00:06:10,890 We might have to make a separate function for this. 78 00:06:11,450 --> 00:06:16,940 Ideally, we can reuse it if we've structured it the same way. 79 00:06:17,780 --> 00:06:21,310 But there are some cases where you just need to build a separate function for it. 80 00:06:21,740 --> 00:06:23,540 So let's try that one more time. 81 00:06:24,320 --> 00:06:27,320 And this time it actually it did load the next page. 82 00:06:27,920 --> 00:06:29,900 So see the data that it's loading. 83 00:06:31,220 --> 00:06:34,850 So it's loading page two and there's also previous pages. 84 00:06:35,510 --> 00:06:44,170 So we'll leave that and just in case we throw any other errors and then we can update and fix it afterwards. 85 00:06:44,540 --> 00:06:48,680 So let's check to see if data has a version for previous. 86 00:06:50,450 --> 00:06:53,900 And if it does, then the button is going to say previous 87 00:06:56,360 --> 00:07:00,860 and we can still use button two because that's within the scope. 88 00:07:02,240 --> 00:07:07,670 So append it to the pages and get the contents of button previous. 89 00:07:08,180 --> 00:07:13,900 And we're loading over the URL that we're going to be using as the button previous value. 90 00:07:15,050 --> 00:07:19,340 So let's see if we can move through the pages and go to next. 91 00:07:19,700 --> 00:07:25,550 And now we've got a previous page and let's check to see if we can move back to the first page. 92 00:07:25,830 --> 00:07:28,040 And then the previous also disappears. 93 00:07:28,430 --> 00:07:31,760 So it doesn't actually output what page we're currently on. 94 00:07:32,420 --> 00:07:36,650 So you could also update the page and let people know what page they're currently on. 95 00:07:37,220 --> 00:07:42,800 So we're also going to be creating a list of the possible pages using that account option. 96 00:07:43,100 --> 00:07:44,770 So we're going to divide it by ten. 97 00:07:45,290 --> 00:07:51,920 And that way we can list out a bunch of buttons there that the user can click to quickly jump to the 98 00:07:51,920 --> 00:07:52,700 other pages. 99 00:07:54,440 --> 00:07:56,070 So let's do that as well. 100 00:07:56,450 --> 00:08:01,310 Will set up a variable and get the total. 101 00:08:03,190 --> 00:08:10,360 And this one, we're taking the data count and then we're dividing data count by 10. 102 00:08:13,890 --> 00:08:21,690 And using math, sealing or rounding it up, so that's going to give us the total number of pages and 103 00:08:21,690 --> 00:08:30,850 now we can create a for loop and looping through all is less than total and then increment I plus one. 104 00:08:31,320 --> 00:08:34,520 Now let's add the page buttons so we can do it. 105 00:08:34,530 --> 00:08:42,300 The structure is similar to what we have here where we're creating the buttons and then the button value 106 00:08:42,300 --> 00:08:47,070 is going to be whatever E-Plus one is and then appending it to pages. 107 00:08:47,070 --> 00:08:50,850 So that should create the number of buttons for each one of the pages. 108 00:08:50,880 --> 00:08:55,570 Let's see what we've got here at the bottom and then next, let's make them clickable. 109 00:08:56,100 --> 00:08:58,590 So here we have to construct what the you are. 110 00:08:59,160 --> 00:09:05,340 So let's take a look and see how what we've got for next and as well for previous. 111 00:09:05,850 --> 00:09:09,210 And that's just equaling page, whatever the value is. 112 00:09:09,420 --> 00:09:16,050 So we want to ideally have it to whatever the value of it is, and that should produce whatever page 113 00:09:16,050 --> 00:09:17,190 value we want to go to. 114 00:09:17,910 --> 00:09:26,040 So we want to slice the current you URL that we made the request to buy the question by the question 115 00:09:26,040 --> 00:09:32,610 mark and then hardcourt in the page equals whatever the value of is, the easiest way to track whatever 116 00:09:32,610 --> 00:09:36,600 the current endpoint is, is just going to be to create a global variable. 117 00:09:37,800 --> 00:09:43,010 And we'll just call it endpoint and we'll start by setting endpoint to be just blank. 118 00:09:43,470 --> 00:09:49,140 And then whenever it makes fetch request, we can update the value of the endpoint. 119 00:09:49,500 --> 00:09:57,570 So whenever it loads the content and updates output, we'll update the value of endpoint to be this 120 00:09:57,570 --> 00:09:58,560 as the endpoint. 121 00:09:59,310 --> 00:10:04,920 And whenever we get a URL, that's what we're going to set as the endpoint. 122 00:10:06,580 --> 00:10:13,830 So this way, we've got the end points dynamically changing and we're just outputting it to the page. 123 00:10:14,620 --> 00:10:20,280 So if we go to next on it, we're updating that endpoint value. 124 00:10:21,250 --> 00:10:24,790 So from that standpoint, we can slice. 125 00:10:26,880 --> 00:10:33,480 According to where the question mark is, and that will provide us a clean, you are all that we can 126 00:10:33,480 --> 00:10:34,530 make the request to. 127 00:10:36,660 --> 00:10:49,620 So let's update the buttons with that value, so creating a variable, clean, clean euro and that will 128 00:10:49,620 --> 00:10:50,760 be whatever endpoint. 129 00:10:51,780 --> 00:11:04,650 So using the string method split, this will split the contents of the URL into an array and using the 130 00:11:04,650 --> 00:11:05,760 array value. 131 00:11:05,910 --> 00:11:08,480 That's where we can start and set the page value. 132 00:11:08,880 --> 00:11:17,130 So the clean up URL will help put that into the console and then the actual endpoint. 133 00:11:19,640 --> 00:11:22,460 Is going to be the value of clean you. 134 00:11:24,560 --> 00:11:31,970 And actually, let's create that temp URL is going to be whatever the value of clean your URL is and 135 00:11:31,970 --> 00:11:33,420 the first item within the index. 136 00:11:33,710 --> 00:11:38,100 So even if it doesn't have a question mark, it'll just split and return back the first item. 137 00:11:38,120 --> 00:11:39,230 So there's going to be no split. 138 00:11:39,680 --> 00:11:44,120 So either way, we're going to get a path to the end point. 139 00:11:44,720 --> 00:11:55,130 And then what we need to do is we need to just add in the contents of page to do page and then whatever 140 00:11:55,130 --> 00:11:57,000 the value of our dynamic pages. 141 00:11:57,260 --> 00:11:59,690 So in this case, it's going to be I plus one. 142 00:12:02,900 --> 00:12:13,640 So let's add that in, and instead of the euro, we're just going to add in the temporal here whenever 143 00:12:13,640 --> 00:12:14,530 the button gets clicked. 144 00:12:15,500 --> 00:12:16,800 So let's see how that looks. 145 00:12:18,770 --> 00:12:20,570 So that's our end points. 146 00:12:21,140 --> 00:12:23,850 If we go next, that's going to be our end point. 147 00:12:24,410 --> 00:12:31,760 And so if we click one of the buttons, we get a clean you URL. 148 00:12:33,630 --> 00:12:36,560 So there's quite a bit going on in the console here. 149 00:12:37,850 --> 00:12:44,000 So here we've got the split that we have where we're getting the clean URL and we're splitting it by 150 00:12:44,000 --> 00:12:44,470 whatever. 151 00:12:44,480 --> 00:12:45,790 Currently it's at page one. 152 00:12:46,280 --> 00:12:53,210 So we're just taking out the first path to the endpoint and removing out the page one and then dynamically 153 00:12:53,210 --> 00:12:55,820 adding in page one here afterwards. 154 00:12:58,010 --> 00:13:05,960 And this is an array, so if we get the first part of it, we're returning back just the clean URL and 155 00:13:05,960 --> 00:13:08,280 let's just double check to make sure it's working. 156 00:13:09,170 --> 00:13:10,940 So this goes to page three. 157 00:13:11,630 --> 00:13:13,160 This goes to page four. 158 00:13:13,820 --> 00:13:15,140 This goes to page one. 159 00:13:15,350 --> 00:13:17,720 Let's try the different options. 160 00:13:19,100 --> 00:13:21,020 And we've got all the way up to page six. 161 00:13:21,230 --> 00:13:23,030 And notice we don't have a next here. 162 00:13:23,030 --> 00:13:23,990 We just have previous. 163 00:13:26,280 --> 00:13:34,500 So now let's add some styling to this, to the pages as well, will center pages, pages. 164 00:13:36,160 --> 00:13:40,390 And use list out in a class. 165 00:13:42,490 --> 00:13:52,850 And I'll just give it a class of pages as well, and class of pages is going to have a width of four, 166 00:13:52,870 --> 00:13:53,950 do 80 percent. 167 00:13:57,140 --> 00:14:00,770 Will text, align and center align the text? 168 00:14:02,050 --> 00:14:04,660 Do a margin of auto. 169 00:14:08,990 --> 00:14:12,710 And then let's style the buttons within the pages. 170 00:14:15,790 --> 00:14:20,530 So for the button, make the font size. 171 00:14:22,150 --> 00:14:31,240 To see what that looks like, so there's our buttons there, nice big buttons, and maybe we also want 172 00:14:31,240 --> 00:14:40,030 to remove out the API part and just have whatever the path is that we can output planets here. 173 00:14:40,030 --> 00:14:47,410 So when we click planets, we know that the heading here should say planets, and even this one works. 174 00:14:47,590 --> 00:14:52,630 We don't have a previous and the next, but we do have the one if you want to change the order of previous 175 00:14:52,630 --> 00:14:53,140 and next. 176 00:14:53,620 --> 00:15:00,430 So in some cases, you see next afterwards we can do that as well, where you can select next and then 177 00:15:00,430 --> 00:15:03,160 just move where we're constructing the items. 178 00:15:03,670 --> 00:15:07,720 So that way we have next at the end and previous in the beginning. 179 00:15:07,870 --> 00:15:11,530 So it's up to you however you want to do the page options. 180 00:15:12,250 --> 00:15:13,840 Let's do a margin for these. 181 00:15:15,560 --> 00:15:22,910 Five picks, this is a little bit of spacing around it, also some padding and just slight padding for 182 00:15:22,910 --> 00:15:23,010 it. 183 00:15:23,870 --> 00:15:30,020 I'm also going to apply the box sizing, so I usually just like to add this to the border. 184 00:15:31,430 --> 00:15:37,490 So box sizing, set that to border box and also want to update showing the title here. 185 00:15:37,640 --> 00:15:40,490 And then we've got the value for planets. 186 00:15:41,300 --> 00:15:52,010 So let's update that where whenever the item gets clicked and we're adding in the button your property. 187 00:15:52,550 --> 00:15:54,800 So let's also do the button. 188 00:15:56,140 --> 00:16:02,440 And I'll call it my title, and you can give these object properties whatever, whatever property values 189 00:16:02,440 --> 00:16:05,110 you want, and I'm using dot notation, so it's the same thing. 190 00:16:05,120 --> 00:16:06,950 You can use the bracket notation as well. 191 00:16:07,810 --> 00:16:13,390 So my preference is usually the dot notation, and this is just another object that we're working with 192 00:16:13,390 --> 00:16:14,160 in JavaScript. 193 00:16:14,380 --> 00:16:19,000 So that's why we're able to dynamically add and these are the elements of the page where we're adding 194 00:16:19,000 --> 00:16:24,700 these properties onto so they're objects and we can add properties onto objects, just as we've seen 195 00:16:24,700 --> 00:16:25,690 with the JSON data. 196 00:16:26,530 --> 00:16:30,100 And the text content is going to be whatever we've got for the property. 197 00:16:30,640 --> 00:16:41,800 And also, let's do one more where we're have the and we'll just have the title so we can set the end 198 00:16:41,800 --> 00:16:43,840 title here. 199 00:16:43,840 --> 00:16:47,350 So we're not actually going to we're going to keep as a global value. 200 00:16:47,830 --> 00:16:50,830 So every time that title changes that we can update it. 201 00:16:51,070 --> 00:16:57,580 So that way we can use the title and it doesn't necessarily update whenever we're building new pages, 202 00:16:57,730 --> 00:16:59,740 but we have that information within the page. 203 00:17:01,780 --> 00:17:07,120 So let's update the TEMEL and that can have that and title. 204 00:17:08,970 --> 00:17:19,020 So having an H1 there and then also we'll do a small and have the end point within the small because 205 00:17:19,020 --> 00:17:22,920 we don't really want that to show, that's really just for our development work. 206 00:17:23,130 --> 00:17:26,610 And you can remove these if you do launch this as a live application. 207 00:17:27,810 --> 00:17:28,860 So let's see how that works. 208 00:17:28,890 --> 00:17:34,380 So now we've got the starship's and we also want to add in a class. 209 00:17:36,760 --> 00:17:51,670 So for the my title, we'll do a text transform, let's just capitalize it and do a font size and do 210 00:17:51,670 --> 00:17:53,020 a massive font size. 211 00:17:55,630 --> 00:18:05,980 And text a line of central line the contents, and actually we're going to central line within the output 212 00:18:05,990 --> 00:18:16,300 class, so we've got everything centered there and add a class of my title to it, to the H1. 213 00:18:17,380 --> 00:18:18,450 So see what that looks like. 214 00:18:19,300 --> 00:18:23,940 And so we're actually not using the option here. 215 00:18:25,150 --> 00:18:28,210 So there is no search within this API. 216 00:18:31,620 --> 00:18:33,480 So let's hide those from the page. 217 00:18:33,540 --> 00:18:42,870 I can do that with JavaScript or you can just remove them from your HTML so the input value and set 218 00:18:42,870 --> 00:18:55,650 the style to display and then just set it to display then and also for the button one, do the same. 219 00:18:56,700 --> 00:18:59,530 Just hide them off the page and go through. 220 00:18:59,550 --> 00:19:00,270 Test it out. 221 00:19:00,720 --> 00:19:04,430 So also we want to update how this content is being presented. 222 00:19:05,100 --> 00:19:12,510 So let's add in some styling into that as we're putting it onto the page so it looks more visible and 223 00:19:12,510 --> 00:19:17,810 usually just make sure that it's working properly and then apply the styling afterwards. 224 00:19:18,120 --> 00:19:23,090 So that's usually the best practice to make sure that everything is working as expected. 225 00:19:23,100 --> 00:19:26,640 And then you can apply styling to the page content as needed. 226 00:19:27,360 --> 00:19:29,190 So we've got all of these. 227 00:19:29,190 --> 00:19:35,310 We click it so we should output the property name in a larger format. 228 00:19:37,360 --> 00:19:41,500 And then the value on the right hand side, that can just stay as regular text. 229 00:19:42,310 --> 00:19:43,450 So let's add in. 230 00:19:46,690 --> 00:19:57,280 And I just call it big text and set the font size to this and where we're outputting that content and 231 00:19:57,280 --> 00:19:58,930 also let's update the board. 232 00:20:02,520 --> 00:20:05,670 So update the font weight and we'll sell it to Bould. 233 00:20:08,790 --> 00:20:17,190 And now let's go back into the JavaScript and where we're adding and outputting the page content, so 234 00:20:17,190 --> 00:20:18,600 we've got the show item. 235 00:20:22,220 --> 00:20:33,050 For the property itself, we can wrap it with a span and within the span set that class to the one that 236 00:20:33,050 --> 00:20:33,800 we just created. 237 00:20:35,620 --> 00:20:40,810 And let's close off the spin and we'll see how that looks. 238 00:20:43,640 --> 00:20:46,820 Stands out more, let's also capitalize it. 239 00:20:48,090 --> 00:20:51,450 Text transform and capitalize on. 240 00:20:54,770 --> 00:20:59,330 Typically, when it's coming from the JSON data, it's not going to be capitalized, so it's one of 241 00:20:59,360 --> 00:21:04,720 the things that it's good to add in and it's well, we also have the underscores. 242 00:21:05,300 --> 00:21:12,020 So in order to remove it, the underscores, as it was from the JSON data, you might want to update 243 00:21:12,020 --> 00:21:16,940 whatever the property value is and do a temporary value. 244 00:21:19,980 --> 00:21:29,040 So we'll do a proper temp and this is the one that we can actually output and that will come from the 245 00:21:29,040 --> 00:21:31,680 property bubble to replace. 246 00:21:34,330 --> 00:21:40,360 So replacing out any of the underscores and just replacing it with a space. 247 00:21:43,560 --> 00:21:44,790 So let's see what we've got now. 248 00:21:46,200 --> 00:21:53,130 So now we've got this we've got the space there and just click through, make sure things are working 249 00:21:53,220 --> 00:21:56,530 as expected, apply some styling as needed. 250 00:21:56,550 --> 00:21:59,850 I'm actually going to play a little bit more styling around the buttons. 251 00:22:02,040 --> 00:22:09,210 So a little bit more margin around those and also we'll do a border radius, so to round those more. 252 00:22:13,010 --> 00:22:14,030 See what that looks like? 253 00:22:17,300 --> 00:22:19,970 And this is whatever your preferences on the buttons. 254 00:22:21,570 --> 00:22:27,540 And I want to touch more padding on it, and I'm also going to decrease the font size because they're 255 00:22:27,540 --> 00:22:28,350 awfully large. 256 00:22:31,360 --> 00:22:31,910 So there we go. 257 00:22:31,930 --> 00:22:40,120 So we're loading our dynamically, getting a bunch of content from the API and building out fully interactive 258 00:22:40,120 --> 00:22:45,100 and dynamic Web application just from data coming from an API endpoint. 259 00:22:45,370 --> 00:22:47,410 And the HTML is very minimal. 260 00:22:47,420 --> 00:22:50,950 It's just the same HTML elements that we working with earlier. 261 00:22:51,160 --> 00:22:56,950 And now the user can come in and they can get all of this information that's data driven information 262 00:22:57,160 --> 00:22:58,360 that they can interact with. 263 00:23:03,040 --> 00:23:09,940 Thanks for this lesson is to continue to generate content from the episode, dynamically generated content, 264 00:23:10,210 --> 00:23:16,090 all coming from the data from the API and make the requests as needed to create the user interactions, 265 00:23:16,270 --> 00:23:22,660 getting the data so that the user can navigate through your Web application and pull out the data that 266 00:23:22,660 --> 00:23:23,570 they're looking for. 267 00:23:23,860 --> 00:23:30,010 So also include the pagination to move through the different pages of content next and previous buttons 268 00:23:30,190 --> 00:23:36,070 so that the user can easily navigate and select the content that they want to view and see the additional 269 00:23:36,070 --> 00:23:41,080 content that's available and then also apply staling as needed to make the application. 270 00:23:42,210 --> 00:23:45,030 Attractive and interactive for users.