1 00:00:00,330 --> 00:00:07,050 So in this lesson, we are going to be connecting to the YouTube API, making a Thach request and returning 2 00:00:07,050 --> 00:00:09,330 the data back as a JavaScript object. 3 00:00:09,450 --> 00:00:12,560 So it's going to be ready to be used within our Web application. 4 00:00:12,990 --> 00:00:15,390 So we've got a button, we click the button. 5 00:00:15,540 --> 00:00:22,830 It constructs the endpoint, your URL here with all the parameters that were specified and then returns 6 00:00:22,830 --> 00:00:26,780 back an array of all the matching results. 7 00:00:27,210 --> 00:00:30,470 And then what we're going to do as well as we're going to loop through the results. 8 00:00:30,840 --> 00:00:37,080 So we've got a lot of JSON data coming back from YouTube that we can make use of within our Web application. 9 00:00:38,750 --> 00:00:44,330 This lesson we are going to be connecting to the YouTube API, so we do need to have some setup for 10 00:00:44,330 --> 00:00:44,620 this. 11 00:00:44,630 --> 00:00:49,010 I've created the indexed HTML file linking it to pro five. 12 00:00:49,020 --> 00:00:52,150 G.S. created the profile case file files. 13 00:00:52,180 --> 00:00:53,350 We are ready to go. 14 00:00:53,540 --> 00:01:02,130 We want to make JSON connection and get YouTube JSON data and output it to the page in this lesson. 15 00:01:02,480 --> 00:01:05,150 So let's go ahead and open up the browser. 16 00:01:05,150 --> 00:01:08,150 And I do have the editor on the left hand side. 17 00:01:08,180 --> 00:01:15,650 So this is the Visual Studio Code and as well the JavaScript file. 18 00:01:15,650 --> 00:01:20,420 And then on the right hand side, I've got my browser window and this is running within Chrome. 19 00:01:20,630 --> 00:01:25,070 So we've got the index file showing here in the display area. 20 00:01:25,460 --> 00:01:31,040 And I'm going to go over to a website for developers, dot Google, dot com forward slash YouTube, 21 00:01:31,040 --> 00:01:33,380 V3, QuickStart, G.S.. 22 00:01:33,620 --> 00:01:38,690 So it gives you a QuickStart overview of what you're going to need in order to connect to the YouTube 23 00:01:38,690 --> 00:01:39,370 API. 24 00:01:39,740 --> 00:01:42,710 So that's what we want to do in this lesson, is make a connection. 25 00:01:42,860 --> 00:01:49,340 And there is some setup here because this one is going to require an API key in order to make the connection. 26 00:01:49,520 --> 00:01:55,130 And then also it's got some examples of how to make that connection within the channel. 27 00:01:55,370 --> 00:02:00,560 So you can do quite a bit with the API and on the guides part within the guides. 28 00:02:00,770 --> 00:02:05,080 And we're selecting JavaScript because that's the coding language that we are going to be using. 29 00:02:05,090 --> 00:02:12,440 You are going to need to have a Google account in order to connect to the Google Cloud Service and create 30 00:02:12,440 --> 00:02:17,760 your APIC so we can go over to set up the project and the credentials. 31 00:02:17,780 --> 00:02:19,790 So first of all, we need to set up a project. 32 00:02:20,060 --> 00:02:27,170 So going into the developers dot Google dot com, so open that link up and that's going to open up the 33 00:02:27,170 --> 00:02:28,970 cloud API console. 34 00:02:29,630 --> 00:02:32,060 And from here you can select and. 35 00:02:33,930 --> 00:02:40,740 See existing API libraries and then the one that we're connecting to is going to be this YouTube one. 36 00:02:42,250 --> 00:02:48,940 And you've got some options here on Kallick to manage the API, so this will allow you to manage the 37 00:02:48,940 --> 00:02:52,030 API and then you can also check your quotas. 38 00:02:52,300 --> 00:02:54,990 There are quotas on connecting to the APIs. 39 00:02:55,280 --> 00:03:00,790 You can get your metrics and as well you can set up credentials for the API. 40 00:03:01,730 --> 00:03:04,430 So for the credentials and for the AP. 41 00:03:06,470 --> 00:03:11,030 You need to create this within a project, so to create a new project. 42 00:03:11,060 --> 00:03:13,250 I've already got a few projects that I have created. 43 00:03:13,790 --> 00:03:19,880 So to create a new project, you just select at the top here within the Google APIs and do new project. 44 00:03:21,840 --> 00:03:30,030 And this will give you the walkthrough and the project name that I'm going to be creating is going to 45 00:03:30,030 --> 00:03:30,540 be the. 46 00:03:33,040 --> 00:03:34,640 YouTube API connection. 47 00:03:34,990 --> 00:03:41,530 So when you do create an API, it this can't be changed later and it's going to give you an indication 48 00:03:41,530 --> 00:03:45,430 of what the API it is going to be just underneath the project name. 49 00:03:45,820 --> 00:03:48,060 You can also set it up within a location. 50 00:03:48,880 --> 00:03:50,920 So once you've created your project. 51 00:03:53,400 --> 00:03:58,950 Click the create the project, and then you can switch to the projects here in the top left hand side 52 00:03:59,310 --> 00:04:01,410 so you can also select the project, just stuff. 53 00:04:01,410 --> 00:04:02,250 You've created it. 54 00:04:03,160 --> 00:04:11,410 So is selecting the project will allow you to enable APIs and services, and we do want to enable the 55 00:04:12,220 --> 00:04:14,350 APIs and services for this. 56 00:04:15,940 --> 00:04:21,640 So selecting the API that we want to enable and just make sure that you do have the project again up 57 00:04:21,640 --> 00:04:25,480 here at the top with the project dropdown and then click that enable. 58 00:04:25,930 --> 00:04:28,150 And that's going to enable the API. 59 00:04:28,630 --> 00:04:32,200 And then you can also manage the settings for the API as well. 60 00:04:33,220 --> 00:04:37,210 So once you've set that up, then there's also some documentation. 61 00:04:37,210 --> 00:04:40,620 So there's tutorials and documentation on how to connect to it. 62 00:04:40,810 --> 00:04:45,220 So we're just making a basic connection where we're going to do a search within their API. 63 00:04:48,600 --> 00:04:55,170 And it gives you the overall basic traffic errors, any of the issues that you might have had, let's 64 00:04:55,170 --> 00:04:59,840 create some credentials for those who are going to need to have an API key to connect. 65 00:05:00,270 --> 00:05:06,690 So up at the top, once again, under the credentials tab and the APIs and services select create the 66 00:05:06,870 --> 00:05:08,100 API key. 67 00:05:09,600 --> 00:05:19,440 And this is going to generate the key, so copy the API key and open up your editor and within here. 68 00:05:24,220 --> 00:05:30,560 We can just call it APIC and I'll paste in the APIC as we're going to need it within the project. 69 00:05:31,200 --> 00:05:38,850 So once we've set up our API key and we're going to need to use the ability to make the request to the 70 00:05:38,850 --> 00:05:41,580 API for the YouTube channel. 71 00:05:43,570 --> 00:05:50,050 If you do need authorization to your YouTube channel, then you are also going to need to create an 72 00:05:50,050 --> 00:05:56,460 oath client ID so that can be done in the same place here where you can do an oath to client. 73 00:05:58,510 --> 00:06:05,800 So once you've got your epik, you can use the API Explorer widget in the side menu to retrieve information 74 00:06:05,800 --> 00:06:08,440 about the Google Developers API. 75 00:06:09,940 --> 00:06:20,740 So that's going back to the API and select the YouTube API once again, and then here's where you can 76 00:06:20,740 --> 00:06:23,100 try the API in the Windows Explorer. 77 00:06:24,430 --> 00:06:29,050 So every request that you make with a specific API key. 78 00:06:30,920 --> 00:06:35,870 And it gives you once again, information to connect to the developers console to get the API key. 79 00:06:39,990 --> 00:06:46,320 It's got the Web URL to make the connection to you, and you can do I get requests as well as a post 80 00:06:46,320 --> 00:06:48,400 request to that end point. 81 00:06:49,110 --> 00:06:53,880 So go ahead and copy the Web URL for the YouTube and point. 82 00:06:56,250 --> 00:06:58,080 And I'm going to update The View here. 83 00:06:58,080 --> 00:06:59,820 So toggle the Wardrop. 84 00:07:01,260 --> 00:07:08,220 And so that you are all that we're connecting to is going to be the Google APIs dot com forward, slash 85 00:07:08,220 --> 00:07:14,550 YouTube forgiver three and four, the V three. 86 00:07:14,550 --> 00:07:22,200 There's a few different paths that you can select so you can go delete, download, insert list, update, 87 00:07:22,560 --> 00:07:23,220 insert. 88 00:07:24,300 --> 00:07:27,720 And we want to we're not looking through the channel sections. 89 00:07:27,720 --> 00:07:28,710 We want to do a search. 90 00:07:29,070 --> 00:07:31,740 So these are all pertaining to particular channel. 91 00:07:33,600 --> 00:07:40,520 You can update comments and so on now, typically with JavaScript, because this is front end code, 92 00:07:40,890 --> 00:07:44,100 you're not going to be manipulating your. 93 00:07:45,720 --> 00:07:46,680 YouTube channel. 94 00:07:48,250 --> 00:07:52,000 Because this epic and the cold is going to be sitting on the client side. 95 00:07:53,960 --> 00:07:59,140 So basically, that's going to mean that it's easy to retrieve within the source code of the application, 96 00:07:59,780 --> 00:08:05,270 so you've got to be mindful of that, that once you're sharing this information, it is going to be 97 00:08:05,270 --> 00:08:06,890 available within the source code. 98 00:08:09,460 --> 00:08:11,140 So in order to do a search. 99 00:08:13,430 --> 00:08:17,690 Select the search for the reference and the overview on the left hand side. 100 00:08:19,860 --> 00:08:25,950 And this is going to give you an example of what you're going to expect for the JSON structure, for 101 00:08:25,950 --> 00:08:31,920 the search returned results, and there's quite a bit of information that comes back within these results. 102 00:08:32,870 --> 00:08:35,540 So you can search for different types of properties. 103 00:08:37,240 --> 00:08:40,270 And you can also learn more about the search. 104 00:08:43,850 --> 00:08:45,560 Where you can try the. 105 00:08:47,610 --> 00:08:55,080 AP on the right hand side here, so you can search by keyword related events and this is going to be 106 00:08:55,080 --> 00:08:57,640 the TTP request parameter. 107 00:08:57,900 --> 00:08:59,730 So this is using the get method. 108 00:09:00,630 --> 00:09:06,750 So it's the same web you URL, but we're specifying for routing it to search. 109 00:09:07,140 --> 00:09:11,760 So that's where we need to specify that this is a search that we're going to be searching for. 110 00:09:14,860 --> 00:09:19,090 So I can save that and just update the web, you are all that we're going to be making the connection 111 00:09:19,090 --> 00:09:24,560 to, and here is where all of the different parameters that you can enter into. 112 00:09:25,210 --> 00:09:30,550 So there's quite a bit that you can customize the search fields and in this case, want to just search 113 00:09:30,550 --> 00:09:32,860 for the word test. 114 00:09:33,580 --> 00:09:35,830 So it's going to be searching within the query. 115 00:09:36,730 --> 00:09:45,490 You can specify different parameters here, or you could check to see the different parts that we want 116 00:09:45,490 --> 00:09:45,910 to return. 117 00:09:46,240 --> 00:09:50,530 We want to return back a snippet and there's also the maximum results. 118 00:09:50,740 --> 00:09:52,230 So this is an integer value. 119 00:09:52,480 --> 00:09:54,610 So let's say you only wanted 10 results back. 120 00:09:54,620 --> 00:09:55,420 You can add that. 121 00:09:57,060 --> 00:09:59,010 So if we don't use the oath. 122 00:10:02,880 --> 00:10:09,090 We can show the code in order to make that request, so within JavaScript, it gives you an example 123 00:10:09,090 --> 00:10:15,260 of the code and it provides you examples on all of the different code that you can make the request. 124 00:10:16,800 --> 00:10:24,900 So we're going to be making the HTP request so it provides the path for the HTTP request within the 125 00:10:24,900 --> 00:10:26,730 HTP example here. 126 00:10:27,220 --> 00:10:28,730 So that's the request that we've made. 127 00:10:29,370 --> 00:10:30,780 So go ahead and open that. 128 00:10:31,200 --> 00:10:36,410 And if you don't enter in a correct API key, you're going to get this message. 129 00:10:36,420 --> 00:10:42,720 So it is expecting the API key within their request parameter and this is going to be within the get 130 00:10:42,720 --> 00:10:43,320 request. 131 00:10:45,560 --> 00:10:50,540 So once you put your API key, you're going to see that you're getting that JSON data being returned 132 00:10:50,540 --> 00:10:50,860 back. 133 00:10:51,290 --> 00:10:54,170 So that's how you can construct your query string. 134 00:10:54,560 --> 00:11:00,800 And then, of course, you can customize any of these parameters and you don't need the OS for the search, 135 00:11:01,590 --> 00:11:04,310 but for some of the parameters, you might need a lot. 136 00:11:04,850 --> 00:11:08,000 So, again, it's up to you to whether you need it or not. 137 00:11:08,000 --> 00:11:14,600 And you can try out the testing of the API and see what data you get returned back. 138 00:11:14,810 --> 00:11:23,300 And once you're able to access the video data, that means that we can go a few steps further and we 139 00:11:23,300 --> 00:11:26,360 can pull this into our JavaScript application and make use of it. 140 00:11:28,530 --> 00:11:31,260 And then you can provide various customizations. 141 00:11:32,480 --> 00:11:38,330 So if you want to have the view count the relevance, which is the default search pattern, you can 142 00:11:38,330 --> 00:11:43,190 add that in as well if you want to search for under a particular location and radius. 143 00:11:44,830 --> 00:11:47,470 And right now, it's returning back to part as a string. 144 00:11:50,460 --> 00:11:54,510 And you do have a few options here where you can return it back as a snippet. 145 00:11:55,990 --> 00:11:59,560 And let's execute this one so we don't need to off. 146 00:12:00,910 --> 00:12:06,000 So this snippet will return back more detailed results within the API. 147 00:12:07,000 --> 00:12:12,610 So let's do a comparison if we add in the snippet into the Web URL. 148 00:12:13,930 --> 00:12:17,440 So capturing that, let's capture that full path. 149 00:12:17,740 --> 00:12:20,160 And then again, it does require our API key. 150 00:12:21,580 --> 00:12:26,590 So let's copy and paste that in and then we'll try it with the JavaScript code. 151 00:12:28,640 --> 00:12:35,840 And usually I do try to put it within the browser, if it's just a regular get request in order to see 152 00:12:35,840 --> 00:12:42,260 what type of content that I'm expecting to be able to return that the content back, once you're happy 153 00:12:42,260 --> 00:12:47,810 with the results that you're returning back, you can see it within the Web, URL, the JSON data. 154 00:12:47,960 --> 00:12:51,630 You can copy that Web URL and placed it into your project. 155 00:12:51,650 --> 00:12:59,660 So just over here where we've got the Web URL and then we're going to use the JavaScript code in order 156 00:12:59,660 --> 00:13:03,550 to reconstruct this and make a fetch request to the YouTube API. 157 00:13:03,920 --> 00:13:08,860 So let's go back into the project and making the button clickable. 158 00:13:09,320 --> 00:13:13,790 So we need to update and add some of the JavaScript actions. 159 00:13:14,060 --> 00:13:21,320 So selecting the button, using that document and query selector in order to select so select the element 160 00:13:21,320 --> 00:13:22,820 with a class of BTE. 161 00:13:22,820 --> 00:13:30,080 And so it's going to be our button and then also an output area, selecting the elements with a class 162 00:13:30,080 --> 00:13:30,890 of output. 163 00:13:31,220 --> 00:13:37,070 And we'll take both of those objects and make the button clickable. 164 00:13:37,280 --> 00:13:42,350 So for the button, add an event, listener and event that we're adding is going to be a click event. 165 00:13:42,890 --> 00:13:45,620 And so whenever the button gets clicked, what do we want to happen? 166 00:13:45,770 --> 00:13:47,480 And that's going to go in this block of code. 167 00:13:47,660 --> 00:13:49,850 So we actually want to make her fach request. 168 00:13:50,030 --> 00:13:55,820 So using the fetch method and we need to construct that. 169 00:13:55,820 --> 00:14:03,050 So we've got a base you URL here and we need to update and create an actual URL that we can connect 170 00:14:03,050 --> 00:14:05,770 to in order to make the connection. 171 00:14:06,110 --> 00:14:08,970 And we're going to do that dynamically with JavaScript code. 172 00:14:09,320 --> 00:14:12,620 So this will ultimately connect to whatever the you are else. 173 00:14:13,130 --> 00:14:23,900 And let's take the base, your URL and concatenate some of the other parameters here so we can also 174 00:14:23,900 --> 00:14:24,600 search. 175 00:14:24,620 --> 00:14:26,690 So we've got the search and then the questionmark. 176 00:14:26,900 --> 00:14:30,620 So snippet, we've got a particular channel that we're searching here. 177 00:14:31,970 --> 00:14:34,790 So let's select all of those parameters. 178 00:14:35,990 --> 00:14:38,240 And then we're also going to need to add in the idee. 179 00:14:38,900 --> 00:14:43,170 And these are all going to be just separated with that ampersand sign. 180 00:14:43,250 --> 00:14:49,340 So for our parameters so we can take the basic URL, they're going to add the parameters to it. 181 00:14:49,820 --> 00:14:57,500 And before we do that, all logout whatever our newly constructed URL is within the console so we can 182 00:14:57,500 --> 00:15:00,010 make sure that we've constructed it properly. 183 00:15:00,260 --> 00:15:01,550 So this is my channel. 184 00:15:01,720 --> 00:15:04,640 I'm just connecting to that channel ID. 185 00:15:04,820 --> 00:15:10,370 So I'm going to be searching the videos within my channel and we can also update the max results. 186 00:15:10,610 --> 00:15:14,120 So for right now, I think we can keep the max results there. 187 00:15:14,390 --> 00:15:17,540 Static at 10, the order relevance. 188 00:15:17,780 --> 00:15:19,310 We can keep static as well. 189 00:15:20,840 --> 00:15:24,030 We want to update what we're querying for. 190 00:15:24,050 --> 00:15:30,950 So I just have that as a value of Q And right now to just search for test for the word test in there 191 00:15:31,310 --> 00:15:38,300 and we can add that into our parameters or we can have a specific search query. 192 00:15:41,290 --> 00:15:48,610 So let's add in the search term to the parameters, and it really depends on what you want to be static 193 00:15:48,610 --> 00:15:55,180 and what you want to be able to change, how you would construct the euro that you're going to be making 194 00:15:55,180 --> 00:15:55,880 the request to. 195 00:15:56,530 --> 00:16:00,420 So in this case, I want to have the search term to be dynamic. 196 00:16:01,330 --> 00:16:04,150 So that's going to be coming from whatever the query is. 197 00:16:04,270 --> 00:16:06,460 So just Cartney together with the plus. 198 00:16:07,090 --> 00:16:13,160 And then lastly, we're going to need to have our API and connection. 199 00:16:13,180 --> 00:16:15,460 I'll just call it connection key for Conky. 200 00:16:16,300 --> 00:16:18,870 So that's going to require that and sign. 201 00:16:18,910 --> 00:16:25,870 So wherever we're updating and adding to the string and the equals sign and then plus whatever the API 202 00:16:25,870 --> 00:16:29,320 key is, and this is the one that we copied from the Google cloud console. 203 00:16:30,250 --> 00:16:31,990 So add all of this together. 204 00:16:32,350 --> 00:16:34,150 So get the Conky there. 205 00:16:34,180 --> 00:16:36,870 And of course, you can customize this as needed. 206 00:16:36,880 --> 00:16:39,610 So depending on what you want to return back as the results. 207 00:16:39,910 --> 00:16:45,640 So once we've selected it, we're going to build the Eurail and within the console, let's click the 208 00:16:45,640 --> 00:16:46,110 euro. 209 00:16:46,240 --> 00:16:51,170 And it looks like we were able to successfully make the connection and return back some data. 210 00:16:51,490 --> 00:16:53,000 So that looks pretty good. 211 00:16:53,290 --> 00:16:57,700 So that means that we can now try the euro with Thach. 212 00:16:58,450 --> 00:17:08,110 And once we make the request, whatever we got, the return results are and will return that as JSON 213 00:17:08,530 --> 00:17:12,640 and then get that information as our data. 214 00:17:12,670 --> 00:17:17,680 So it's going to be our YouTube data that's being returned back and then whatever we want to do with 215 00:17:17,680 --> 00:17:18,300 that data. 216 00:17:18,340 --> 00:17:22,960 So for right now, we're just going to log it out into the console and put the data there. 217 00:17:23,440 --> 00:17:26,880 So we're ready to try the application and load the YouTube data. 218 00:17:27,070 --> 00:17:29,040 So there's our YouTube data. 219 00:17:29,410 --> 00:17:34,060 And if we want to get all of the returned results, that's going to be within the items array. 220 00:17:34,390 --> 00:17:37,740 And then we could loop through the items array and output the results. 221 00:17:37,750 --> 00:17:39,470 So let's do that before we conclude. 222 00:17:40,420 --> 00:17:44,020 So within the items, are we using for each? 223 00:17:44,890 --> 00:17:50,950 We're going to loop through that array object and return back each one of the items. 224 00:17:51,190 --> 00:17:59,890 So this can be whatever the entry is and I'll just refer to them as item and we'll consult, logout 225 00:17:59,890 --> 00:18:01,290 each one of those objects. 226 00:18:01,810 --> 00:18:07,890 So that will allow us to better prepare for the content that we can going to need to output to the page. 227 00:18:08,230 --> 00:18:12,030 So each one of the entries is broken down. 228 00:18:12,070 --> 00:18:16,150 So it's got its tag, ID kind snippet and then within snippet. 229 00:18:16,390 --> 00:18:18,720 That's an object contains quite a bit of information there. 230 00:18:19,360 --> 00:18:23,920 There's also the ID, so the video ID, the kind and so on. 231 00:18:24,160 --> 00:18:28,420 And all of that is as well documented on the Google website. 232 00:18:28,960 --> 00:18:34,450 So if you want to find out more about what all of these objects and all of the object details are, 233 00:18:34,600 --> 00:18:38,700 you can always find that out within the API data. 234 00:18:39,190 --> 00:18:42,370 So we're making the request here and let's minimize that. 235 00:18:42,640 --> 00:18:49,420 And it's got all of this information here as to what it's being returned back, the different parameters 236 00:18:49,690 --> 00:18:53,230 and what type of value it's expecting. 237 00:18:53,230 --> 00:18:55,330 So most of them are expecting string values. 238 00:18:56,780 --> 00:19:03,890 This one is expecting a date and time object and again, string values, this one's an integer for the 239 00:19:03,890 --> 00:19:04,700 max results. 240 00:19:05,090 --> 00:19:10,760 So if you're doing unassigned, it's going to give you a default of five results that get returned back. 241 00:19:12,500 --> 00:19:15,760 And then some of them be mindful that they are booleans as well. 242 00:19:16,100 --> 00:19:18,950 So there's all kinds of different data types that it's expecting. 243 00:19:19,790 --> 00:19:22,620 And here's an example as well of the response. 244 00:19:23,030 --> 00:19:24,770 So this is a typical response. 245 00:19:24,950 --> 00:19:30,620 So we've got the kind, the e-TAG, the next page token, the previous page token, so you can move 246 00:19:30,620 --> 00:19:32,030 through to the different pages. 247 00:19:32,480 --> 00:19:36,680 And as well, we've got the items here and that's the array that we're going to be looking at in the 248 00:19:36,680 --> 00:19:37,350 next lesson. 249 00:19:37,730 --> 00:19:44,000 So once we return back the list of results that match our search criteria, we're ready to output it 250 00:19:44,000 --> 00:19:44,840 onto the page. 251 00:19:45,560 --> 00:19:47,540 In this lesson we've covered quite a bit. 252 00:19:47,550 --> 00:19:52,160 And one is that you're going to need to have a Google account in order to get your API key. 253 00:19:52,550 --> 00:19:59,210 And then once you do have your Google account, log into it and go to the Google cloud and the projects 254 00:19:59,540 --> 00:20:06,260 create a brand new project that you can use for testing and then get your API key, enable the YouTube 255 00:20:06,260 --> 00:20:14,090 API, generate key and enable the API, use the API tester in order to construct your request, your 256 00:20:14,090 --> 00:20:14,450 URL. 257 00:20:15,430 --> 00:20:21,700 So you have a model to use and make the connection, try it out within the Web browser and just make 258 00:20:21,700 --> 00:20:26,350 sure that you are getting all of the data back, there's going to be quite a bit of JSON data once you 259 00:20:26,350 --> 00:20:27,810 make a successful connection. 260 00:20:28,360 --> 00:20:34,660 So copy that key, copy the Web, URL, the request, your URL into the Web application so that you 261 00:20:34,660 --> 00:20:41,320 have it ready and you're able to just link to different values that you need to use in order to make 262 00:20:41,320 --> 00:20:44,010 the connection, create simple JavaScript. 263 00:20:44,320 --> 00:20:50,350 So allowing for the button to be clickable and then once the button gets clicked, then create the fetch 264 00:20:50,350 --> 00:21:00,730 request to the euro and return the content back into the console using JavaScript to return the response 265 00:21:00,730 --> 00:21:06,780 object that JSON response object back as a JavaScript object and input into the console. 266 00:21:06,970 --> 00:21:09,060 And you could be ready to move on to the next lesson. 267 00:21:09,370 --> 00:21:13,380 We're going to add some more functionality and update this application.