1 00:00:00,150 --> 00:00:07,530 In this lesson, we're going to be connecting to a testing API, so loading the contents of the API, 2 00:00:07,680 --> 00:00:09,590 also making some clickable buttons. 3 00:00:09,780 --> 00:00:16,140 So depending on how many items there are, how many users there are within the database, we've got 4 00:00:16,140 --> 00:00:20,150 the number of pages, the total on page so we can create these indicators. 5 00:00:20,160 --> 00:00:25,950 And these are all dynamics of depending on the content that we're getting back, they can change as 6 00:00:25,950 --> 00:00:27,370 the content will change. 7 00:00:27,780 --> 00:00:36,030 So all of the content we're out putting the user information as well as the user's email addresses within 8 00:00:36,030 --> 00:00:43,910 the list, it's going to be part one of making a request to a testing API. 9 00:00:45,600 --> 00:00:48,080 We're going to start by setting up the HTML file. 10 00:00:48,420 --> 00:00:53,430 We've got some standard HTML elements to create the interaction, button clicks and an input and an 11 00:00:53,430 --> 00:00:59,490 output field, as well as linking to the code to G.S. file that we've created. 12 00:01:00,330 --> 00:01:02,010 And that's selecting that. 13 00:01:03,790 --> 00:01:10,210 Page elements and then also adding an event listener for the click of a button, so click the button 14 00:01:10,210 --> 00:01:15,090 and just test to make sure that the console message is outputting the message of already. 15 00:01:15,490 --> 00:01:20,850 So going over to a website called RFQ Address Dot, I kn. 16 00:01:21,130 --> 00:01:28,090 And this is an endpoint that you can test your front, end quote, against CEDO, get fake data and 17 00:01:28,090 --> 00:01:31,690 it allows you to try making request to the endpoint. 18 00:01:32,170 --> 00:01:36,330 So to in order to make the endpoint request, this is the path. 19 00:01:36,340 --> 00:01:38,620 So there's a number of different endpoint paths. 20 00:01:38,920 --> 00:01:47,650 So let's copy the euro and go back to the documentation and loaded the Eurail and make the initial request 21 00:01:47,650 --> 00:01:50,800 to it and then return back the JavaScript object. 22 00:01:51,010 --> 00:01:55,860 And then we can take a closer look at what we've got available within this API. 23 00:01:56,440 --> 00:02:03,490 So I'd like to usually typically copy the endpoint that I know that's working within the code. 24 00:02:03,490 --> 00:02:04,480 Just comment it. 25 00:02:04,960 --> 00:02:13,240 And all of the data is going to be after the path to the URL for its API for it. 26 00:02:14,110 --> 00:02:15,970 So that's the base. 27 00:02:15,970 --> 00:02:17,330 You are all that we're going to use. 28 00:02:17,980 --> 00:02:26,170 I'll give it a name of base you URL and now let's make the fetch request to the base your URL and we're 29 00:02:26,170 --> 00:02:32,350 going to update and add in the parameters so that one of the parameters that we're adding is going to 30 00:02:32,350 --> 00:02:36,160 be the users value. 31 00:02:38,420 --> 00:02:46,240 So let's create that parameter there and then put together the base URL plus the parameter in order 32 00:02:46,240 --> 00:02:49,700 to construct our eurorail that we're going to be making the request to. 33 00:02:50,230 --> 00:02:56,200 So taking the base URL and then adding together the parameters that we want to pass. 34 00:02:56,920 --> 00:03:00,160 And now let's make her FETs request to the euro. 35 00:03:02,170 --> 00:03:07,600 And then we've got the promise, so we've got the response object within the promise. 36 00:03:15,750 --> 00:03:22,290 And returning back the response object using the Jason method, so we're going to get the content back 37 00:03:22,290 --> 00:03:31,590 as Jason and then the next promise is where we can get the data content and then making use of the data 38 00:03:31,590 --> 00:03:33,180 content within the console. 39 00:03:33,450 --> 00:03:38,910 Let's slug it out within the console and make sure that we're getting some data back. 40 00:03:39,840 --> 00:03:44,590 So we click the button, makes the request and this returns back the data. 41 00:03:45,000 --> 00:03:52,890 So in this case, what we're doing is we're connecting to and we're getting the users with page of two. 42 00:03:53,970 --> 00:03:56,850 And if we want to just get the list of users. 43 00:03:57,180 --> 00:04:03,330 So there's a number of different pages that we have per page, total of pages so we can create a way 44 00:04:03,330 --> 00:04:06,750 to navigate through all of the user list. 45 00:04:13,880 --> 00:04:21,950 And there's also to get the single user so we can request the user by ID and then within the user list, 46 00:04:22,190 --> 00:04:28,460 within the data we've got, each one of the users has ID so we can make a request and get the information 47 00:04:28,460 --> 00:04:31,370 about the user back from the request. 48 00:04:31,850 --> 00:04:39,800 We also have other options as well where we can create a post and that would be posting to a user and 49 00:04:39,800 --> 00:04:41,420 then returning back the ID. 50 00:04:41,810 --> 00:04:44,750 So making the request to the users. 51 00:04:44,750 --> 00:04:53,380 We can also update a user so updating whatever the user value is and sending a patch method to it, 52 00:04:53,540 --> 00:04:56,020 and that allows us to make an update to the user. 53 00:04:56,510 --> 00:04:59,320 So there's a number of options here that we can try out. 54 00:04:59,600 --> 00:05:06,980 So let's go ahead and create a request and we're going to list out all the user pages and then we'll 55 00:05:06,980 --> 00:05:14,660 create an interface to select the user information and then also create and add and add new users to 56 00:05:14,660 --> 00:05:15,440 the list as well. 57 00:05:15,860 --> 00:05:23,510 So quite a bit that we're going to cover and start by creating the list of the page values. 58 00:05:23,520 --> 00:05:31,430 So let's see what happens when we just select the users API and do a click so that by default turns 59 00:05:31,430 --> 00:05:32,840 returns back page one. 60 00:05:33,260 --> 00:05:40,640 And we also see the total of pages and the data for this current page and then per page, it's returning 61 00:05:40,640 --> 00:05:42,100 back six items per page. 62 00:05:42,680 --> 00:05:51,610 So let's output that content and we'll create an object that's going to hold the page data. 63 00:05:51,920 --> 00:05:56,510 And this can be an object so we can track whatever our current page number is. 64 00:05:58,850 --> 00:06:00,710 And I'm actually going to make this shorter. 65 00:06:02,980 --> 00:06:10,000 And I'll call it up and then we can have under the page for the OP, we're going to start at page one, 66 00:06:10,300 --> 00:06:14,710 so it's going to make the request to page one for the users. 67 00:06:15,310 --> 00:06:17,630 And the parameter, again, is going to be page. 68 00:06:18,010 --> 00:06:23,910 So if we have a parameter for a page that we know we need to load that page information. 69 00:06:25,990 --> 00:06:35,080 So setting up a function in order to handle the loading of page load data and because our page object 70 00:06:35,080 --> 00:06:35,890 is global. 71 00:06:35,890 --> 00:06:37,480 So we're not going to have to update that. 72 00:06:39,390 --> 00:06:46,320 So when we load the data, that's going to output the contents on the page itself. 73 00:06:47,370 --> 00:06:56,310 So this is also where we can have a fetch request that's going to make the request to the data and it's 74 00:06:56,310 --> 00:07:02,980 going to be loading the parameter for users and keeping in mind the same structure that we have. 75 00:07:03,930 --> 00:07:12,900 So taking the users and then whatever page and this is where we're going to add in the value for app 76 00:07:12,900 --> 00:07:16,450 page for the app page object. 77 00:07:16,770 --> 00:07:19,090 So currently the value for that is going to be one. 78 00:07:20,610 --> 00:07:22,440 And let's simplify that. 79 00:07:22,440 --> 00:07:23,760 We're just going to look at the data. 80 00:07:26,210 --> 00:07:31,700 So it's going to call to the function that's going to load the data and then this is where we can create 81 00:07:31,700 --> 00:07:39,590 the output, where we're going to build the page object and we want to build the page object from the 82 00:07:39,590 --> 00:07:39,940 data. 83 00:07:41,000 --> 00:07:48,740 So it's going to be building the page from the data that's being returned back from the endpoint and 84 00:07:48,740 --> 00:07:50,150 in order to build the page. 85 00:07:50,540 --> 00:07:57,650 So I usually do like to have the console log of the data so that I know that what the structure of the 86 00:07:57,650 --> 00:08:03,700 data that I'm looking at and within data we can loop through all of the items. 87 00:08:04,220 --> 00:08:05,960 So let's create that first. 88 00:08:06,000 --> 00:08:14,480 We're going to create the loop through of data and then data and using for each creating the loop through 89 00:08:14,480 --> 00:08:15,530 each one of the items. 90 00:08:18,890 --> 00:08:29,840 And this is going to have a user information and we can console log out the user object, and I'm also 91 00:08:29,840 --> 00:08:39,850 going to set this up to automatically load so window and we're going to listen for a DOM content loaded. 92 00:08:40,700 --> 00:08:48,470 And once the content has loaded, then the event is going to fire off and it's going to just fire off 93 00:08:48,470 --> 00:08:49,580 the load data function. 94 00:08:51,110 --> 00:08:52,760 So that's outputting it to the page. 95 00:08:52,940 --> 00:08:59,570 And if we don't have any other functions here, we can just shorten the statement so that it just automatically 96 00:08:59,570 --> 00:09:03,070 do a load of the data whenever the page loads. 97 00:09:03,590 --> 00:09:04,880 So there's all of our data. 98 00:09:05,030 --> 00:09:10,600 So now it's up to taking the data apart and putting it on the page and we're building the page. 99 00:09:11,090 --> 00:09:13,200 So we're going to have to create elements again. 100 00:09:13,880 --> 00:09:22,190 So let's do that where we'll set up the ability to make node and then the parameters that we want to 101 00:09:22,190 --> 00:09:23,890 pass in to make the node. 102 00:09:24,170 --> 00:09:34,310 So we need the parent that we're connecting it to and also the node type that we're creating and then 103 00:09:34,310 --> 00:09:36,580 the content of the node itself. 104 00:09:37,340 --> 00:09:42,050 And that's where we can create the element and then also return the element, just as we've done with 105 00:09:42,050 --> 00:09:43,150 in the earlier lessons. 106 00:09:43,370 --> 00:09:50,000 So we're going to be constructing the full object information and putting it on the page and then including 107 00:09:50,000 --> 00:09:51,120 the content of it. 108 00:09:51,440 --> 00:09:59,480 So for the user and what else will do is will clear the HTML of output so that this is going to be just 109 00:09:59,480 --> 00:10:01,460 floating a fresh page of content. 110 00:10:02,210 --> 00:10:09,170 So the first item that we want to list out here is we want to do the first name and last name of the 111 00:10:09,170 --> 00:10:11,000 user and pass that over. 112 00:10:11,210 --> 00:10:16,210 So this is all contained within the user object so we can get the first name, we can get the last name. 113 00:10:16,730 --> 00:10:18,650 So let's start by creating. 114 00:10:22,000 --> 00:10:28,600 Our first stiff, given the name of Div one and just using the same structure where we're going to make 115 00:10:28,600 --> 00:10:31,950 a node, the parent of the snow is going to be output. 116 00:10:31,960 --> 00:10:33,790 So it's going to be directly attached to output. 117 00:10:34,150 --> 00:10:40,960 The type of node that we're creating is going to be a div and then the content is going to be with create 118 00:10:40,960 --> 00:10:49,390 a separate variable value for that and using the tactics, selecting the user information. 119 00:10:49,420 --> 00:10:56,830 So we're going to do the user and let's do first underscore name and wrap this within the dollar sign 120 00:10:56,830 --> 00:10:58,030 in the curly brackets. 121 00:10:59,320 --> 00:11:02,330 And then we'll also add the last name to that as well. 122 00:11:03,640 --> 00:11:05,470 So that's last name. 123 00:11:07,390 --> 00:11:11,070 And then let's also include the ID. 124 00:11:11,890 --> 00:11:14,020 So that would be the user ID. 125 00:11:16,660 --> 00:11:20,600 Into that first part of the content, so it's going to be represented by HTML. 126 00:11:23,050 --> 00:11:27,670 So when we make the node, let's add content to it. 127 00:11:30,410 --> 00:11:38,210 And this is just going to be constructing the element, using the document create element and the element 128 00:11:38,210 --> 00:11:46,580 type is going to be under the node type variable and then we're taking the parent object and appending 129 00:11:46,580 --> 00:11:47,720 the parent. 130 00:11:50,470 --> 00:11:57,220 The element to the parent and then the elements, the inner turmoil of the elements is going to be equal 131 00:11:57,220 --> 00:12:04,330 to whatever the content is that we Pastan and then we can also do a return of that element. 132 00:12:06,630 --> 00:12:09,270 And just to have something different. 133 00:12:10,470 --> 00:12:16,490 Let's return it and we're going to use the pend child and the difference between a pen and a pen to 134 00:12:16,500 --> 00:12:26,400 child is that this is going to construct the elements and has a response, our return of the object 135 00:12:26,400 --> 00:12:27,380 that was just created. 136 00:12:27,720 --> 00:12:35,220 So that's where we're able to pass it back as div one and now we can access div one within the console. 137 00:12:35,970 --> 00:12:40,840 So that just shows us what div one is being and what it's being returned. 138 00:12:41,160 --> 00:12:43,830 So we've got the content being output on the page. 139 00:12:44,880 --> 00:12:47,310 Let's also add in second line. 140 00:12:52,350 --> 00:13:02,610 So creating to two and let's have this div, so calling it or call it HTML two and to be consistent 141 00:13:02,610 --> 00:13:04,700 and rename this to him on one. 142 00:13:05,550 --> 00:13:11,390 So the content that we want within the second div, so maybe we want to have the email address. 143 00:13:13,530 --> 00:13:14,960 So that's just under email. 144 00:13:16,860 --> 00:13:21,450 And also let's create another one that we can use as. 145 00:13:23,510 --> 00:13:33,030 An image, so that will be the other one that will create and that can just be by image one. 146 00:13:36,530 --> 00:13:42,740 And this is going to be image tag and then there's no content that we're sending in there. 147 00:13:42,980 --> 00:13:46,100 And I'm going to log out into the console, the image. 148 00:13:52,880 --> 00:13:54,780 And this actually should be Temotu. 149 00:13:54,800 --> 00:14:00,170 That's where we're throwing the air, so there's our image and let's take the image one. 150 00:14:01,150 --> 00:14:01,990 And such. 151 00:14:06,160 --> 00:14:15,120 So don't attribute and attribute for source is going to be whatever we've got path for the avatar, 152 00:14:15,940 --> 00:14:23,060 so that's going to be the user avatar within the user of the object. 153 00:14:23,080 --> 00:14:24,040 So Avatar. 154 00:14:25,930 --> 00:14:27,150 And I'll save that. 155 00:14:27,550 --> 00:14:32,140 So adding in the source images there on the page. 156 00:14:40,410 --> 00:14:46,290 And then also, we're going to add in the additional options for clicking to the other pages that we 157 00:14:46,290 --> 00:14:53,550 have content on, and then we'll add some simple buttons to the bottom to go to navigate to the next 158 00:14:53,550 --> 00:14:53,780 page. 159 00:14:53,790 --> 00:14:56,300 And of course, we can apply styling afterwards. 160 00:14:56,850 --> 00:15:03,300 So also within the initial request where we're building the page and where we're getting the page data, 161 00:15:05,340 --> 00:15:08,510 an object already contains the information that we need. 162 00:15:08,970 --> 00:15:10,560 So we've got per page. 163 00:15:10,740 --> 00:15:17,160 We've got what page we're currently on the total and as well as the total pages that we have available 164 00:15:17,370 --> 00:15:24,930 so we can loop through and we can output the number of pages and have those as indicators at the bottom 165 00:15:24,930 --> 00:15:31,560 of the screen so that the user can switch through and they can get the different pages of users and 166 00:15:31,560 --> 00:15:31,990 data. 167 00:15:32,310 --> 00:15:42,210 So let's create a loop where we've got the data, total pages and this can be a for loop. 168 00:15:47,760 --> 00:15:50,580 And while it's less than data total. 169 00:15:53,010 --> 00:15:57,240 Pages and then increment I by one. 170 00:15:58,560 --> 00:16:00,880 And this is where we can add to the bottom. 171 00:16:01,860 --> 00:16:06,260 So let's construct a div and this is going to be our container div. 172 00:16:06,810 --> 00:16:09,510 So this is where we can add in the page content. 173 00:16:10,230 --> 00:16:21,780 So just make a blank diff at the bottom and then we're going to be attaching the indicators within this 174 00:16:21,780 --> 00:16:25,170 div and we can for now we can create them as span's. 175 00:16:26,610 --> 00:16:31,830 So selecting and creating a span. 176 00:16:35,430 --> 00:16:44,010 And this is going to be what's the value of spane and the content that we're sending in there is going 177 00:16:44,010 --> 00:16:48,510 to be I plus one and it's going to be appended to div three. 178 00:16:48,690 --> 00:16:51,460 So that gives us the indicators at the bottom. 179 00:16:52,770 --> 00:16:57,850 Let's go ahead and add in some styling so they're really small and hard to see. 180 00:16:57,870 --> 00:17:01,650 So let's update them and update the display. 181 00:17:02,880 --> 00:17:08,430 To in line block and also adding in some margin for them. 182 00:17:10,810 --> 00:17:12,220 As well as border. 183 00:17:16,480 --> 00:17:27,010 And also at a border radius as well, so that they're slightly rounded and going down to where we created 184 00:17:27,340 --> 00:17:35,710 the span's take the span using Closs list, add and add the class of Ayanda. 185 00:17:37,750 --> 00:17:40,210 So that way they're more visible. 186 00:17:40,390 --> 00:17:45,250 And I'm sure I'm going to also do a text, a line to center a line, the text content. 187 00:17:46,690 --> 00:17:53,500 So that way we have an indicator of the other pages and the user has the ability to click through and 188 00:17:53,500 --> 00:17:54,830 to move to another page. 189 00:17:56,320 --> 00:18:00,280 So let's also select that and add an event listener. 190 00:18:00,490 --> 00:18:04,900 So our event listener and the event that we're listening for is going to be a click. 191 00:18:05,320 --> 00:18:12,970 And if a page does get clicked, then what we want to do is we want to make to build the page. 192 00:18:14,850 --> 00:18:25,680 And actually load the data and update the Arpège value to whatever we've got for the I. 193 00:18:27,540 --> 00:18:34,290 As we're looping through E-Plus one and then all we have to do is call the function to upload the data, 194 00:18:34,860 --> 00:18:38,530 and that's going to initiate and trigger the loading of the new page. 195 00:18:39,390 --> 00:18:45,540 So whatever number of pages we have, we can filter through them and we can go to the different pages 196 00:18:45,540 --> 00:18:46,130 of content. 197 00:18:47,670 --> 00:18:56,760 So also, let's in the next lesson, we're going to add the ability to click on the user and see more 198 00:18:56,760 --> 00:18:57,830 information about them. 199 00:19:00,250 --> 00:19:08,080 In addition, before we conclude, let's apply some styling to each one of those and a lot of border 200 00:19:08,080 --> 00:19:08,460 around it. 201 00:19:12,140 --> 00:19:16,790 So that they're more distinct between the different elements. 202 00:19:20,740 --> 00:19:30,400 And I'm sitting the top and bottom margins to 10 picks and also to all of the elements on the page can 203 00:19:30,400 --> 00:19:32,940 add the box sizing and the border box. 204 00:19:35,380 --> 00:19:40,870 So going into where we create the main container for each one of these. 205 00:19:45,000 --> 00:19:51,450 And since we don't have a mean container, we've been adding it to output, let's create a separate 206 00:19:52,050 --> 00:19:55,740 container and we'll call it output one. 207 00:19:56,460 --> 00:20:01,190 And using the same structure that we have, we'll append it to output. 208 00:20:01,200 --> 00:20:08,070 This can be just a blank div and this is where we can hold the contents and then within output one. 209 00:20:13,000 --> 00:20:19,330 And this can just be up within here, so every time we're looping through, we're going to be creating 210 00:20:19,330 --> 00:20:25,010 another element and that way we have something that we can apply the styling to. 211 00:20:25,330 --> 00:20:27,340 So this is going to be the main container. 212 00:20:29,320 --> 00:20:37,720 So output one and using class list, let's add a class and the class that we're adding is going to be 213 00:20:37,720 --> 00:20:47,490 the box, so that will apply that more of that box type styling to the elements and also text a line 214 00:20:47,530 --> 00:20:53,290 we can centralizing it also set a default width to 80 percent. 215 00:20:54,280 --> 00:21:02,650 So now our content is nicely aligned and also are going to align the bottom part there where we created. 216 00:21:08,240 --> 00:21:18,470 The div three and to div three, I'll also add in that same alignment so that that gets that gets centered 217 00:21:18,470 --> 00:21:19,990 as well onto the page. 218 00:21:25,270 --> 00:21:33,820 And then those are still clickable and we can also update the indicators, so setting the cursor to 219 00:21:33,820 --> 00:21:37,460 pointer and let's do. 220 00:21:38,600 --> 00:21:46,100 The task for this lesson are to connect to the API and get the JSON data back from the API and then 221 00:21:46,100 --> 00:21:52,330 generate the page elements dynamically using the data from the API and also create the clickable page 222 00:21:52,340 --> 00:21:55,970 options for users to be able to interact with the data.