1
00:00:01,020 --> 00:00:05,520
So this lesson we're going to be finalizing the application, we're going to be adding in the ability

2
00:00:05,520 --> 00:00:09,530
to search and then also playing some styling to the application.

3
00:00:09,840 --> 00:00:15,810
So now that we have that option to search, we can enter in a search term, click and we get now new

4
00:00:15,810 --> 00:00:18,060
results according to the search term.

5
00:00:18,280 --> 00:00:22,860
And then you can click these as just we did before and get additional details.

6
00:00:23,170 --> 00:00:33,060
So let's try to search for HTML returns back to H2 malcontents corresponding to the title search and

7
00:00:33,060 --> 00:00:33,730
see us.

8
00:00:33,750 --> 00:00:34,860
We can also search for.

9
00:00:35,850 --> 00:00:38,470
So this is what we're returning back for.

10
00:00:38,470 --> 00:00:40,620
A responses for the CSA search.

11
00:00:43,450 --> 00:00:50,230
And there's a lot of information that is coming back from the API, so I do encourage you to try out

12
00:00:50,560 --> 00:00:58,360
different requests, different paths, and also output data that's being returned back from the API

13
00:00:58,570 --> 00:00:59,530
onto the webpage.

14
00:01:00,130 --> 00:01:00,940
So let's get started.

15
00:01:01,330 --> 00:01:03,130
So let's make a search.

16
00:01:03,340 --> 00:01:06,070
And in order to search, we can search within the title.

17
00:01:06,370 --> 00:01:10,160
We can search within the page, also setting the maximum results.

18
00:01:10,390 --> 00:01:13,810
So in this case, we're just going to do a search for a JavaScript within the title.

19
00:01:14,020 --> 00:01:21,040
And again, you can build out your parameters and the endpoint URL for stock exchange here within the

20
00:01:21,040 --> 00:01:22,990
API stock exchange dot com.

21
00:01:23,170 --> 00:01:29,620
So that's all we've done here, is we've built up and created the new parameters that the new endpoint

22
00:01:29,620 --> 00:01:34,510
that we want to connect to and we want to make this connection whenever the search is initiated.

23
00:01:35,350 --> 00:01:43,000
So going into where we're setting and where have the click event, so we're going to make a search and

24
00:01:43,000 --> 00:01:47,500
return back the content according to what's within the search results.

25
00:01:48,340 --> 00:01:53,140
Let's also make some updates to the text content of the H1.

26
00:01:55,810 --> 00:02:04,750
And we can just call this the Stock Exchange API or something like that, so updating the title API

27
00:02:05,830 --> 00:02:06,490
Testor.

28
00:02:09,570 --> 00:02:17,520
And just catalyze that so that we've got some information on what we're tracking there and then also

29
00:02:17,520 --> 00:02:20,880
for the button one and for the one.

30
00:02:23,150 --> 00:02:32,900
Let's move these contents into another element output, and we can create this one through that make

31
00:02:32,900 --> 00:02:40,850
node generator that we set up in the earlier lesson, and this is just going to be appended to.

32
00:02:47,750 --> 00:02:58,610
The document body, and it's going to depend the contents they're spending to the document body and

33
00:02:58,610 --> 00:03:04,610
the element type is going to be a diff and then the contents is just going to be blank content.

34
00:03:05,390 --> 00:03:15,830
So this will serve as our main container and we can add in into output one, we can append the each

35
00:03:15,830 --> 00:03:18,380
one object and then as well.

36
00:03:18,410 --> 00:03:24,110
Additionally, we can append the input value as well.

37
00:03:24,120 --> 00:03:27,860
So just just moving some stuff around on the page with JavaScript.

38
00:03:29,860 --> 00:03:37,270
And then also we'll move the button in there as well and also append the button element.

39
00:03:40,250 --> 00:03:45,860
And I just see how that looks, that's moving it actually to the bottom of the page.

40
00:03:46,730 --> 00:03:50,400
So also let's drop that output element into it as well.

41
00:03:54,660 --> 00:04:01,590
And for this, what we're going to do is for output one, let's add in a class.

42
00:04:04,290 --> 00:04:06,140
I give it a class of output, one.

43
00:04:10,530 --> 00:04:17,970
And so we'll sunter it and then text a line can be center line for the text.

44
00:04:22,190 --> 00:04:31,520
And then apply that class, so using the class list and then add the class, I would put one to that

45
00:04:31,520 --> 00:04:34,700
element so that will center the content.

46
00:04:37,670 --> 00:04:46,640
Let's also update the input field and we'll just have the one input field, as well as the element with

47
00:04:46,640 --> 00:04:50,750
a class of button, or we could update the element with the button tag.

48
00:04:54,220 --> 00:05:01,090
So let's make the input field bigger and we'll display them both as Bloks.

49
00:05:03,360 --> 00:05:06,150
And what can be one hundred percent?

50
00:05:10,520 --> 00:05:15,230
And let's say that the font size to fairly large font size.

51
00:05:17,010 --> 00:05:18,750
And then default height.

52
00:05:21,690 --> 00:05:27,360
And also, if you can do text a line to center, you cannot update these as needed.

53
00:05:28,890 --> 00:05:34,590
So whenever we click the button, we want to make the Fach request and load the page content.

54
00:05:35,640 --> 00:05:40,610
So let's update that to load the page content.

55
00:05:42,000 --> 00:05:45,140
So we've got the end point here that we want to connect to.

56
00:05:45,750 --> 00:05:51,270
So just as we've done before, where we construct, you are all we want to use for the fax request.

57
00:05:54,790 --> 00:05:57,030
We're going to grab the search term.

58
00:05:58,260 --> 00:06:07,030
Right now, it's JavaScript and we can get the search term and that can come from the input value.

59
00:06:12,380 --> 00:06:20,660
So getting that element value and this is going to be whatever the search term is, so let's update

60
00:06:22,010 --> 00:06:29,380
the string value instead of JavaScript, it'll use whatever the search term is.

61
00:06:30,320 --> 00:06:39,740
So that's going to construct basic you URL and then we can make the fetch to the euro and return back

62
00:06:39,740 --> 00:06:40,830
the promise.

63
00:06:40,870 --> 00:06:44,630
So the response object and the response.

64
00:06:45,840 --> 00:06:57,810
Turn it as Jason and then get it as a value of data, and then from there will output the data contents

65
00:06:57,810 --> 00:06:58,810
into the console.

66
00:07:01,020 --> 00:07:10,860
So let's see what happens when we search for test and not return back an array of items so we can loop

67
00:07:10,860 --> 00:07:12,360
through each one of these items.

68
00:07:17,630 --> 00:07:19,250
And I'll put them to the page.

69
00:07:22,830 --> 00:07:30,090
So data items, and I'm also going to update the input value to have a value.

70
00:07:30,240 --> 00:07:32,370
So let's set that to JavaScript.

71
00:07:38,700 --> 00:07:45,180
So that our returning back all of these items, so ready to just load them to the peach.

72
00:07:48,720 --> 00:07:50,850
So just as we did, the output items

73
00:07:53,790 --> 00:07:56,550
could do the data items and put them to the page.

74
00:08:00,900 --> 00:08:08,820
So doing a search for JavaScript is going to return back the JavaScript associated content and then

75
00:08:08,820 --> 00:08:14,160
you can click on it and find out more details about it and then we can have another search if you want

76
00:08:14,180 --> 00:08:15,700
to search for HTML.

77
00:08:16,290 --> 00:08:18,240
So it turns back the HTML content.

78
00:08:19,350 --> 00:08:26,190
And then just as we did with others, we can click it to get more details, see what the answers are,

79
00:08:26,460 --> 00:08:32,460
and then we could even load the answers and the information, as well as additional content that's contained

80
00:08:32,460 --> 00:08:33,360
within the API.

81
00:08:33,450 --> 00:08:36,300
So all of that is available to us to add to the page.

82
00:08:36,480 --> 00:08:42,780
And as you're practicing and connecting to the API, the endpoints, you can try out different ways

83
00:08:42,780 --> 00:08:47,100
and different content to output on the page, depending on what the selection is.

84
00:08:50,890 --> 00:08:57,400
And this is a fairly extensive API, there's a lot of content here, there's a lot of different points

85
00:08:57,670 --> 00:09:00,070
and there's a lot of different ways to interact with it.

86
00:09:00,700 --> 00:09:06,640
So you can try out and check out all the different options here within the Stock Exchange API.

87
00:09:08,590 --> 00:09:13,630
Challenge for this lesson is to continue to practice with the Stock Exchange API, check out some of

88
00:09:13,660 --> 00:09:19,420
the different end points, load the data onto your page and update the page contents adding in a search

89
00:09:19,420 --> 00:09:20,320
term option.

90
00:09:20,470 --> 00:09:28,810
So searching within the title terms and you can create your path to the API within the API documentation

91
00:09:28,960 --> 00:09:30,520
available at the stock exchange.

92
00:09:30,520 --> 00:09:37,570
Dot com docs also load more JSON data dynamically update the page elements, add styling and classes

93
00:09:37,570 --> 00:09:46,870
to the elements and or overall get a good opportunity to practice requesting content and returning it

94
00:09:46,870 --> 00:09:51,490
and then manipulating the page elements to represent the content that's come back from the JSON.