Hey there, this lesson we are going to set up and hook to some of the JavaScript that we have on the
page, so let's create an element.
We're going to call that an object called output.
And this is going to be attached to the element with the class of output.
So that way we don't have to keep typing that document query selector.
We can just have that within the usable object format as well.
We need a way to trigger the search.
So we're going to hook up that search button to add an event.
Let's start there as well as to the input we need to get the value from that input field.
So let's set all of those up and we've got our search term.
So this is going to be coming from the input field.
So selecting documents, query selector and we only have one of the input fields.
So this is going to grab the input by the input tag and that will select that that correct element under
search term.
And another one that we want to select is the button.
And this is where we're adding an event listener.
So document and selecting the elements with the class or the tag of button.
And usually I like to make sure that I do have the right elements.
So I'll type in the variables within the console just to make sure that I do have the right element
there.
And as well, we're going to do a search term just to make sure that we do have the input.
And now that we have that, we can also take that search term and we can update its attributes.
So doing set attribute, we're going to set its value and then within the value.
So for now, we're just put in test and that should be search term.
So that populates the search term with the value for us to use.
So we always have something by default and I'll update this as well going forward.
Another thing that we need to do is set up the button and add event listeners to the button.
So add event listener and that we're listening for is a click and whatever the button gets clicked,
then we're going to initiate the search.
And then here is when we do trigger the search.
The first thing that we want to do is we want to get the value that's contained within the search term.
So let's get that into a variable search and taking the search term field element or to pull back the
value so we can use that within the search term.
And that means that we can update the euro that we're constructing as well with the new search term.
The other thing, too, that we want to make sure that we do have so whenever this button gets tricked,
whatever this button gets clicked, we're going to get the search term from the input field, update
our URL that we're making our futch for and then return back the appropriate results for that.
So for now, I'm going to comment about the search and just make sure that this part is working.
Another thing, too, is that I do want to update the search term.
So I take search and I'm equal it to search, but we're going to drop it within an end code because
so we don't want to have the same spaces.
So it's going to allow us to encode that and repricing certain instances of characters.
I'll show you what what that just did.
Our search term, whenever we plus search, you can see that the search term, it's there.
And if we, for instance, have a space, you can see that because it's been encoded, we get that percentage
slide 20 instead of the space.
So that's going to allow us to make the request.
And this is going to be a better way to make the requests within the user eye instead of having the
space there, as that can sometimes throw off APIs.
So also use the encode.
You are a component to make sure that you're removing characters that could potentially cause errors
or issues.
So now we're going to be ready to move on to the next part where we're going to actually do something
with the data that comes back.
So it's coming up in the next lesson.