1 00:00:02,100 --> 00:00:09,480 We're making a connection to the Jason Placeholder in this lesson where the user can select the post 2 00:00:09,480 --> 00:00:15,990 that they want to get and see the post content being output on the page, and it's just being added 3 00:00:15,990 --> 00:00:19,290 to the top by the ID value of the post. 4 00:00:19,900 --> 00:00:24,290 So there's a number of posts and this is just creating the user interaction. 5 00:00:24,510 --> 00:00:27,570 And when we do make the selection, we click the button. 6 00:00:27,750 --> 00:00:34,290 It makes the request to the endpoint according to whatever the ID value is, we have on the input and 7 00:00:34,290 --> 00:00:40,110 it returns back the corresponding content and then we're using that JSON object and putting it to the 8 00:00:40,110 --> 00:00:40,430 page. 9 00:00:40,770 --> 00:00:46,770 So open up the editor and create indexed HTML and you can reuse the same file as we did before. 10 00:00:46,950 --> 00:00:54,120 Just change the source code and I've changed it to code five JS and I've kept some of the values from 11 00:00:54,120 --> 00:00:55,560 the last lesson as well. 12 00:00:55,800 --> 00:01:03,750 So all of the selection of the elements from the page also updating the input value to the world and 13 00:01:03,750 --> 00:01:05,750 then adding an event listener to the button. 14 00:01:05,940 --> 00:01:12,330 And right now what happens is when we click the button, it loads the value of ready into the console. 15 00:01:12,690 --> 00:01:15,710 We're going to be using the JSON placeholder. 16 00:01:15,930 --> 00:01:23,400 So this is available chasten placeholder dot type code, dot com and what it is, it's a free to use 17 00:01:23,400 --> 00:01:30,180 fake online rest API and allows you to do some testing and making fetch request to the API. 18 00:01:30,480 --> 00:01:35,410 So they do have an example here and it will show you what gets returned back. 19 00:01:35,430 --> 00:01:37,190 So there is a response back. 20 00:01:37,470 --> 00:01:44,400 So let's go ahead and make a connection to the end point and return back the data from the endpoint 21 00:01:44,640 --> 00:01:45,870 whenever the button gets clicked. 22 00:01:47,550 --> 00:01:49,920 And there's a few different endpoints as well. 23 00:01:51,420 --> 00:01:56,850 And there's more information available within the guide page. 24 00:01:58,890 --> 00:02:01,410 And you can request two posts. 25 00:02:03,030 --> 00:02:05,520 You can create a resource as well. 26 00:02:07,740 --> 00:02:14,670 And then you can update a resource to a number of options here for different paths that we can connect 27 00:02:14,670 --> 00:02:14,850 to. 28 00:02:15,510 --> 00:02:16,950 So let's set up our base. 29 00:02:16,950 --> 00:02:25,560 You URL, we can just call this that these your URL, and this is going to be the euro that we're going 30 00:02:25,560 --> 00:02:33,980 to be using to make the Thach request and update the view to toggle the word Ropp for the editor so 31 00:02:33,990 --> 00:02:35,730 we can see all of the contents. 32 00:02:36,270 --> 00:02:42,840 And for now, what we want to do is we want to connect to the endpoint and output the content on the 33 00:02:42,840 --> 00:02:43,260 page. 34 00:02:44,190 --> 00:02:46,260 So let's construct our URL. 35 00:02:46,830 --> 00:02:56,220 So using the base, your URL and add to it and let's see what endpoint we can add to. 36 00:02:56,250 --> 00:02:57,510 So do the posts. 37 00:02:57,510 --> 00:03:09,000 One is going to return back the first post within the API and then using fetch request to the euro. 38 00:03:10,620 --> 00:03:18,360 And then once we get the response object, we return back the response and it is going to be JSON formatted 39 00:03:18,930 --> 00:03:21,300 so we can just return it back as JSON. 40 00:03:24,110 --> 00:03:34,130 Then we can get the content back as data and then I would put it into the console using the console 41 00:03:34,130 --> 00:03:36,880 log, so let's see what happens. 42 00:03:36,890 --> 00:03:43,980 We click and we get this information back from the endpoint so we get a body title and information. 43 00:03:44,000 --> 00:03:46,340 So how about we output that to the page? 44 00:03:50,480 --> 00:04:00,470 And just to add to Page and we'll pass in the page info that we want to add to the page, and so that 45 00:04:00,470 --> 00:04:02,570 will be contained within the data object. 46 00:04:05,850 --> 00:04:13,620 And in this case, we're getting the body ID and title and also used, I do like to use the console 47 00:04:14,070 --> 00:04:19,770 to output the page content, so let's construct the page content and we're going to add it into the 48 00:04:19,770 --> 00:04:27,840 output object and create a function to add the element. 49 00:04:28,080 --> 00:04:29,580 So for that, we need the parent. 50 00:04:29,820 --> 00:04:31,860 And this is the same that we've done before 51 00:04:34,380 --> 00:04:46,050 and the the type we can give it a variable of T and also the HTML content that we want to add. 52 00:04:47,970 --> 00:04:53,730 And using the constructor, we're going to create an element document. 53 00:04:55,660 --> 00:05:01,000 Create elements, the element that we're creating is going to be whatever the type is that we've called 54 00:05:01,000 --> 00:05:08,830 in and then taken the parent object append to the parent the element that we just created and then within 55 00:05:08,830 --> 00:05:12,130 the elements, update the inner. 56 00:05:16,070 --> 00:05:25,220 HTML of the element to equal whatever the contents of the HTML is going to be, and then lastly, we 57 00:05:25,220 --> 00:05:29,990 return back the element to the original one that called the element content. 58 00:05:33,750 --> 00:05:41,460 So create the Divx or just add the element and the parent is going to be output, the type of element 59 00:05:41,460 --> 00:05:46,930 that we're adding is going to be a diff and then we're not going to pass in any content in there. 60 00:05:47,400 --> 00:05:49,500 So this is going to be our main container. 61 00:05:52,630 --> 00:06:01,060 Let's click it one more time so we can get the object information, so let's add to the object and we'll 62 00:06:01,060 --> 00:06:03,340 create another one that will be. 63 00:06:05,960 --> 00:06:11,660 Call it Eitam, and then we can also do the add elements here as well, and this is going to be attended 64 00:06:11,660 --> 00:06:12,000 to. 65 00:06:12,020 --> 00:06:14,840 I mean, this can also be a diff. 66 00:06:15,860 --> 00:06:20,660 And then the content here that we're going to pass in, we'll give it a variable of whatever HTML. 67 00:06:20,690 --> 00:06:30,860 So that way we can construct it outside of the function request and using the template literals. 68 00:06:32,660 --> 00:06:37,940 Let's output the title content, so we've got it under Infor title. 69 00:06:41,180 --> 00:06:52,430 And also 2000 each one and close off the each one and also update us to that so that I can add to the 70 00:06:52,760 --> 00:06:53,570 TEMEL object. 71 00:06:56,300 --> 00:07:00,560 And next up, let's do the body so that can be contained within a paragraph. 72 00:07:04,560 --> 00:07:06,570 And that's under in full body. 73 00:07:07,410 --> 00:07:08,760 And then lastly, 74 00:07:11,880 --> 00:07:16,440 we'll add one more line, and those can be within the small Tighes. 75 00:07:19,730 --> 00:07:21,650 And I can just take contain the ID. 76 00:07:26,000 --> 00:07:30,740 And as well, let's add in the user I.D.. 77 00:07:36,350 --> 00:07:46,490 So that gives us all of the information that is returned back, so user I.D. and let's try it so that 78 00:07:46,490 --> 00:07:54,740 output's the content to the page and then we can make additional requests to that content and return 79 00:07:54,740 --> 00:07:55,110 it back. 80 00:07:55,550 --> 00:07:59,060 So we're returning it back and we're requesting by ID. 81 00:07:59,630 --> 00:08:02,660 So let's make an update to the input field. 82 00:08:03,260 --> 00:08:11,120 Instead of having a value of hello world, we'll give it a value of one and then the input elements. 83 00:08:12,260 --> 00:08:19,220 Let's set the attribute and we'll update the type setting the type to be no type. 84 00:08:22,800 --> 00:08:28,730 And also update the width of the element, so it's rather wide right now. 85 00:08:31,640 --> 00:08:33,320 And give it a class of no. 86 00:08:35,170 --> 00:08:38,770 So it's the font size to make it fairly large 87 00:08:41,410 --> 00:08:42,430 set with. 88 00:08:44,830 --> 00:08:54,430 And I'm going to actually do a max width of it to the max of 70 pics, and then let's add the class 89 00:08:54,610 --> 00:08:55,540 to that element. 90 00:08:57,010 --> 00:09:03,370 So input elements using class list to add a class of number. 91 00:09:05,620 --> 00:09:07,300 So it gives us a nice big number. 92 00:09:08,770 --> 00:09:17,000 So let's get the value from the input and we can just simply add it to the posts. 93 00:09:18,910 --> 00:09:20,820 So that's number one. 94 00:09:21,610 --> 00:09:26,830 That's with the ID, number two with the ID number three. 95 00:09:27,130 --> 00:09:28,440 Let's go back to one. 96 00:09:29,100 --> 00:09:32,290 So that again returns back the one with ID number one. 97 00:09:32,540 --> 00:09:36,730 So we're able to select the post that we want to output the content from. 98 00:09:37,000 --> 00:09:41,230 And I put it to the page and that creates the interaction. 99 00:09:43,860 --> 00:09:46,080 And I'll also update the button. 100 00:09:49,030 --> 00:10:01,540 And tax content select post, so that allows us to make a selection of the different posts and put them 101 00:10:01,540 --> 00:10:09,670 into the page, and if we want to move it right up at the top instead of append, let's do a prepend. 102 00:10:13,150 --> 00:10:19,090 So what this will do is this will add the newest post to the top so that we don't always have to scroll 103 00:10:19,090 --> 00:10:21,340 down to see which one has been added. 104 00:10:22,330 --> 00:10:28,180 Also going to apply some quick styling to that to create a class of box. 105 00:10:29,260 --> 00:10:34,480 So create a border around it so that we can distinguish between the different posts. 106 00:10:35,440 --> 00:10:44,890 Also, add a border radius so it's slightly rounded and then some padding for the content. 107 00:10:45,880 --> 00:10:49,280 Also adding in the box sizing. 108 00:10:50,710 --> 00:10:55,240 So using the border box and save that. 109 00:10:55,250 --> 00:10:56,890 And also let's do a margin. 110 00:11:03,880 --> 00:11:05,620 And left and right can be auto. 111 00:11:07,490 --> 00:11:15,350 And also the width of this to be 80 pics, so that's centered and it's that looks like and of course, 112 00:11:15,350 --> 00:11:16,610 we need to still apply. 113 00:11:18,870 --> 00:11:29,310 So within the main class list, add and add the Boxtel, so that way we're outputting the contents on 114 00:11:29,310 --> 00:11:29,720 the page. 115 00:11:35,230 --> 00:11:41,800 In this lesson, make the connection to the adjacent endpoint, create the user selected response data 116 00:11:41,950 --> 00:11:47,920 and output it to the webpage practice and try out the different end points and you could be ready to 117 00:11:47,920 --> 00:11:49,060 move on to the next lesson. 118 00:11:49,310 --> 00:11:52,390 We're going to continue to work with the JSON Placeholder API.