1
00:00:00,210 --> 00:00:04,860
Hey there, this lesson we are going to set up and hook to some of the JavaScript that we have on the

2
00:00:04,860 --> 00:00:06,890
page, so let's create an element.

3
00:00:06,900 --> 00:00:10,050
We're going to call that an object called output.

4
00:00:10,050 --> 00:00:13,490
And this is going to be attached to the element with the class of output.

5
00:00:13,830 --> 00:00:18,840
So that way we don't have to keep typing that document query selector.

6
00:00:19,050 --> 00:00:22,160
We can just have that within the usable object format as well.

7
00:00:22,170 --> 00:00:24,750
We need a way to trigger the search.

8
00:00:24,750 --> 00:00:27,460
So we're going to hook up that search button to add an event.

9
00:00:27,480 --> 00:00:32,220
Let's start there as well as to the input we need to get the value from that input field.

10
00:00:32,460 --> 00:00:36,520
So let's set all of those up and we've got our search term.

11
00:00:36,810 --> 00:00:39,120
So this is going to be coming from the input field.

12
00:00:39,330 --> 00:00:43,690
So selecting documents, query selector and we only have one of the input fields.

13
00:00:43,710 --> 00:00:51,210
So this is going to grab the input by the input tag and that will select that that correct element under

14
00:00:51,210 --> 00:00:51,740
search term.

15
00:00:52,080 --> 00:00:54,540
And another one that we want to select is the button.

16
00:00:55,140 --> 00:00:56,820
And this is where we're adding an event listener.

17
00:00:56,830 --> 00:01:03,220
So document and selecting the elements with the class or the tag of button.

18
00:01:03,870 --> 00:01:07,170
And usually I like to make sure that I do have the right elements.

19
00:01:07,410 --> 00:01:13,230
So I'll type in the variables within the console just to make sure that I do have the right element

20
00:01:13,470 --> 00:01:13,830
there.

21
00:01:14,100 --> 00:01:18,420
And as well, we're going to do a search term just to make sure that we do have the input.

22
00:01:18,990 --> 00:01:25,550
And now that we have that, we can also take that search term and we can update its attributes.

23
00:01:25,560 --> 00:01:33,660
So doing set attribute, we're going to set its value and then within the value.

24
00:01:33,690 --> 00:01:37,500
So for now, we're just put in test and that should be search term.

25
00:01:37,710 --> 00:01:41,610
So that populates the search term with the value for us to use.

26
00:01:41,760 --> 00:01:45,660
So we always have something by default and I'll update this as well going forward.

27
00:01:46,140 --> 00:01:50,610
Another thing that we need to do is set up the button and add event listeners to the button.

28
00:01:50,910 --> 00:01:56,220
So add event listener and that we're listening for is a click and whatever the button gets clicked,

29
00:01:56,220 --> 00:01:57,930
then we're going to initiate the search.

30
00:01:58,800 --> 00:02:02,370
And then here is when we do trigger the search.

31
00:02:02,700 --> 00:02:06,710
The first thing that we want to do is we want to get the value that's contained within the search term.

32
00:02:07,530 --> 00:02:18,480
So let's get that into a variable search and taking the search term field element or to pull back the

33
00:02:18,480 --> 00:02:20,640
value so we can use that within the search term.

34
00:02:21,680 --> 00:02:28,310
And that means that we can update the euro that we're constructing as well with the new search term.

35
00:02:29,270 --> 00:02:34,190
The other thing, too, that we want to make sure that we do have so whenever this button gets tricked,

36
00:02:35,750 --> 00:02:40,880
whatever this button gets clicked, we're going to get the search term from the input field, update

37
00:02:40,880 --> 00:02:46,340
our URL that we're making our futch for and then return back the appropriate results for that.

38
00:02:47,150 --> 00:02:53,140
So for now, I'm going to comment about the search and just make sure that this part is working.

39
00:02:53,160 --> 00:02:56,720
Another thing, too, is that I do want to update the search term.

40
00:02:56,930 --> 00:03:03,650
So I take search and I'm equal it to search, but we're going to drop it within an end code because

41
00:03:04,040 --> 00:03:05,810
so we don't want to have the same spaces.

42
00:03:06,030 --> 00:03:12,230
So it's going to allow us to encode that and repricing certain instances of characters.

43
00:03:12,860 --> 00:03:14,720
I'll show you what what that just did.

44
00:03:14,930 --> 00:03:19,880
Our search term, whenever we plus search, you can see that the search term, it's there.

45
00:03:20,120 --> 00:03:26,930
And if we, for instance, have a space, you can see that because it's been encoded, we get that percentage

46
00:03:26,930 --> 00:03:28,460
slide 20 instead of the space.

47
00:03:28,700 --> 00:03:30,950
So that's going to allow us to make the request.

48
00:03:31,100 --> 00:03:36,170
And this is going to be a better way to make the requests within the user eye instead of having the

49
00:03:36,170 --> 00:03:38,950
space there, as that can sometimes throw off APIs.

50
00:03:39,230 --> 00:03:41,030
So also use the encode.

51
00:03:41,030 --> 00:03:46,190
You are a component to make sure that you're removing characters that could potentially cause errors

52
00:03:46,190 --> 00:03:46,700
or issues.

53
00:03:47,000 --> 00:03:50,900
So now we're going to be ready to move on to the next part where we're going to actually do something

54
00:03:50,900 --> 00:03:52,190
with the data that comes back.

55
00:03:52,190 --> 00:03:53,570
So it's coming up in the next lesson.