1
00:00:01,470 --> 00:00:07,770
Once we're able to make a connection and get the YouTube data, then using JavaScript, returning the

2
00:00:07,950 --> 00:00:14,550
JSON as a JavaScript object, we can output the content on the page with JavaScript.

3
00:00:14,880 --> 00:00:21,750
So we haven't applied any styling yet, but we are returning back all of the search results for that

4
00:00:21,750 --> 00:00:25,230
particular search query and outputting into the console.

5
00:00:25,260 --> 00:00:29,280
So this is the query that we're making using this request.

6
00:00:29,290 --> 00:00:29,800
You are all.

7
00:00:30,000 --> 00:00:33,140
So if we do a copy or we can open it in the new tab.

8
00:00:33,450 --> 00:00:40,260
And so this is the full JSON data that we're turning back and pulling out the data that we want to use

9
00:00:40,260 --> 00:00:41,420
an output to the page.

10
00:00:41,670 --> 00:00:46,580
So we're going to be using title description and also the high image.

11
00:00:46,600 --> 00:00:52,170
So whatever the high images and then also we need the ID of the video in order to link to it.

12
00:00:52,380 --> 00:01:00,180
And once we return it back into JavaScript, then using the JavaScript to create the page content is

13
00:01:00,180 --> 00:01:01,930
the next step once we have the data.

14
00:01:02,910 --> 00:01:05,490
So that's what we're constructing in this lesson.

15
00:01:05,760 --> 00:01:12,510
And outputting the JSON data to the page, updating our application to have a search and then allow

16
00:01:12,510 --> 00:01:18,900
for the search to connect to the API and output the content that's coming back from YouTube onto our

17
00:01:18,900 --> 00:01:19,260
page.

18
00:01:19,620 --> 00:01:23,010
So for the search, we're also going to need an input field.

19
00:01:23,470 --> 00:01:25,800
So let's just create a quick input field here.

20
00:01:25,950 --> 00:01:28,320
And of course, you can do this with JavaScript as well.

21
00:01:28,710 --> 00:01:36,950
And I'm just going to get this search queue for search query and select it with JavaScript.

22
00:01:37,440 --> 00:01:40,350
So we're making our selection.

23
00:01:41,160 --> 00:01:45,060
We can just call the search query and then using the documents.

24
00:01:48,700 --> 00:01:54,510
Query selector and select an element with a class of search.

25
00:01:54,830 --> 00:02:03,700
Q And this way we have an input field that whenever we click the button we can make the search happen

26
00:02:04,270 --> 00:02:11,410
and we can update the text here, search YouTube for the button, and then of course we apply some styling

27
00:02:11,410 --> 00:02:12,100
afterwards.

28
00:02:12,370 --> 00:02:19,780
So we want to make all of the basic functionality first and then have the updates afterwards to the

29
00:02:19,780 --> 00:02:24,940
styling and the way the application functions once we've debugged it and made sure that it is working

30
00:02:24,940 --> 00:02:25,690
as expected.

31
00:02:26,080 --> 00:02:31,990
So now we've got the search YouTube, so we want to update the term that we're searching for.

32
00:02:32,560 --> 00:02:35,980
So in this case, we're searching for Q which is test.

33
00:02:36,460 --> 00:02:44,530
So we want to update that and use the search query and just return back whatever value we currently

34
00:02:44,530 --> 00:02:47,470
have in there and if there's no value.

35
00:02:50,140 --> 00:02:52,040
Then we can just search by test.

36
00:02:53,860 --> 00:03:00,730
So either way, we're going to be performing a search and let's take a closer look at what we've got

37
00:03:00,730 --> 00:03:01,080
here.

38
00:03:01,120 --> 00:03:07,000
So we've got the search parameters and if we want to search for JavaScript.

39
00:03:09,910 --> 00:03:16,720
And it's clear that so we're making a request for JavaScript contents, and again, it is returning

40
00:03:16,720 --> 00:03:18,940
back to the most relevant content.

41
00:03:19,750 --> 00:03:21,690
So this is a search result.

42
00:03:23,170 --> 00:03:29,110
The idea of the video and then the main information that we're going to be after is going to be within

43
00:03:29,110 --> 00:03:29,690
the snippet.

44
00:03:30,580 --> 00:03:32,050
So we've got title words.

45
00:03:32,050 --> 00:03:33,880
JavaScript is description.

46
00:03:34,180 --> 00:03:37,650
There's also the published time and there's also thumbnails.

47
00:03:38,170 --> 00:03:43,120
So it's going to be nice when we put out the default thumbnail onto the page.

48
00:03:43,300 --> 00:03:46,270
And we can also do the high as well as the medium.

49
00:03:46,870 --> 00:03:50,290
So they do have the height and the width there of each one of these sizes.

50
00:03:51,070 --> 00:03:53,290
And we want to output the title.

51
00:03:53,470 --> 00:04:00,480
When I put the description of the channel a link to the video and then as well as an image of the video.

52
00:04:01,000 --> 00:04:05,730
So every time the user searches, then we can return back and we can output those 10 results.

53
00:04:06,460 --> 00:04:12,580
So let's create a function in order to handle the output of the results and we can output them to the

54
00:04:12,580 --> 00:04:15,610
page just over here where we're making the request.

55
00:04:15,940 --> 00:04:23,940
And also in this case, we should have a catch to catch any of the errors that might be happening.

56
00:04:24,220 --> 00:04:31,920
So in case YouTube, in case we're over our quota or if there's any other errors that might be happening,

57
00:04:32,410 --> 00:04:35,700
so is a good idea to include the cache within the Thach request.

58
00:04:38,050 --> 00:04:46,720
So as we loop through the items and if we get data back, then we can take output and update in our

59
00:04:46,960 --> 00:04:50,100
HTML and just clear out the entire HTML.

60
00:04:50,320 --> 00:04:55,650
So that way we're ready to add to output as we create new items.

61
00:04:56,860 --> 00:05:06,460
So within the function make I just call it make card lists are going to be making these cards for the

62
00:05:06,460 --> 00:05:11,140
YouTube videos and then returning those back and then that will make it easy for us to apply styling.

63
00:05:13,870 --> 00:05:23,140
So within here, we can just use whatever the data is and then for the make card, we'll put that content

64
00:05:24,910 --> 00:05:33,100
and let's do it a different way where we've got the HTML or element.

65
00:05:33,490 --> 00:05:36,130
So it's going to return back the element that it created.

66
00:05:37,060 --> 00:05:46,270
And then we can take output and append the element that was just created and let's create that first

67
00:05:46,270 --> 00:05:46,600
element.

68
00:05:46,630 --> 00:05:49,260
So this is going to be where we've got the main container.

69
00:05:49,840 --> 00:05:56,920
So we'll just call it main and then using the document to create elements, let's create a mean div.

70
00:05:56,920 --> 00:06:03,910
And this is going to hold the all of the information and then we can return back that main object and

71
00:06:03,910 --> 00:06:11,290
then within mean for now, let's add in the update, the text content, and we'll change this afterwards.

72
00:06:12,010 --> 00:06:19,960
This is just to make sure that we are being able to get the data and output some of the data and find

73
00:06:19,960 --> 00:06:21,400
out within the main content.

74
00:06:21,400 --> 00:06:22,420
Let's just write test.

75
00:06:24,400 --> 00:06:31,420
So we should get back test results there and we do see the data that's being output there, so within

76
00:06:31,420 --> 00:06:32,350
the snippet.

77
00:06:36,420 --> 00:06:47,700
Let's select the video content and use the data snippet object and within the video, now that we've

78
00:06:47,700 --> 00:06:52,490
got it within that data snippet object, we can just select the object property names.

79
00:06:53,340 --> 00:06:57,690
So this way, it's returning back all of the content as titles there.

80
00:06:58,560 --> 00:07:01,410
So it's got a number of items there.

81
00:07:01,620 --> 00:07:07,220
And let's type in JavaScript to see if it updates and changes their search results.

82
00:07:07,920 --> 00:07:13,950
So whatever our search results are, it's going to be returning back to the most relevant to the 10

83
00:07:13,950 --> 00:07:16,250
most relevant videos from our search.

84
00:07:16,620 --> 00:07:18,240
And that's what we're putting on the page.

85
00:07:21,860 --> 00:07:28,010
So we're grabbing the title and we're adding that into the main element, so ultimately we want to have

86
00:07:28,010 --> 00:07:32,310
more of a constructed object for these elements.

87
00:07:33,620 --> 00:07:41,120
So let's take the main and add class list and I'll add the class of box.

88
00:07:43,940 --> 00:07:52,880
And this way, within the styling, selecting the elements class of box to do 50 percent with.

89
00:07:55,220 --> 00:07:58,730
And set up a margin or actually set up housing for.

90
00:08:00,320 --> 00:08:08,990
And update the display to in line block, so this stacked next to each other and I'll update this afterwards

91
00:08:08,990 --> 00:08:11,470
to just see how it returns back the results.

92
00:08:12,290 --> 00:08:14,720
So we've got it of this stacked order.

93
00:08:15,890 --> 00:08:20,960
And let's apply the box sizing as I want to use a more strict format.

94
00:08:20,970 --> 00:08:25,930
So if I do 50 percent, but I have padding, then that's going to stack them separately.

95
00:08:26,420 --> 00:08:28,310
And if I add in a border.

96
00:08:29,510 --> 00:08:36,470
So what's happening here is this is just a styling thing that if we're doing 50 percent and then we're

97
00:08:36,470 --> 00:08:40,610
also adding a border, so it's going to be over 50 percent and that's why they're stocking.

98
00:08:40,940 --> 00:08:47,840
Whereas if I go under 50 percent or if I do 30 percent, it's going to stack them differently because

99
00:08:47,840 --> 00:08:50,740
we're taking one pic of the border and then each one has padding.

100
00:08:51,110 --> 00:08:52,790
So there is a way to fix this.

101
00:08:53,210 --> 00:08:58,220
So select all of the elements and we'll apply the property for the box sizing.

102
00:08:58,700 --> 00:09:07,070
And if we do the border box, that will account for the 50 percent and allow us to stock at 50 percent

103
00:09:07,070 --> 00:09:08,570
with for each one of those.

104
00:09:11,480 --> 00:09:18,950
Let's also do margin and we'll add in a margin at the top and at the bottom, so do 10 picks and then

105
00:09:18,950 --> 00:09:19,460
zero.

106
00:09:23,280 --> 00:09:31,590
So that way they're spacing in between each one and for the box will have a paragraph and that will

107
00:09:31,590 --> 00:09:42,090
allow us to separate out the paragraph so we can do text transform and we just turn it to uppercase.

108
00:09:42,390 --> 00:09:45,360
So you can do that with JavaScript and then you can also do that with.

109
00:09:46,970 --> 00:09:51,770
Styling as well, whatever you prefer to do, so within the main.

110
00:09:55,170 --> 00:10:01,140
Let's create the first paragraph, so there's going to be the paragraph, we're going to put the title

111
00:10:01,140 --> 00:10:09,900
information, so create element and just create a quick paragraph and then for the paragraph, update

112
00:10:09,900 --> 00:10:15,330
the text content to be whatever the video title is and then mean.

113
00:10:15,900 --> 00:10:20,640
And we're going to tend to mean the new newly created paragraph.

114
00:10:20,970 --> 00:10:28,080
So that provides us more structure for the content and also provides us the ability to do styling for

115
00:10:28,080 --> 00:10:29,510
the for those elements.

116
00:10:30,030 --> 00:10:35,520
And I'm going to also set a default height and set it for one hundred pics and get rid of the margins

117
00:10:36,300 --> 00:10:38,360
and let's try it out and see what this looks like.

118
00:10:39,600 --> 00:10:43,790
So do test and see what results we're getting back if we do.

119
00:10:43,800 --> 00:10:48,080
Google updating some of the results there.

120
00:10:50,460 --> 00:10:56,100
And we'll try JavaScript, so it's again updating the results, we want to make sure that the results

121
00:10:56,100 --> 00:10:58,000
are able to be changed.

122
00:11:00,240 --> 00:11:06,870
And let's also add in some of the other object values that we have here before doing any more styling

123
00:11:07,290 --> 00:11:09,420
so that we get all of the information that we want.

124
00:11:11,380 --> 00:11:16,240
And there is quite a bit of information that's being returned back here, so just as we got the title,

125
00:11:16,480 --> 00:11:17,680
we can get the description.

126
00:11:22,090 --> 00:11:29,940
And I was going to just create this as a div, another div, and instead of a paragraph or created as

127
00:11:29,950 --> 00:11:37,290
a and then within the div, I'll add in using the tactics so the template literals.

128
00:11:38,140 --> 00:11:42,100
And this way we can style the content for the title.

129
00:11:45,660 --> 00:11:48,930
As well as we can do the content for the description,

130
00:11:52,030 --> 00:12:01,050
so the description can maybe be another div there that's just sitting underneath and then let's close

131
00:12:01,050 --> 00:12:01,950
off that element.

132
00:12:06,750 --> 00:12:14,010
And let's also place the title still within a paragraph so I get the styling applied, but we can also

133
00:12:14,010 --> 00:12:16,610
do that within the one set, within the one statement.

134
00:12:17,280 --> 00:12:20,400
And of course, you can separate this with the JavaScript as well.

135
00:12:21,300 --> 00:12:25,350
So this is just a simple example of how we're turning back the code.

136
00:12:25,530 --> 00:12:31,640
And actually this needs to be in our HTML as we're building it out as HTML content.

137
00:12:33,150 --> 00:12:37,190
So there is some styling issues there and actually I'm going to remove it.

138
00:12:37,560 --> 00:12:43,650
And this is one of the reasons I like to do the styling afterwards is because in case things I get thrown

139
00:12:43,650 --> 00:12:43,890
off.

140
00:12:45,150 --> 00:12:47,370
So also let's add in an image.

141
00:12:49,290 --> 00:12:59,880
So the image is going to be sitting within the snippet code, so under the thumbnails, property and

142
00:12:59,880 --> 00:13:01,100
whatever image we want.

143
00:13:01,110 --> 00:13:07,080
So if you want the largest size image, let's select the largest size and we'll just get the image path.

144
00:13:09,870 --> 00:13:19,080
And this is actually going to be a thumbnail, so using the video object and let's traverse into the

145
00:13:20,310 --> 00:13:21,480
object properties.

146
00:13:22,020 --> 00:13:25,680
So just as we had title and description, we have thumbnails.

147
00:13:25,680 --> 00:13:27,360
But this is an object in itself.

148
00:13:27,660 --> 00:13:32,610
So we need to select what part, what properties we want within the thumbnails.

149
00:13:33,030 --> 00:13:35,850
And if you want to use the high, we would select high.

150
00:13:36,060 --> 00:13:40,560
And then within here, this is going to be where ultimately we've got the you are all for the image

151
00:13:40,560 --> 00:13:40,950
path.

152
00:13:41,550 --> 00:13:50,610
So if we want to set an image, let's add that into our code where we've got the image source and that's

153
00:13:50,610 --> 00:13:53,100
going to be sitting within the thumbnail variable.

154
00:13:55,380 --> 00:13:57,130
So let's see what that looks like.

155
00:13:57,130 --> 00:14:01,730
Canada search and its return back the images.

156
00:14:02,340 --> 00:14:03,720
So it looks a little bit messy.

157
00:14:04,320 --> 00:14:06,530
And this we can clean this up with styling.

158
00:14:06,840 --> 00:14:11,980
So as long as we've got the content and we might also want to have a link to it.

159
00:14:12,450 --> 00:14:15,900
So another div with a link to the video.

160
00:14:18,760 --> 00:14:26,170
And we have the information for the video links, so let's do a search because we have the ID of the

161
00:14:26,170 --> 00:14:33,970
video and that's how you can connect to the video through YouTube by selecting the ID.

162
00:14:33,970 --> 00:14:37,420
So we also have the channel ID channel title as well.

163
00:14:38,410 --> 00:14:40,430
And the video ID is the one that we're looking for.

164
00:14:40,450 --> 00:14:50,020
So we want to get back the I.D. So using the video ID instead of a snippet and then returning back the

165
00:14:50,020 --> 00:14:50,850
video ID.

166
00:14:51,190 --> 00:14:57,100
So this is still going to be contained within data because remember, for videos we did the data snippet.

167
00:14:57,430 --> 00:15:00,220
So that shortened getting content from the snippet.

168
00:15:00,460 --> 00:15:06,400
But if we want to pull back information from the video itself that we're selecting the ID and the video

169
00:15:06,400 --> 00:15:08,020
ID, so let's do that.

170
00:15:08,020 --> 00:15:09,970
And that path is going to be data.

171
00:15:13,340 --> 00:15:23,630
So it's a construct that and the path is going to be data ID and then within ID, we need to specify

172
00:15:23,630 --> 00:15:25,800
the video I.D. and this is Camil case.

173
00:15:25,800 --> 00:15:32,600
So don't forget that, capitalize the eye and I.D. and let's make sure that we're returning back the

174
00:15:32,600 --> 00:15:33,170
content.

175
00:15:33,800 --> 00:15:35,600
So there's our video ID.

176
00:15:35,600 --> 00:15:39,230
So the link to the ID and for YouTube videos.

177
00:15:43,030 --> 00:15:51,220
So in order to select the video by its ID, the ID is going to be equal the equals, whatever the ID

178
00:15:51,220 --> 00:15:51,880
value is.

179
00:15:52,420 --> 00:16:01,540
So that's how we can construct the link for the video ID and then we just need to make the link active.

180
00:16:02,140 --> 00:16:03,790
So that's our link.

181
00:16:05,080 --> 00:16:13,930
And just as we did the thumbnail link video and we can use this information in order to create the link

182
00:16:13,930 --> 00:16:14,620
for the video.

183
00:16:17,630 --> 00:16:25,070
So if we want to link it, we can put it here and link to the video.

184
00:16:29,440 --> 00:16:34,870
So whatever the path is, and let's set Target to equal underscore blank.

185
00:16:37,920 --> 00:16:42,370
And then here again, if we want to just put the past link video.

186
00:16:42,600 --> 00:16:48,720
So this is depending on what your preferences and then, of course, you can always use the crit element

187
00:16:48,720 --> 00:16:53,050
to create these elements separately if you want a different type of interaction for the elements.

188
00:16:53,430 --> 00:16:57,700
So I'm just creating it as one TEMEL blob, but that's optional as well.

189
00:16:58,260 --> 00:17:03,710
So we've got the link to the video at the bottom and there's the video that opens up when we click it.

190
00:17:04,350 --> 00:17:07,980
So of course we still need to clean it up, plus some more styling.

191
00:17:09,300 --> 00:17:16,080
But once we've got the fully functional application, try it a few times and make sure when we do do

192
00:17:16,080 --> 00:17:21,300
the search that we are getting back different search values.

193
00:17:21,540 --> 00:17:25,190
And as you can see, the images are varying in size.

194
00:17:25,890 --> 00:17:27,720
So that's something to keep in mind as well.

195
00:17:28,020 --> 00:17:33,030
And that's why it's important that you apply the right styling to the content that you're putting.

196
00:17:35,170 --> 00:17:35,410
So.

197
00:17:35,430 --> 00:17:40,520
Coming up next, we're just going to do some fine tuning and clean up the application with styling.

198
00:17:41,160 --> 00:17:45,900
So once you've got your application up and running, then you're able to apply the styling in order

199
00:17:45,900 --> 00:17:49,950
to complete your Web application, thus connecting to the YouTube API.

200
00:17:51,440 --> 00:17:56,870
Thanks for this lesson to customize your request, your URL, returning back the parameters that you

201
00:17:56,870 --> 00:18:03,800
want to put the results into the console so you can take a look at the returned values and select the

202
00:18:03,800 --> 00:18:10,010
properties that you want to use in JavaScript and then get those property values output to them to JavaScript.

203
00:18:10,160 --> 00:18:14,930
You can also check them within the console to make sure that you're getting the right values and then

204
00:18:14,930 --> 00:18:21,680
select and update the page content within the HTML with the content coming from the YouTube JSON results

205
00:18:21,920 --> 00:18:25,440
and output them to your page depending on what the user is searching.

206
00:18:25,610 --> 00:18:29,030
There should be different results returned back for those search results.