1
00:00:00,420 --> 00:00:04,950
And this lesson, we are going to set up the future quest, so this is in order to make sure that our

2
00:00:04,950 --> 00:00:10,170
API key is working and that we get the path right and then we're going to hook up the rest of our HTML

3
00:00:10,170 --> 00:00:12,600
elements in the dorm in order to make the request.

4
00:00:12,600 --> 00:00:16,830
Output triggered the request output the content into the visible page area.

5
00:00:17,130 --> 00:00:21,690
So for this, we're going to have a function and this function can just be called Why Search?

6
00:00:21,690 --> 00:00:25,120
Or we want to call it whatever you want and passing in the event data.

7
00:00:25,600 --> 00:00:30,330
So in case we do need that later on and all it's going to have right now within it.

8
00:00:30,360 --> 00:00:36,150
So first of all, set up a Eurail and this URL is going to be another fairly long one.

9
00:00:36,160 --> 00:00:40,260
So it's HTP s and Colen, of course.

10
00:00:40,260 --> 00:00:49,030
And for Igwe Google, it's Google API is actually dot com forward slash YouTube, Ford slash V3 for

11
00:00:49,030 --> 00:00:50,220
its search.

12
00:00:50,230 --> 00:00:54,930
And then this is where we enter the search parameters, what we want to return back and we want to return

13
00:00:54,930 --> 00:00:55,230
back.

14
00:00:55,260 --> 00:00:57,780
So the part that we want to return back is a snippet.

15
00:00:57,790 --> 00:01:01,070
And the other thing that we want to pass in is a key.

16
00:01:01,260 --> 00:01:06,060
So we do have that key, of course, so we can add in that key sort of name that we've given it.

17
00:01:06,060 --> 00:01:07,470
We can add it into the string.

18
00:01:07,800 --> 00:01:08,730
And then also.

19
00:01:08,730 --> 00:01:10,580
Q And this is the query.

20
00:01:10,590 --> 00:01:13,620
This is a search term that we're querying for and for right now.

21
00:01:13,620 --> 00:01:16,150
We can just call to and callback test.

22
00:01:16,440 --> 00:01:20,070
You also have another parameter as well, and that's max results.

23
00:01:20,490 --> 00:01:24,500
And what we'll do is we'll output that right now into the document.

24
00:01:24,870 --> 00:01:32,910
So using query selector selecting that element with a class of output, we're going to update its text

25
00:01:32,910 --> 00:01:37,830
content to whatever the contents of you are ellis' and then we'll copy and paste that you are and try

26
00:01:37,830 --> 00:01:40,500
out the URL for this to make sure that it is working.

27
00:01:41,200 --> 00:01:42,400
So it's fairly long there.

28
00:01:42,480 --> 00:01:47,580
So just go ahead and copy that and go over to your browser and pasted it.

29
00:01:47,820 --> 00:01:52,950
And if you get a bunch of data being returned back there, so you're good to go, you've got the URL

30
00:01:52,950 --> 00:01:56,730
rate, you've got your key working and this is the be the first request.

31
00:01:56,880 --> 00:01:59,180
You see there's all this JSON information.

32
00:01:59,430 --> 00:02:04,860
So the objective of the upcoming lessons is we're going to pass through this JSON information and we're

33
00:02:04,860 --> 00:02:07,280
going to make use of it and put it on our page.

34
00:02:07,590 --> 00:02:12,600
So this it was an important part because it is important to test and make sure that everything is coming

35
00:02:12,600 --> 00:02:13,290
in properly.

36
00:02:13,470 --> 00:02:17,350
So we know we're good to go and we're ready to create our fetch request.

37
00:02:17,670 --> 00:02:23,390
So going back into the JavaScript, we've got our You URL there and we can make our fetch request.

38
00:02:23,670 --> 00:02:29,700
So creating such is requires the first parameter that requires is the URL that we're making the request

39
00:02:29,700 --> 00:02:31,970
to and this is promise based.

40
00:02:32,280 --> 00:02:39,510
So once it makes the connection, it retrieves the data, then it runs the function and this function

41
00:02:39,510 --> 00:02:42,260
is going to be returning back some content.

42
00:02:42,270 --> 00:02:45,360
So we've got our response data that's been returned back there.

43
00:02:45,930 --> 00:02:54,510
And within that response data, there's an option to work with the JSON object and turn it into a JavaScript

44
00:02:54,510 --> 00:02:55,340
object to use it.

45
00:02:55,680 --> 00:03:01,770
So we're going to do that where we're taking that response data and we're using the JSON method in order

46
00:03:01,770 --> 00:03:04,890
to turn it back as a JavaScript object.

47
00:03:05,340 --> 00:03:10,020
And then we're placing one more promise there after that, which is where we're going to actually work

48
00:03:10,020 --> 00:03:10,590
with the data.

49
00:03:10,620 --> 00:03:15,210
So this is where we've got our finalized data and then we can do something with that data coming in.

50
00:03:15,540 --> 00:03:19,000
And I'll show you how to work with that in the upcoming lesson.

51
00:03:19,230 --> 00:03:22,120
So for now, we're just going to output that content into the console.

52
00:03:22,500 --> 00:03:26,820
So now when I type of use search, you can see that we get back all of this data.

53
00:03:27,000 --> 00:03:29,910
We've got 20 items there that have been returned back.

54
00:03:30,330 --> 00:03:36,210
And we're going to use the upcoming lessons to pass through this and to make use of the content that's

55
00:03:36,210 --> 00:03:40,380
coming back in here and then output it within our HTML page.

56
00:03:40,650 --> 00:03:41,790
So that's all still to come.

57
00:03:42,060 --> 00:03:48,900
So the important part of this lesson, make sure that you do get that proper you URL that you do have

58
00:03:48,900 --> 00:03:52,020
content there and you can be ready to move on to the next part.

59
00:03:52,140 --> 00:03:56,640
So once you are able to make a connection and once you've got the you are all correct, you're ready

60
00:03:56,640 --> 00:03:57,940
to move on to the next part.

61
00:03:58,200 --> 00:03:59,250
So do try that out.

62
00:03:59,250 --> 00:04:05,210
And you could also output into the console or you could just simply manually copy it, update the API

63
00:04:05,220 --> 00:04:06,650
key and paste in your browser.

64
00:04:07,050 --> 00:04:11,340
So either way, make sure that it is working and you're ready to move on to the next part.

65
00:04:11,430 --> 00:04:12,120
That's coming up.

66
00:04:12,120 --> 00:04:18,090
And making use of the data that's coming back, as well as hook up the search variable within the input

67
00:04:18,090 --> 00:04:22,050
field so that we can search for different things other than just test.