And this lesson, we are going to set up the future quest, so this is in order to make sure that our
API key is working and that we get the path right and then we're going to hook up the rest of our HTML
elements in the dorm in order to make the request.
Output triggered the request output the content into the visible page area.
So for this, we're going to have a function and this function can just be called Why Search?
Or we want to call it whatever you want and passing in the event data.
So in case we do need that later on and all it's going to have right now within it.
So first of all, set up a Eurail and this URL is going to be another fairly long one.
So it's HTP s and Colen, of course.
And for Igwe Google, it's Google API is actually dot com forward slash YouTube, Ford slash V3 for
its search.
And then this is where we enter the search parameters, what we want to return back and we want to return
back.
So the part that we want to return back is a snippet.
And the other thing that we want to pass in is a key.
So we do have that key, of course, so we can add in that key sort of name that we've given it.
We can add it into the string.
And then also.
Q And this is the query.
This is a search term that we're querying for and for right now.
We can just call to and callback test.
You also have another parameter as well, and that's max results.
And what we'll do is we'll output that right now into the document.
So using query selector selecting that element with a class of output, we're going to update its text
content to whatever the contents of you are ellis' and then we'll copy and paste that you are and try
out the URL for this to make sure that it is working.
So it's fairly long there.
So just go ahead and copy that and go over to your browser and pasted it.
And if you get a bunch of data being returned back there, so you're good to go, you've got the URL
rate, you've got your key working and this is the be the first request.
You see there's all this JSON information.
So the objective of the upcoming lessons is we're going to pass through this JSON information and we're
going to make use of it and put it on our page.
So this it was an important part because it is important to test and make sure that everything is coming
in properly.
So we know we're good to go and we're ready to create our fetch request.
So going back into the JavaScript, we've got our You URL there and we can make our fetch request.
So creating such is requires the first parameter that requires is the URL that we're making the request
to and this is promise based.
So once it makes the connection, it retrieves the data, then it runs the function and this function
is going to be returning back some content.
So we've got our response data that's been returned back there.
And within that response data, there's an option to work with the JSON object and turn it into a JavaScript
object to use it.
So we're going to do that where we're taking that response data and we're using the JSON method in order
to turn it back as a JavaScript object.
And then we're placing one more promise there after that, which is where we're going to actually work
with the data.
So this is where we've got our finalized data and then we can do something with that data coming in.
And I'll show you how to work with that in the upcoming lesson.
So for now, we're just going to output that content into the console.
So now when I type of use search, you can see that we get back all of this data.
We've got 20 items there that have been returned back.
And we're going to use the upcoming lessons to pass through this and to make use of the content that's
coming back in here and then output it within our HTML page.
So that's all still to come.
So the important part of this lesson, make sure that you do get that proper you URL that you do have
content there and you can be ready to move on to the next part.
So once you are able to make a connection and once you've got the you are all correct, you're ready
to move on to the next part.
So do try that out.
And you could also output into the console or you could just simply manually copy it, update the API
key and paste in your browser.
So either way, make sure that it is working and you're ready to move on to the next part.
That's coming up.
And making use of the data that's coming back, as well as hook up the search variable within the input
field so that we can search for different things other than just test.