Once we're able to make a connection and get the YouTube data, then using JavaScript, returning the
JSON as a JavaScript object, we can output the content on the page with JavaScript.
So we haven't applied any styling yet, but we are returning back all of the search results for that
particular search query and outputting into the console.
So this is the query that we're making using this request.
You are all.
So if we do a copy or we can open it in the new tab.
And so this is the full JSON data that we're turning back and pulling out the data that we want to use
an output to the page.
So we're going to be using title description and also the high image.
So whatever the high images and then also we need the ID of the video in order to link to it.
And once we return it back into JavaScript, then using the JavaScript to create the page content is
the next step once we have the data.
So that's what we're constructing in this lesson.
And outputting the JSON data to the page, updating our application to have a search and then allow
for the search to connect to the API and output the content that's coming back from YouTube onto our
page.
So for the search, we're also going to need an input field.
So let's just create a quick input field here.
And of course, you can do this with JavaScript as well.
And I'm just going to get this search queue for search query and select it with JavaScript.
So we're making our selection.
We can just call the search query and then using the documents.
Query selector and select an element with a class of search.
Q And this way we have an input field that whenever we click the button we can make the search happen
and we can update the text here, search YouTube for the button, and then of course we apply some styling
afterwards.
So we want to make all of the basic functionality first and then have the updates afterwards to the
styling and the way the application functions once we've debugged it and made sure that it is working
as expected.
So now we've got the search YouTube, so we want to update the term that we're searching for.
So in this case, we're searching for Q which is test.
So we want to update that and use the search query and just return back whatever value we currently
have in there and if there's no value.
Then we can just search by test.
So either way, we're going to be performing a search and let's take a closer look at what we've got
here.
So we've got the search parameters and if we want to search for JavaScript.
And it's clear that so we're making a request for JavaScript contents, and again, it is returning
back to the most relevant content.
So this is a search result.
The idea of the video and then the main information that we're going to be after is going to be within
the snippet.
So we've got title words.
JavaScript is description.
There's also the published time and there's also thumbnails.
So it's going to be nice when we put out the default thumbnail onto the page.
And we can also do the high as well as the medium.
So they do have the height and the width there of each one of these sizes.
And we want to output the title.
When I put the description of the channel a link to the video and then as well as an image of the video.
So every time the user searches, then we can return back and we can output those 10 results.
So let's create a function in order to handle the output of the results and we can output them to the
page just over here where we're making the request.
And also in this case, we should have a catch to catch any of the errors that might be happening.
So in case YouTube, in case we're over our quota or if there's any other errors that might be happening,
so is a good idea to include the cache within the Thach request.
So as we loop through the items and if we get data back, then we can take output and update in our
HTML and just clear out the entire HTML.
So that way we're ready to add to output as we create new items.
So within the function make I just call it make card lists are going to be making these cards for the
YouTube videos and then returning those back and then that will make it easy for us to apply styling.
So within here, we can just use whatever the data is and then for the make card, we'll put that content
and let's do it a different way where we've got the HTML or element.
So it's going to return back the element that it created.
And then we can take output and append the element that was just created and let's create that first
element.
So this is going to be where we've got the main container.
So we'll just call it main and then using the document to create elements, let's create a mean div.
And this is going to hold the all of the information and then we can return back that main object and
then within mean for now, let's add in the update, the text content, and we'll change this afterwards.
This is just to make sure that we are being able to get the data and output some of the data and find
out within the main content.
Let's just write test.
So we should get back test results there and we do see the data that's being output there, so within
the snippet.
Let's select the video content and use the data snippet object and within the video, now that we've
got it within that data snippet object, we can just select the object property names.
So this way, it's returning back all of the content as titles there.
So it's got a number of items there.
And let's type in JavaScript to see if it updates and changes their search results.
So whatever our search results are, it's going to be returning back to the most relevant to the 10
most relevant videos from our search.
And that's what we're putting on the page.
So we're grabbing the title and we're adding that into the main element, so ultimately we want to have
more of a constructed object for these elements.
So let's take the main and add class list and I'll add the class of box.
And this way, within the styling, selecting the elements class of box to do 50 percent with.
And set up a margin or actually set up housing for.
And update the display to in line block, so this stacked next to each other and I'll update this afterwards
to just see how it returns back the results.
So we've got it of this stacked order.
And let's apply the box sizing as I want to use a more strict format.
So if I do 50 percent, but I have padding, then that's going to stack them separately.
And if I add in a border.
So what's happening here is this is just a styling thing that if we're doing 50 percent and then we're
also adding a border, so it's going to be over 50 percent and that's why they're stocking.
Whereas if I go under 50 percent or if I do 30 percent, it's going to stack them differently because
we're taking one pic of the border and then each one has padding.
So there is a way to fix this.
So select all of the elements and we'll apply the property for the box sizing.
And if we do the border box, that will account for the 50 percent and allow us to stock at 50 percent
with for each one of those.
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
zero.
So that way they're spacing in between each one and for the box will have a paragraph and that will
allow us to separate out the paragraph so we can do text transform and we just turn it to uppercase.
So you can do that with JavaScript and then you can also do that with.
Styling as well, whatever you prefer to do, so within the main.
Let's create the first paragraph, so there's going to be the paragraph, we're going to put the title
information, so create element and just create a quick paragraph and then for the paragraph, update
the text content to be whatever the video title is and then mean.
And we're going to tend to mean the new newly created paragraph.
So that provides us more structure for the content and also provides us the ability to do styling for
the for those elements.
And I'm going to also set a default height and set it for one hundred pics and get rid of the margins
and let's try it out and see what this looks like.
So do test and see what results we're getting back if we do.
Google updating some of the results there.
And we'll try JavaScript, so it's again updating the results, we want to make sure that the results
are able to be changed.
And let's also add in some of the other object values that we have here before doing any more styling
so that we get all of the information that we want.
And there is quite a bit of information that's being returned back here, so just as we got the title,
we can get the description.
And I was going to just create this as a div, another div, and instead of a paragraph or created as
a and then within the div, I'll add in using the tactics so the template literals.
And this way we can style the content for the title.
As well as we can do the content for the description,
so the description can maybe be another div there that's just sitting underneath and then let's close
off that element.
And let's also place the title still within a paragraph so I get the styling applied, but we can also
do that within the one set, within the one statement.
And of course, you can separate this with the JavaScript as well.
So this is just a simple example of how we're turning back the code.
And actually this needs to be in our HTML as we're building it out as HTML content.
So there is some styling issues there and actually I'm going to remove it.
And this is one of the reasons I like to do the styling afterwards is because in case things I get thrown
off.
So also let's add in an image.
So the image is going to be sitting within the snippet code, so under the thumbnails, property and
whatever image we want.
So if you want the largest size image, let's select the largest size and we'll just get the image path.
And this is actually going to be a thumbnail, so using the video object and let's traverse into the
object properties.
So just as we had title and description, we have thumbnails.
But this is an object in itself.
So we need to select what part, what properties we want within the thumbnails.
And if you want to use the high, we would select high.
And then within here, this is going to be where ultimately we've got the you are all for the image
path.
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
going to be sitting within the thumbnail variable.
So let's see what that looks like.
Canada search and its return back the images.
So it looks a little bit messy.
And this we can clean this up with styling.
So as long as we've got the content and we might also want to have a link to it.
So another div with a link to the video.
And we have the information for the video links, so let's do a search because we have the ID of the
video and that's how you can connect to the video through YouTube by selecting the ID.
So we also have the channel ID channel title as well.
And the video ID is the one that we're looking for.
So we want to get back the I.D. So using the video ID instead of a snippet and then returning back the
video ID.
So this is still going to be contained within data because remember, for videos we did the data snippet.
So that shortened getting content from the snippet.
But if we want to pull back information from the video itself that we're selecting the ID and the video
ID, so let's do that.
And that path is going to be data.
So it's a construct that and the path is going to be data ID and then within ID, we need to specify
the video I.D. and this is Camil case.
So don't forget that, capitalize the eye and I.D. and let's make sure that we're returning back the
content.
So there's our video ID.
So the link to the ID and for YouTube videos.
So in order to select the video by its ID, the ID is going to be equal the equals, whatever the ID
value is.
So that's how we can construct the link for the video ID and then we just need to make the link active.
So that's our link.
And just as we did the thumbnail link video and we can use this information in order to create the link
for the video.
So if we want to link it, we can put it here and link to the video.
So whatever the path is, and let's set Target to equal underscore blank.
And then here again, if we want to just put the past link video.
So this is depending on what your preferences and then, of course, you can always use the crit element
to create these elements separately if you want a different type of interaction for the elements.
So I'm just creating it as one TEMEL blob, but that's optional as well.
So we've got the link to the video at the bottom and there's the video that opens up when we click it.
So of course we still need to clean it up, plus some more styling.
But once we've got the fully functional application, try it a few times and make sure when we do do
the search that we are getting back different search values.
And as you can see, the images are varying in size.
So that's something to keep in mind as well.
And that's why it's important that you apply the right styling to the content that you're putting.
So.
Coming up next, we're just going to do some fine tuning and clean up the application with styling.
So once you've got your application up and running, then you're able to apply the styling in order
to complete your Web application, thus connecting to the YouTube API.
Thanks for this lesson to customize your request, your URL, returning back the parameters that you
want to put the results into the console so you can take a look at the returned values and select the
properties that you want to use in JavaScript and then get those property values output to them to JavaScript.
You can also check them within the console to make sure that you're getting the right values and then
select and update the page content within the HTML with the content coming from the YouTube JSON results
and output them to your page depending on what the user is searching.
There should be different results returned back for those search results.