1 00:00:00,060 --> 00:00:06,090 In this lesson, we are going to be a loading country information, so creating a mini application that's 2 00:00:06,090 --> 00:00:11,940 going to load the country information using the rest countries, EU, API, so it's an open API. 3 00:00:12,660 --> 00:00:16,230 And what it does is it allows you to load a lot of country information. 4 00:00:17,800 --> 00:00:22,290 So there's a lot of information contained within the object response. 5 00:00:22,650 --> 00:00:28,860 And it is suggested that as you're building the application, access some of the different content and 6 00:00:28,860 --> 00:00:31,010 build out your own version of the application. 7 00:00:31,440 --> 00:00:38,040 So the one that we're going to be demonstrating in this lesson is going to load all of the country information 8 00:00:38,520 --> 00:00:43,530 and then chunk it into blocks of ten countries per page. 9 00:00:43,680 --> 00:00:49,470 And it gives you some brief information about the country, the population, the flag, the name, the 10 00:00:49,470 --> 00:00:50,130 currency. 11 00:00:52,050 --> 00:00:57,540 And you can click through and check out any of the countries that have been lauded. 12 00:00:58,830 --> 00:01:07,770 And also the exercise is going to demonstrate how we can save requests, be making multiple requests 13 00:01:07,770 --> 00:01:14,080 to the page when we load all of the page information directly into one object that's going to be stored 14 00:01:14,310 --> 00:01:19,290 in the JavaScript and then we can break apart the page contents separately. 15 00:01:19,410 --> 00:01:21,050 And this is all done with JavaScript. 16 00:01:21,450 --> 00:01:27,590 So there's one initial fach request that's done to the API connecting to the rest countries. 17 00:01:27,780 --> 00:01:32,540 Dot EU API says a lot of information contained within this API. 18 00:01:32,550 --> 00:01:34,470 This is the endpoint that we're going to be using. 19 00:01:34,710 --> 00:01:40,160 So it's reste countries dot EU for its address photography to, for example. 20 00:01:40,180 --> 00:01:46,770 So returning back all of the available data and there's more information and documentation over at the 21 00:01:46,770 --> 00:01:47,370 website. 22 00:01:47,760 --> 00:01:53,190 So different endpoints that you can connect to, you can select by country as well. 23 00:01:53,360 --> 00:01:59,730 You can select by full name code, Lyster codes, currencies and all of this information that can be 24 00:01:59,730 --> 00:02:00,550 retrieved back. 25 00:02:00,870 --> 00:02:06,870 So going into the editor, we've got the standard HTML template that we've been using. 26 00:02:07,380 --> 00:02:14,130 So including several different elements on the page so that each one, the input, the button, the 27 00:02:14,130 --> 00:02:17,580 output area, and then we're linking over to the script source. 28 00:02:17,970 --> 00:02:23,660 And this is where we're copied over some of the content from the previous project. 29 00:02:23,670 --> 00:02:29,970 So connecting to the button, connecting to the one element, connecting to the output and input element 30 00:02:29,970 --> 00:02:33,750 so that we can pick up any information that is input there. 31 00:02:34,410 --> 00:02:38,190 Let's also add in the euro, so have the endpoint. 32 00:02:39,450 --> 00:02:41,820 So that's going to be the endpoint that we're connecting to. 33 00:02:42,120 --> 00:02:46,290 And then to adjust it, we can use the all as a parameter. 34 00:02:46,650 --> 00:02:55,190 So we're going to just initially be connecting to the V2 and then adding in all as one of the parameters. 35 00:02:55,190 --> 00:02:59,670 So to search for all, we also have the button the event listener added to the button. 36 00:02:59,850 --> 00:03:03,480 So when I click the button, we see ready being output into the console. 37 00:03:04,380 --> 00:03:07,740 So from here, let's make our Thach connection. 38 00:03:07,750 --> 00:03:13,330 So we'll set up a variable name and call that parameters. 39 00:03:13,650 --> 00:03:18,150 So this is where we can enter in the value for the parameters. 40 00:03:18,150 --> 00:03:20,040 And that's just going to be all for now. 41 00:03:20,940 --> 00:03:26,790 And we're going to also set up our URL so this can serve as the base euro. 42 00:03:27,180 --> 00:03:32,550 And then the final URL is going to take that base URL and concatenate together. 43 00:03:32,550 --> 00:03:38,970 So add it adding in the parameters that we want to make the request here and then launching the Thach 44 00:03:38,970 --> 00:03:39,660 request. 45 00:03:42,790 --> 00:03:49,990 And with the first promise of returning back the response object and when we get the response object 46 00:03:50,500 --> 00:03:55,090 using the Jason method to return back the actual data. 47 00:03:59,620 --> 00:04:05,890 And then once we do get the response, returned back the data, and for now we're going to log it out 48 00:04:05,890 --> 00:04:12,370 into the console and then we're going to deconstruct JavaScript object so that we can output some content 49 00:04:12,370 --> 00:04:12,970 on the page. 50 00:04:14,110 --> 00:04:16,750 So that returns back quite a bit of information. 51 00:04:16,750 --> 00:04:21,490 Says two hundred and fifty different elements there that it's returning back. 52 00:04:22,090 --> 00:04:26,820 And all each one of these has quite a bit of information contained within the object. 53 00:04:28,030 --> 00:04:32,280 So let's output the items that are being returned back. 54 00:04:32,290 --> 00:04:37,590 So we're just doing a request for all and will create a way to output the content. 55 00:04:37,900 --> 00:04:40,540 So we want to loop through the data object. 56 00:04:40,570 --> 00:04:45,520 So this is going to be the array that we're looking for and the array is always indicated with the length. 57 00:04:45,790 --> 00:04:49,470 So if you can iterate through it, that means that you can get the length out. 58 00:04:49,930 --> 00:04:53,990 So let's create another let's create some functions in order to accommodate that. 59 00:04:55,030 --> 00:04:55,630 So. 60 00:04:58,360 --> 00:05:08,590 So it'll be load pages and pass in the data object into the pages and then within the console will output 61 00:05:08,590 --> 00:05:11,890 the data and then update this system, the console log. 62 00:05:12,130 --> 00:05:13,350 We're going to load the pages. 63 00:05:13,630 --> 00:05:18,780 So right now, it'll do the same thing when we click the button and we want to iterate through using 64 00:05:18,790 --> 00:05:25,930 for each so looping through each one of the items within the array and then returning back each element 65 00:05:26,170 --> 00:05:27,500 that's contained within the array. 66 00:05:28,390 --> 00:05:33,040 And from there we can log out the contents of the elements. 67 00:05:33,070 --> 00:05:40,840 This should actually be element and as we look through each one of the objects, we can output and create 68 00:05:40,840 --> 00:05:41,830 the country. 69 00:05:45,380 --> 00:05:54,310 So the page elements and we can also call this data and then thus this can get passed in as a page element, 70 00:05:54,860 --> 00:06:00,100 and now we want to construct some content on the page for each one of these items. 71 00:06:00,560 --> 00:06:02,570 And there is a lot of stuff listed here. 72 00:06:03,110 --> 00:06:12,920 So what we can do is we can load the data initially and loaded into an object that we can group to different 73 00:06:12,920 --> 00:06:13,910 pages if we want. 74 00:06:14,390 --> 00:06:20,150 So let's create a global page and just have an object here. 75 00:06:20,360 --> 00:06:27,650 And then within this object, this can just be JSON and an object sitting with an object. 76 00:06:27,870 --> 00:06:31,580 So we'll have an AI content within the page, Jason. 77 00:06:32,120 --> 00:06:41,720 So once the content has loaded, we take that page JSON and actually it's going to be page JSON and 78 00:06:41,720 --> 00:06:44,180 equal that to whatever we've got in data. 79 00:06:46,200 --> 00:06:48,650 And that way when we load the pages. 80 00:06:50,300 --> 00:06:52,530 We can just reference the page data. 81 00:06:53,270 --> 00:06:55,670 So let's try that and just make sure that's working. 82 00:06:55,790 --> 00:07:04,160 So now this object is represented within the page JSON object and you clear it and you type in the page 83 00:07:04,160 --> 00:07:04,700 object. 84 00:07:04,910 --> 00:07:07,940 You can see that we've loaded in this jigsaw an array. 85 00:07:08,270 --> 00:07:14,720 And this is just one way that if you're using this data, you can cut down on the number of requests 86 00:07:14,720 --> 00:07:15,470 to the server. 87 00:07:15,720 --> 00:07:19,640 So some of the APIs will have limits to the number of requests you can make. 88 00:07:20,210 --> 00:07:25,760 So this is one way where you can load all of the data within one shot and then make use of the data 89 00:07:25,880 --> 00:07:28,700 so you can divide it up into separate pages if you want. 90 00:07:29,210 --> 00:07:39,710 So if you want to create pages from the object and create the pages and for the global page object, 91 00:07:41,090 --> 00:07:47,270 so the value of one, so they'll start on whatever the first pages and then how many items we want to 92 00:07:47,270 --> 00:07:49,880 have per page, we can divide it up. 93 00:07:51,650 --> 00:07:56,240 So if one of 10 per page, all of that information is contained. 94 00:07:56,390 --> 00:08:04,280 And the reason that I use an object here is that this provides us the flexibility to have it dynamically 95 00:08:04,280 --> 00:08:05,450 generate the pages. 96 00:08:05,960 --> 00:08:13,220 So if we were to preset it that we want 10 per page and we load all of the JSON object, then we don't 97 00:08:13,220 --> 00:08:14,690 have any flexibility to change that. 98 00:08:14,720 --> 00:08:20,770 So in order to change the number of items per page, we can easily just update this and change this. 99 00:08:21,020 --> 00:08:28,430 So let's construct the page elements and then we're going to load some pages down below that the user 100 00:08:28,430 --> 00:08:29,330 can select from. 101 00:08:29,480 --> 00:08:32,480 And then this information, we're not going to make a separate request. 102 00:08:32,660 --> 00:08:35,620 We're just going to use the current page JSON object. 103 00:08:35,930 --> 00:08:42,920 So initially we're going to load the content and then that's going to allow us to create the pages and 104 00:08:42,920 --> 00:08:47,390 then we'll use the load pages to load through and create each one of the page elements. 105 00:08:48,050 --> 00:08:51,920 So let's start by chunking the page data. 106 00:08:51,930 --> 00:09:00,950 So we're going to send this over to create pages and then we're going to just load the one page of data. 107 00:09:01,070 --> 00:09:06,260 And we don't actually even have to pass anything in here because we're going to have all of the content 108 00:09:06,260 --> 00:09:09,490 listed within the page JSON as well. 109 00:09:09,710 --> 00:09:13,710 We're going to have a page and a page number that we can use. 110 00:09:14,600 --> 00:09:19,130 So we're going to have a page, page and a page JSON with all of the contents. 111 00:09:19,820 --> 00:09:23,930 So let's separate out and use the create pages. 112 00:09:24,500 --> 00:09:34,550 And one of the easiest ways to create the pages is to load the page JSON content with the data and then 113 00:09:34,550 --> 00:09:36,380 construct the pages initially. 114 00:09:36,620 --> 00:09:42,320 So what this is going to do is it's going to do a full page load, create the pages that we can interact 115 00:09:42,320 --> 00:09:43,390 with on the screen. 116 00:09:43,640 --> 00:09:49,590 So we're going to chunk the data that's passed in here into page data. 117 00:09:50,480 --> 00:09:54,440 So creating a for loop let AI equals zero. 118 00:09:55,130 --> 00:10:02,450 And I'm going to also update this to instead of JSON will have an array of all of the pages in here 119 00:10:03,590 --> 00:10:06,340 and we can also keep the JSON object as well. 120 00:10:07,160 --> 00:10:13,190 So the array will contain all of the page information and we're going to be able to generate depending 121 00:10:13,190 --> 00:10:17,220 on which array we want to use, that's going to be the pages that we're setting up. 122 00:10:17,570 --> 00:10:20,840 So it's going to initially take the page array. 123 00:10:21,170 --> 00:10:26,780 And if you want to clear out the contents of an array, you can just set the length to zero and that 124 00:10:26,780 --> 00:10:29,450 will clear any existing content within the page. 125 00:10:30,140 --> 00:10:39,350 We've also got the number per page, so let's set that up and or we can count how many pages we have. 126 00:10:40,430 --> 00:10:49,580 So with the value of P total for page total, so we're take the length of the data and divide that by 127 00:10:49,880 --> 00:10:53,570 page and the number per page. 128 00:10:54,500 --> 00:11:02,120 So that's going to give us total value and then we're going to loop through while AI is less than the 129 00:11:02,120 --> 00:11:05,900 total value and increment I plus one. 130 00:11:07,160 --> 00:11:11,860 And then as we load through, we want to push the data. 131 00:11:11,870 --> 00:11:17,930 So we want to chunk the data into the number of pages that we would have within the total. 132 00:11:18,770 --> 00:11:24,000 So let's log out the page total value and save that. 133 00:11:24,110 --> 00:11:28,460 So when we click it, we're going to have twenty five pages total. 134 00:11:31,060 --> 00:11:36,710 So as we loop through, we're going to select and we're going to slice the initial array. 135 00:11:36,760 --> 00:11:43,400 So that's going to be the data array and we're going to be appending to or adding to the temporary array. 136 00:11:44,530 --> 00:11:46,080 So let's set up a holder. 137 00:11:46,210 --> 00:11:48,590 So that will just be the temporary array. 138 00:11:49,270 --> 00:11:51,690 And right now, that can be a blank array. 139 00:11:52,450 --> 00:12:00,430 And then every time we iterate through the loop, we can set the value of temporary to equal to the 140 00:12:00,430 --> 00:12:03,020 contents the slice of the data. 141 00:12:04,000 --> 00:12:07,910 So the data, remember, is going to be the one where we've got the actual data. 142 00:12:08,560 --> 00:12:16,870 So using slice and setting the starting point of the slice is going to be whatever the value of is. 143 00:12:17,530 --> 00:12:24,100 And then the ending point, the number of contents that we're going to take is going to be I plus the 144 00:12:25,090 --> 00:12:26,300 page per. 145 00:12:27,150 --> 00:12:28,530 So the items per page. 146 00:12:29,290 --> 00:12:33,300 And at the end this will create a temporary array. 147 00:12:34,420 --> 00:12:40,040 But what we want to do with the temporary array is we also want to push it into the main array. 148 00:12:40,420 --> 00:12:45,190 So within the array, let's push the temp array into that. 149 00:12:48,290 --> 00:12:57,080 And we can console log out the contents of page afterwards, and actually because this is global, it's 150 00:12:57,080 --> 00:13:01,660 assigning the same it's showing up as the same content. 151 00:13:01,970 --> 00:13:05,070 So let's separate out the chunking. 152 00:13:05,360 --> 00:13:11,930 So there is a calculation error here is that we're incrementing I with one, but we're splitting it 153 00:13:11,930 --> 00:13:19,190 up from starting point of AI and then ending at AI plus per page, so easily incrementing by one. 154 00:13:19,190 --> 00:13:22,390 But we want to increment I by the value of per page. 155 00:13:23,600 --> 00:13:25,520 So let's make a quick update. 156 00:13:25,820 --> 00:13:35,330 So instead of looping through and going to the total, we can just separated out whatever the data length 157 00:13:35,330 --> 00:13:42,200 is and that will automatically loop through till whatever we've got the end length for it. 158 00:13:43,700 --> 00:13:50,150 So that will return back the full two hundred and fifty five entries, and instead of adding just with 159 00:13:50,150 --> 00:13:59,510 I, we're going to update I and add the page per so this will change the value of I. 160 00:14:00,350 --> 00:14:07,790 So the starting point of I will be zero at first and then the next iteration it will be the I plus the 161 00:14:07,790 --> 00:14:11,970 per page value and that will allow us to chunk it. 162 00:14:12,770 --> 00:14:14,480 So let's try that one more time. 163 00:14:14,810 --> 00:14:19,100 And now when we look at the results, we've got different results. 164 00:14:19,370 --> 00:14:27,560 And when we look at the end arrays, we've got all of the data loaded within the arrays. 165 00:14:27,830 --> 00:14:34,980 So we've got all twenty four pages or twenty five pages broken down within the page array. 166 00:14:35,450 --> 00:14:38,450 So that means that we can load the page contents. 167 00:14:38,960 --> 00:14:48,170 So when we do the load pages, this function will load the page contents and we can return back instead 168 00:14:48,170 --> 00:14:49,000 of data. 169 00:14:49,220 --> 00:14:57,470 We've got the contents within page array and whatever the current page. 170 00:14:59,270 --> 00:15:07,220 Page is going to be so that's the way that we're going to use and return back the array according to 171 00:15:07,220 --> 00:15:08,660 whatever the index value is. 172 00:15:09,320 --> 00:15:14,030 So that means that we can loop out and return back each one of the page elements. 173 00:15:15,090 --> 00:15:21,020 And then when we want to build them and add them to the page right now, we'll just put them as data. 174 00:15:21,360 --> 00:15:26,900 So I know we've got quite a few console messages, so let's comment out some of them. 175 00:15:27,930 --> 00:15:30,360 So it's a lot more clear as to what we're doing. 176 00:15:30,510 --> 00:15:33,380 And now we're not using the P total anymore either. 177 00:15:34,410 --> 00:15:35,220 So click it. 178 00:15:36,750 --> 00:15:41,880 And it's outputting the contents that are contained within the first part of the page array. 179 00:15:42,150 --> 00:15:52,230 So these are the first set of values and actually it's starting with a base of zero. 180 00:15:52,260 --> 00:15:53,340 So this is the array. 181 00:15:53,340 --> 00:15:54,390 It's a base of zero. 182 00:15:54,750 --> 00:16:01,530 So that's where we need to add one to the page value or we need to subtract one to get the index value. 183 00:16:02,280 --> 00:16:05,300 So now it's going to load the content accordingly. 184 00:16:05,640 --> 00:16:10,170 So it should load the first set of data and that's starting with Afghanistan. 185 00:16:10,440 --> 00:16:15,990 So let's go take a closer look at this object and take out what we want to output on the page. 186 00:16:16,980 --> 00:16:19,970 So let's create another function that's going to create node. 187 00:16:20,610 --> 00:16:31,620 We're going to need a parent value and I'll type and as well as any HTML content that we want to include 188 00:16:31,620 --> 00:16:31,860 in it. 189 00:16:32,460 --> 00:16:38,040 So this is just going to be a better way or simpler way to create the content for the page. 190 00:16:40,170 --> 00:16:45,480 Or we can pull the information out of the data object that's being added into the console. 191 00:16:48,970 --> 00:16:50,110 So let's create 192 00:16:52,570 --> 00:16:53,440 within the. 193 00:16:56,000 --> 00:17:05,140 Mean Divx using the create noad method that we just created and the parent is going to be output, so 194 00:17:05,140 --> 00:17:10,630 that's the output page element with a class of output that we're putting onto the page. 195 00:17:11,920 --> 00:17:18,310 So let's clear out the content that can be contained within there by using output and then updating 196 00:17:18,310 --> 00:17:20,740 the inner HTML of that element. 197 00:17:20,770 --> 00:17:26,960 So it's going to clear out the current existing content and allow us to update content into it. 198 00:17:27,310 --> 00:17:32,950 So if we want to create a main container, this can be a div and then the content contained within here 199 00:17:33,100 --> 00:17:34,700 that each HTML is just going to be blank. 200 00:17:35,110 --> 00:17:45,400 So when we pass the content into there, we can construct, create the temporary element and using the 201 00:17:45,400 --> 00:17:52,640 documents create elements and the element type is passed into the function. 202 00:17:53,140 --> 00:18:00,310 So that's the element type that we're going to create and then using the parent object that we want 203 00:18:00,310 --> 00:18:05,380 to pander to and then append append the element to the parent. 204 00:18:07,490 --> 00:18:15,830 And then for the elements, let's update the inner HTML and apply the HTML object information that we've 205 00:18:15,830 --> 00:18:16,920 sent into to the function. 206 00:18:17,270 --> 00:18:21,140 And then lastly, we're going to return back the element object. 207 00:18:21,470 --> 00:18:27,860 So this is just a quick way to avoid the repetition of constantly using the document crit element to 208 00:18:27,860 --> 00:18:34,550 create the nodes where we can create the one main node and then within the main node we can set and 209 00:18:34,550 --> 00:18:37,300 pull out information from the data object. 210 00:18:37,670 --> 00:18:43,340 So let's select the data objects and set some content into it. 211 00:18:44,420 --> 00:18:46,910 So in this case, we're going to create the. 212 00:18:49,940 --> 00:18:54,800 The title and using the create a. function. 213 00:18:57,860 --> 00:19:05,900 Appending it to mean if you want to have it within a div and then the contents of the title, so this 214 00:19:05,900 --> 00:19:12,400 can be HTML and we can use the back text, so this can just be an HTML string. 215 00:19:12,890 --> 00:19:25,820 I'm also going to wrap the the word wrap and then using the dollar sign, selecting the value and that's 216 00:19:25,820 --> 00:19:26,480 going to be name. 217 00:19:32,690 --> 00:19:40,100 And maybe we want to set this as an age two so that each one of them is going to be distinct close off 218 00:19:40,100 --> 00:19:40,700 the two. 219 00:19:44,720 --> 00:19:50,360 And the reason I'm assigning variable values to them is I'm also returning the elements of one to apply 220 00:19:50,360 --> 00:19:52,190 some styling to the title. 221 00:19:52,190 --> 00:19:53,290 We can do that as well. 222 00:19:56,720 --> 00:20:04,400 This can just be starts, so now I can take the title elements and I can apply styling to it, and if 223 00:20:04,400 --> 00:20:09,940 I wanted the color of the font to be red, I can do that. 224 00:20:10,670 --> 00:20:14,750 And then within the stats and let's load it. 225 00:20:14,780 --> 00:20:16,610 So now we're loading all of the pages. 226 00:20:21,060 --> 00:20:27,150 And this is the second one there that we're creating a stats, so that's why it's still within a black 227 00:20:27,150 --> 00:20:29,130 color, because we haven't updated that. 228 00:20:30,060 --> 00:20:39,600 So for the stats themselves, let's create or create a variable called HTML one. 229 00:20:40,320 --> 00:20:46,200 And then within this, this is where we can list out all of the stats and then we'll pass that value 230 00:20:47,160 --> 00:20:49,320 into the function. 231 00:20:49,350 --> 00:20:50,640 So it makes it more readable. 232 00:20:51,510 --> 00:20:58,170 So whatever stats we want to pull out of here and you can also select different stats as well as needed. 233 00:20:59,130 --> 00:21:01,350 So let's add in some of those stats. 234 00:21:03,000 --> 00:21:06,060 And if you want to get the population, 235 00:21:08,970 --> 00:21:11,760 add the population value into their. 236 00:21:14,070 --> 00:21:22,800 And that's going to be within the data collection and then you can add to that HTML. 237 00:21:23,340 --> 00:21:28,060 So let me turn into LAT and this way we can add to it. 238 00:21:28,560 --> 00:21:32,730 So what other information that we want to pull back? 239 00:21:33,450 --> 00:21:35,140 We can add that information. 240 00:21:35,140 --> 00:21:39,990 And and so currencies is going to be an array of currencies. 241 00:21:41,430 --> 00:21:46,440 If there's only one item within the array, maybe we want to pull up the first item that's contained 242 00:21:46,440 --> 00:21:47,180 within the array. 243 00:21:48,720 --> 00:21:53,130 So currency and that's contained within data. 244 00:21:56,970 --> 00:22:04,830 Currencies and whatever the first item is within that array, and let's just put the name. 245 00:22:07,950 --> 00:22:11,820 And then also, if we want the symbol, we can add the symbol in as well. 246 00:22:13,050 --> 00:22:18,270 So that's going to add the currency as a separate div if we want to add the flag. 247 00:22:22,260 --> 00:22:30,990 So the flag is an SPG, so maybe even right in the beginning before we add the details. 248 00:22:35,930 --> 00:22:45,080 We have an image for the flag or give it a name, a flag, and let's use the create node, so creating 249 00:22:45,080 --> 00:22:53,660 an image object, we're not passing in any content into the HTML so we can clear that field and then 250 00:22:53,660 --> 00:22:55,580 for flag set. 251 00:22:59,530 --> 00:23:07,990 So it's an attribute and source and the source of the flag is going to be data flag. 252 00:23:10,040 --> 00:23:12,740 So let's see how that looks and. 253 00:23:14,870 --> 00:23:17,400 We can get rid of the courts there for him on. 254 00:23:20,900 --> 00:23:27,770 So you've got the countries being loaded, their flags being loaded, and we can also apply some styling 255 00:23:27,800 --> 00:23:28,400 to this. 256 00:23:29,750 --> 00:23:31,520 So this is a class of box. 257 00:23:34,130 --> 00:23:45,050 And with of 80 percent margin, set that to order such centers and text line, how about we centralized 258 00:23:45,050 --> 00:23:45,650 the text? 259 00:23:48,150 --> 00:23:49,530 And for baulks. 260 00:23:51,840 --> 00:23:59,580 Images set the max width to 100 percent, and that will make it responsive within the contents of the 261 00:23:59,580 --> 00:23:59,970 parent. 262 00:24:01,670 --> 00:24:05,970 Also for the box, each 2s. 263 00:24:08,930 --> 00:24:17,360 Sirtex transform and transform it to uppercase, and we'll see what that looks like, and I do need 264 00:24:17,360 --> 00:24:27,350 to still apply to the main object ZAMEEN class first add and the class that we're adding is going to 265 00:24:27,350 --> 00:24:27,830 be box. 266 00:24:29,450 --> 00:24:30,710 So load it one more time. 267 00:24:32,990 --> 00:24:37,640 And that way we've applied the properties to each one of these. 268 00:24:41,570 --> 00:24:50,240 And so now we want to load the pages at the bottom so the user can navigate to the other pages. 269 00:24:53,100 --> 00:25:02,610 So we're we're creating the pages within the function, we're slicing and chunking the data into the 270 00:25:02,610 --> 00:25:08,160 array, and then we're loading the page content and then at the bottom, we want to have another function 271 00:25:08,160 --> 00:25:08,910 that's going to load. 272 00:25:12,890 --> 00:25:21,260 So it's going to load all of the page indicators so that this can be done right at the bottom and we're 273 00:25:21,260 --> 00:25:23,480 going to just append it to the output. 274 00:25:24,380 --> 00:25:28,890 So create another element that we can call the main container. 275 00:25:28,910 --> 00:25:32,930 So just use the same format and it's going to be attached to output. 276 00:25:34,190 --> 00:25:40,120 And then we want to loop through all of the page array length. 277 00:25:41,810 --> 00:25:46,000 So using four left eye equals zero. 278 00:25:46,430 --> 00:25:58,280 And then while I is less than the page array length, so that will give us a value numeric value and 279 00:25:58,280 --> 00:26:00,440 increment it by, by one. 280 00:26:02,360 --> 00:26:06,110 So let's construct the page elements at the bottom. 281 00:26:12,620 --> 00:26:15,650 And this is just going to be whatever we want for the page clicking. 282 00:26:17,410 --> 00:26:19,270 So create the note again. 283 00:26:21,560 --> 00:26:28,580 And we're spending this one to the main object, and they can be diffs or they can be span's. 284 00:26:30,520 --> 00:26:36,940 We're going to be playing a class to them anyway, and then the contents of them are going to be whatever 285 00:26:37,090 --> 00:26:41,050 the value of I plus one is. 286 00:26:43,310 --> 00:26:44,630 And then for the page. 287 00:26:47,330 --> 00:26:53,900 And these are just going to be the indicators, so let's use class list and add a class. 288 00:26:57,920 --> 00:27:05,630 And the class that we're adding is pigs for the pages, so let's set up the class. 289 00:27:08,110 --> 00:27:10,840 Add some padding for each one of those. 290 00:27:14,330 --> 00:27:18,770 And border, let's have a border radius for styling. 291 00:27:23,960 --> 00:27:32,060 And also for the cursor pointer to set up a cursor pointer and for the color. 292 00:27:33,690 --> 00:27:42,660 Said it to whites and the background color looks set to black, so as we loop through, we've added 293 00:27:42,660 --> 00:27:47,460 the class of pages and then we also want to make these clickable. 294 00:27:47,850 --> 00:27:54,060 So add an event listener and the event listener is going to be listening for a click event. 295 00:27:55,140 --> 00:28:00,320 And if the click event happens, then we want to. 296 00:28:03,510 --> 00:28:05,190 Load the next page. 297 00:28:08,660 --> 00:28:18,830 So all we need to do is increase or assign the value of the page to whatever the contents of the current 298 00:28:18,850 --> 00:28:24,000 E-Plus one is, so it's going to be whatever the pages that we want to click. 299 00:28:26,450 --> 00:28:39,440 So I plus one and set the page page to equal I plus one and then we load pages and that will set up 300 00:28:39,440 --> 00:28:42,350 the whole process again where we're going to. 301 00:28:46,780 --> 00:28:52,570 Lord pages, and we're actually going to load the pagination after we load all of the pages. 302 00:28:57,680 --> 00:29:06,320 So let's try it and now we've got the first listing there and actually we need to make these displays 303 00:29:06,320 --> 00:29:07,280 style in line. 304 00:29:11,800 --> 00:29:16,690 So as an inline block and then we can set with. 305 00:29:19,730 --> 00:29:20,570 50 pics. 306 00:29:23,250 --> 00:29:29,040 So that way there are more of indicators, so let's try to go to the last page and that's going to load 307 00:29:29,040 --> 00:29:32,940 the last page of content and make the images smaller. 308 00:29:35,910 --> 00:29:37,140 So set with. 309 00:29:40,240 --> 00:29:47,200 To be 20 pics, two hundred pics, just be a little bit more readable, so these are all the different 310 00:29:47,200 --> 00:29:48,310 page indicators. 311 00:29:48,320 --> 00:29:54,430 So if we click them, we can navigate through the pages of content and we don't have to do any type 312 00:29:54,430 --> 00:29:56,260 of page reloads or anything like that. 313 00:29:57,160 --> 00:30:02,980 Let's also make some updates to the site like so text a line center, a line. 314 00:30:02,980 --> 00:30:16,150 The text also plays some podding to these and margin sort of the margin is auto, but for top and bottom, 315 00:30:16,210 --> 00:30:20,170 let's add five picks and auto so we can get rid of that. 316 00:30:20,950 --> 00:30:27,940 And also for the all the elements, we're going to apply the box sizing and use the border box. 317 00:30:33,080 --> 00:30:35,240 And going over to Google fonts. 318 00:30:40,800 --> 00:30:47,790 Let's select an interesting font for the Google fonts and this, of course, whatever you want to do 319 00:30:47,790 --> 00:30:52,350 for styling it so you can apply styling as needed. 320 00:30:54,870 --> 00:31:04,860 So let me load the style and then also let's apply to the body, the font family that we've selected. 321 00:31:08,230 --> 00:31:16,360 So let's see what that looks like and so that's going to load all of the pages, they're going to update 322 00:31:16,360 --> 00:31:18,580 the value within the. 323 00:31:19,830 --> 00:31:20,310 Button 324 00:31:22,980 --> 00:31:25,710 and update the text content. 325 00:31:28,440 --> 00:31:29,070 Pages. 326 00:31:30,730 --> 00:31:38,640 And for the input value, for now, apply the style and display of none, since we're not using it, 327 00:31:41,170 --> 00:31:49,320 so now we can just load the pages and also for each one, let's update the text content and see load 328 00:31:49,990 --> 00:31:52,210 country in info. 329 00:31:57,630 --> 00:31:58,230 So there we go. 330 00:31:58,260 --> 00:32:04,830 So we've got the ability to load countries, navigate through the different pages of country information, 331 00:32:06,450 --> 00:32:14,160 and also if we want to indicate which page we're currently on as we're creating the. 332 00:32:16,040 --> 00:32:26,030 Pagination, the pages we can check to see whatever the current page pages and if it is, then let's 333 00:32:26,030 --> 00:32:35,900 apply some styling to it so we have a condition to see if page page is equal to is equal to equal signs 334 00:32:35,900 --> 00:32:45,110 there to the value of eye and should be actually AI plus one. 335 00:32:45,500 --> 00:32:47,540 And if it is, then we'll take the page. 336 00:32:49,370 --> 00:32:50,900 And style. 337 00:32:52,050 --> 00:32:55,860 And asked it dark brown color. 338 00:32:58,240 --> 00:33:04,370 To be read, so it was a stick out, so this is going to be whatever the active page currently is. 339 00:33:05,740 --> 00:33:12,040 So if I go to page five, page seven, nineteen twenty one and so on, it's loading all of that information. 340 00:33:12,280 --> 00:33:19,000 And it's also important to note that we're saving ourselves, making multiple requests as we're loading 341 00:33:19,000 --> 00:33:21,130 all the page data within one shot. 342 00:33:23,410 --> 00:33:29,440 For this lesson or to connect to the API and try it out, load some of the JSON data back into your 343 00:33:29,440 --> 00:33:35,200 application, make requests from the user button to put the Jason on the webpage, also dynamically 344 00:33:35,200 --> 00:33:41,320 load the content into separate pages, allowing the user the ability to select the content that they 345 00:33:41,320 --> 00:33:46,890 want to view and the page content that they have selected should be displayed to them. 346 00:33:47,080 --> 00:33:51,520 So navigation of all of the JSON data within the Web page. 347 00:33:54,230 --> 00:34:00,860 And then additionally, also output additional information from the Web API onto the page.