1
00:00:01,300 --> 00:00:07,750
Within this lesson, we're going to be creating a connection to the Stock Exchange API, so we're turning

2
00:00:07,750 --> 00:00:14,140
back a series of questions and also the tags associated with the questions, the answers that each one

3
00:00:14,140 --> 00:00:15,400
of these questions have.

4
00:00:15,760 --> 00:00:22,960
And the finalized application that we're building is going to make a separate request to the API to

5
00:00:22,960 --> 00:00:27,750
load the content for the question itself, as well as load the answer information.

6
00:00:28,060 --> 00:00:34,210
There's more information available at the API Stock Exchange so you can reference that to see all the

7
00:00:34,210 --> 00:00:36,280
different endpoints that can be created.

8
00:00:39,080 --> 00:00:42,560
And building a dynamic interactive web application.

9
00:00:43,540 --> 00:00:45,970
From the Jaeson data from the API.

10
00:00:48,110 --> 00:00:54,150
We're going to be using the same index file template as before, we've got the five or the four TEMEL

11
00:00:54,170 --> 00:01:00,980
elements on the page that are going to provide the interaction and we're linking out to up 10k us with

12
00:01:00,980 --> 00:01:02,000
an app tanji.

13
00:01:03,100 --> 00:01:08,900
We we're connecting using the JavaScript query selector, selecting the elements from the page so that

14
00:01:08,900 --> 00:01:12,590
we can update and manipulate them as needed within the application.

15
00:01:12,740 --> 00:01:18,350
We've also got an event listener that's outputting content whenever the time content is loaded.

16
00:01:18,470 --> 00:01:23,720
So we can use this if we have any content that we want to load to let the user interact with.

17
00:01:23,840 --> 00:01:26,240
And then we've got an event listener on the button.

18
00:01:26,610 --> 00:01:31,550
And I'm just going to add in a console message here, and this could just say click ready.

19
00:01:31,880 --> 00:01:35,440
So whenever the button gets clicked, we fire off the clicked ready.

20
00:01:35,630 --> 00:01:38,090
So ready to make the connection to their end point.

21
00:01:38,300 --> 00:01:42,980
And we are going to be connecting to the API at the stock exchange.

22
00:01:43,580 --> 00:01:48,530
So Stock Exchange is a website that you can go to to get.

23
00:01:52,340 --> 00:01:53,810
Reference source code.

24
00:01:56,950 --> 00:02:05,890
And this is one of the top resources for developers to connect with and have discussions about code.

25
00:02:06,730 --> 00:02:12,280
There's a number of different communities as well as a lot of information that's contained within the

26
00:02:12,280 --> 00:02:12,870
API.

27
00:02:13,330 --> 00:02:21,750
So going into the API itself, there's some documentation at API that stock exchange dot com for docs.

28
00:02:22,150 --> 00:02:27,750
So this is where you can find out and read up more about the endpoints for the API.

29
00:02:29,410 --> 00:02:37,330
So just as a sample, we're going to be just selecting and getting the questions and there's other parameters

30
00:02:37,330 --> 00:02:41,920
that you can provide within the questions so you can have yds, answers and so on.

31
00:02:42,070 --> 00:02:44,020
So we'll look further into the API.

32
00:02:44,290 --> 00:02:47,380
So for now, let's make a connection to the.

33
00:02:48,380 --> 00:02:54,680
Questions and there's a default sort order here, activity, and you can update some of these parameters

34
00:02:54,680 --> 00:02:57,560
as well in order to build the API.

35
00:02:57,690 --> 00:03:02,750
And when you run the API, it does show you what it's going to be returning back the content that it's

36
00:03:02,750 --> 00:03:03,540
going to be returning.

37
00:03:03,890 --> 00:03:13,100
So let's connect to the Stock Exchange API so the base you URL is API, stock exchange dot com.

38
00:03:13,460 --> 00:03:16,040
So we'll use that as our base, your URL.

39
00:03:16,640 --> 00:03:20,120
So creating a variable is given the name of base your URL.

40
00:03:20,900 --> 00:03:25,070
And from there we can build out the rest of the API connection.

41
00:03:26,610 --> 00:03:34,800
And for this itself, we can provide these parameters in order to update for the connection.

42
00:03:35,900 --> 00:03:39,710
So selecting and let's load this automatically.

43
00:03:43,410 --> 00:03:50,610
So we'll initiate a function, I would just call it page load, and then within the page Lord function,

44
00:03:50,790 --> 00:03:56,270
this is what we're going to make our initial request to the euro.

45
00:03:56,400 --> 00:04:05,440
So let's construct the euro using the base euro and then concatenating it together with the parameters.

46
00:04:07,200 --> 00:04:12,420
So that's going to return back or should return back the same content that we've got here within items

47
00:04:12,540 --> 00:04:16,920
and then items is the array of content that we're returning back to the page.

48
00:04:17,520 --> 00:04:19,440
So now we've created the euro.

49
00:04:19,770 --> 00:04:21,820
Let's log it out into the console.

50
00:04:23,040 --> 00:04:31,350
So here we can copy the address and paste it into the browser to make sure that we're actually getting

51
00:04:31,350 --> 00:04:34,120
some content back and we're getting all of this JSON data.

52
00:04:34,440 --> 00:04:40,040
So that means that we're ready to make the Thach request so Futch and thatching to the euro.

53
00:04:42,000 --> 00:04:49,290
And once we get the content, so we get the response object back, we're going to return the response

54
00:04:49,290 --> 00:04:51,560
object with Jason content.

55
00:04:52,350 --> 00:05:01,650
And then once we've got the response JSON and we're going to take that as data and with the data, we

56
00:05:01,650 --> 00:05:07,770
can log that out into the console so we can take a closer look at our JSON response content.

57
00:05:08,310 --> 00:05:10,860
And let's just double check the endpoint.

58
00:05:10,860 --> 00:05:18,090
And it looks like we've got two forward slashes, so removing one of the four slashes for the path and

59
00:05:18,090 --> 00:05:19,480
now we're able to load the data.

60
00:05:20,040 --> 00:05:21,120
So that was just that.

61
00:05:21,120 --> 00:05:29,610
The past path was incorrect and we could just as easily as well we could catch any errors that might

62
00:05:29,610 --> 00:05:30,730
be popping up.

63
00:05:31,320 --> 00:05:37,000
So try that into the console and we'll check to see if that's an error that we can catch with catch.

64
00:05:37,320 --> 00:05:43,680
So that means that if we had to forward slash, as we can see, that we just get the failed to to fetch.

65
00:05:43,800 --> 00:05:46,290
So it doesn't give us any indication on what the error is.

66
00:05:46,470 --> 00:05:49,800
But in this case, that it's the path is incorrect.

67
00:05:49,920 --> 00:05:52,650
The endpoint is incorrect because we've got the two slashes.

68
00:05:53,100 --> 00:05:54,720
So that's what the problem was there.

69
00:05:54,870 --> 00:05:56,300
And let's reload that.

70
00:05:56,550 --> 00:06:02,940
So now we've got data that's come back from the endpoint and we've got a number of items that we can

71
00:06:02,940 --> 00:06:07,460
iterate through and output the contents of those items on the page.

72
00:06:07,830 --> 00:06:12,040
So we've got that within the data and within the array.

73
00:06:12,090 --> 00:06:16,320
So we look for the array that we want to iterate through and that's going to return back to items.

74
00:06:17,130 --> 00:06:18,770
And there's 30 items in there.

75
00:06:19,980 --> 00:06:26,790
So create a function output items and this is going to require some content.

76
00:06:26,940 --> 00:06:34,290
So we just put a variable name of data and then we can console log out the results of data into the

77
00:06:34,290 --> 00:06:40,620
console to make sure that we do have those for the function and that we're ready to iterate through

78
00:06:40,620 --> 00:06:41,470
them and loop through them.

79
00:06:41,850 --> 00:06:43,000
So that's still outputting.

80
00:06:43,440 --> 00:06:50,250
So that means for data we can do a for each and loop through each one of the items that are contained

81
00:06:50,250 --> 00:06:50,640
in there.

82
00:06:51,210 --> 00:06:56,430
So this is just going to be one of the items and we're turning it back as item.

83
00:06:56,910 --> 00:06:58,380
So again, into the console.

84
00:06:58,950 --> 00:07:03,590
And that way we can break apart and we can see the data structure of each one of the items.

85
00:07:04,050 --> 00:07:05,750
So each one has a title.

86
00:07:06,060 --> 00:07:08,720
It also has a number of tags, which is an array.

87
00:07:08,940 --> 00:07:16,990
It's got an object for the owner and it's got all of this information about the link to it, the answer

88
00:07:16,990 --> 00:07:18,650
account and so on.

89
00:07:18,990 --> 00:07:24,420
So let's update and we'll output the contents of the title onto the page.

90
00:07:28,990 --> 00:07:39,460
And we'll just call this one output page, and this one will output each one of the item onto the page

91
00:07:39,460 --> 00:07:40,690
on each one of the items.

92
00:07:44,660 --> 00:07:54,200
And I'll comment on that console message, and usually I do start with a console message and we just

93
00:07:54,200 --> 00:08:02,750
call that data as well again, so it's putting each one of these objects on the page or within the console.

94
00:08:03,170 --> 00:08:05,790
So ready to add it to the output of the page.

95
00:08:07,430 --> 00:08:18,020
So let's take output in our HTML and clear out any existing in our HTML, and now we can create the

96
00:08:18,020 --> 00:08:19,520
elements for the page.

97
00:08:20,810 --> 00:08:23,000
And I would put them correspondingly

98
00:08:26,210 --> 00:08:28,360
and I'll just call this make node.

99
00:08:28,880 --> 00:08:35,630
So this one requires the parent and the type of object.

100
00:08:39,860 --> 00:08:48,050
Or type of element, and then we also have the contents of that element, so creating the function to

101
00:08:48,050 --> 00:08:48,830
make the note.

102
00:08:55,280 --> 00:08:57,680
And we're going to return to the no doc.

103
00:09:05,180 --> 00:09:10,370
So making the node and the parent that we're handing the content to is going to be the output element,

104
00:09:10,940 --> 00:09:13,610
the element type that we're creating is going to be a div.

105
00:09:14,240 --> 00:09:18,520
And the contents of this div are coming from the data title.

106
00:09:19,520 --> 00:09:20,680
So data title.

107
00:09:23,330 --> 00:09:26,270
And then here's where we can make the element.

108
00:09:28,640 --> 00:09:37,250
Using the document create elements, and we can specify the type of element that we're creating within

109
00:09:37,250 --> 00:09:45,140
the argument there and then elements in our HTML and actually, Senator, just refer to this as HTML

110
00:09:45,500 --> 00:09:49,070
as we want to be able to add and update each HTML.

111
00:09:50,600 --> 00:09:58,190
And then here we select the parent object and do append of the elements that we've just created to the

112
00:09:58,190 --> 00:09:58,550
parent.

113
00:10:00,530 --> 00:10:03,920
And then we'll also return back the element.

114
00:10:07,290 --> 00:10:14,540
He can even shorten this as well, so if you use a hand child, there's a callback of the element that

115
00:10:14,540 --> 00:10:16,010
was created.

116
00:10:29,380 --> 00:10:34,930
So you could do that within one statement and then that's still going to refer to the same element,

117
00:10:35,720 --> 00:10:40,840
and if we cancel logout, that's going to reference that new element that was just created on the page.

118
00:10:43,640 --> 00:10:49,370
So all of them are within DIDs and they're all selected here within the consoles, whenever we hover

119
00:10:49,370 --> 00:10:54,800
over it, you can see the contents and these are the titles.

120
00:10:57,320 --> 00:11:05,510
Of the items, we can also loop through the tags of that, so we're creating I mean.

121
00:11:08,470 --> 00:11:17,080
Element, and we can also create a temporary parent, so this is going to be the main div or just call

122
00:11:17,080 --> 00:11:25,390
it mean and then use the make node and here we're going to be appending it to main.

123
00:11:25,570 --> 00:11:29,770
And this main container is just going to have just blank content.

124
00:11:29,800 --> 00:11:31,000
So there's no content in there.

125
00:11:31,750 --> 00:11:36,510
And this way we can add additional content into there.

126
00:11:36,520 --> 00:11:41,740
So we've got the title and if we do and inspect, you can see that this is the parent element that we've

127
00:11:41,800 --> 00:11:43,080
already got a div in there.

128
00:11:44,050 --> 00:11:50,110
So let's add an update, the rest of the content that's being returned back from the endpoint.

129
00:11:53,090 --> 00:11:59,110
So if we want to output the tags, let's create the tags and output those as well.

130
00:12:01,880 --> 00:12:12,650
So for the data tags and for each one of those, so it's going to turn back the tag item and we're going

131
00:12:12,650 --> 00:12:21,180
to loop through and add the tags as span's to the main parent.

132
00:12:22,100 --> 00:12:28,030
So this is just going to be a new span and the tape here is going to be a span as well.

133
00:12:30,310 --> 00:12:39,320
And this should be listing out the tag information and we're just handing it to the main object and

134
00:12:39,320 --> 00:12:40,570
they're a little bit hard to see.

135
00:12:40,600 --> 00:12:42,790
So they're all just right there together.

136
00:12:43,300 --> 00:12:44,320
So let's add in.

137
00:12:48,740 --> 00:12:55,310
To the spane, take the class list and add a class of.

138
00:12:56,540 --> 00:12:57,050
Tag.

139
00:13:00,120 --> 00:13:06,870
And that way, within the TML, within the staling, will select the elements that have the class of

140
00:13:06,870 --> 00:13:10,170
tag, add some padding around it.

141
00:13:12,930 --> 00:13:18,840
And also, we can add some margin around it, so they're a lot easier to spot.

142
00:13:23,240 --> 00:13:26,330
So fort style, maybe we want to make them italic.

143
00:13:30,700 --> 00:13:39,310
And tag so we can do a tag before, so let's add in some content before.

144
00:13:41,980 --> 00:13:46,870
So adding in the dash, so that puts the dashes before the tags.

145
00:13:50,160 --> 00:13:51,840
Also going to add in a border.

146
00:13:56,670 --> 00:13:58,440
And just a slight border.

147
00:14:02,240 --> 00:14:04,520
Also, to all of the elements,

148
00:14:07,460 --> 00:14:09,350
play the box sizing the border box.

149
00:14:17,260 --> 00:14:26,020
So that's realigning them and we probably need a larger margin, was there some overlap with the content?

150
00:14:28,520 --> 00:14:33,830
And let's also update it to display as in line block.

151
00:14:36,560 --> 00:14:42,530
So I will make it a lot easier to read the tags, so there's all the different tags.

152
00:14:47,820 --> 00:14:50,730
And go back to where we are putting the data.

153
00:14:53,470 --> 00:14:55,030
So within the title.

154
00:14:57,590 --> 00:15:00,650
Might also want to add some other information here.

155
00:15:04,010 --> 00:15:14,720
And we've got a question ID so also within the API, we can search by the question IDs as well.

156
00:15:16,070 --> 00:15:18,020
So if we go back to questions.

157
00:15:21,440 --> 00:15:26,240
And if we have ID questions identified by a set of ideas.

158
00:15:33,490 --> 00:15:41,110
So from here, we can specify IDs that we want to look at and run that.

159
00:15:48,610 --> 00:15:52,270
And so that we were returning back the same information.

160
00:15:56,790 --> 00:16:04,860
So we can use the ID as a way to make another query and then just get the details once again back whatever

161
00:16:04,860 --> 00:16:05,820
the user clicks it.

162
00:16:07,780 --> 00:16:10,330
There's also the owner information as well.

163
00:16:10,800 --> 00:16:16,890
So if you want to and know we have the owner information within the object so we can as well create

164
00:16:16,890 --> 00:16:18,440
a way to query for the owner.

165
00:16:19,260 --> 00:16:21,330
So let's copy this ID.

166
00:16:25,090 --> 00:16:33,790
And using the function get by ID, so we're going to get the ID value here and this is where we're going

167
00:16:33,790 --> 00:16:36,150
to make the request by the ID.

168
00:16:36,820 --> 00:16:42,250
So we want to be able to click the question and then load some additional information.

169
00:16:42,520 --> 00:16:48,330
And I'm actually going to shrink down the margins here because it's a little bit too spaced out.

170
00:16:48,730 --> 00:16:53,530
And then also for the question or the title.

171
00:16:57,160 --> 00:16:59,140
And I'll just call this top title

172
00:17:02,110 --> 00:17:11,980
to a font size to make this bigger one a.m. and I'm also going to add in one more four box so the box

173
00:17:11,980 --> 00:17:13,600
will just go around each one of those.

174
00:17:15,500 --> 00:17:18,860
So let's set a border one pick solid.

175
00:17:20,740 --> 00:17:29,380
And I said, let's do this as DOTD for something different and keeping it greyscale and keep the border

176
00:17:29,380 --> 00:17:40,420
radius so slightly rounded, and now let's apply the top title plus the box property to the elements

177
00:17:40,420 --> 00:17:41,590
as we're constructing them.

178
00:17:46,480 --> 00:17:54,190
So within the main, take a class list and add the class of box to it.

179
00:17:57,210 --> 00:18:04,020
So that provides some more styling that we could start out and add some padding as needed and also for

180
00:18:04,020 --> 00:18:13,380
the element title again list and add, and here we can add the top titles that will make it bigger.

181
00:18:15,690 --> 00:18:19,320
And for top title, we'll do a thought.

182
00:18:19,320 --> 00:18:23,100
Wait, so add bold weight to it.

183
00:18:24,450 --> 00:18:27,690
And then also for the box, let's add some padding.

184
00:18:33,900 --> 00:18:37,320
And for the top title, Do Margin.

185
00:18:40,110 --> 00:18:48,420
Bottom and 15 pics, so that space's it out and also do a board and.

186
00:18:52,170 --> 00:18:53,040
At the bottom.

187
00:18:56,650 --> 00:18:59,620
And we'll make a solid red border.

188
00:19:07,940 --> 00:19:11,420
And adding some padding at the bottom.

189
00:19:14,320 --> 00:19:23,530
So space's it out, we got these red borders maybe actually going to turn them into black border and

190
00:19:23,530 --> 00:19:24,970
make them thicker.

191
00:19:27,330 --> 00:19:34,620
To three picks, so we've got the title, we've got the tags and whatever else we want to list out here,

192
00:19:35,130 --> 00:19:39,300
so we want to pick up the ID and actually make these elements clickable.

193
00:19:39,990 --> 00:19:49,800
So whenever anyone clicks the element out of a listener and have it click and then whenever it gets

194
00:19:49,800 --> 00:19:56,150
clicked, then it's going to take the action on the element itself.

195
00:20:00,120 --> 00:20:01,110
And for the.

196
00:20:02,720 --> 00:20:08,250
Box, we use the box elements and apply a hover effect to it.

197
00:20:11,450 --> 00:20:18,590
So whenever anyone hovers on it and we'll update the background color.

198
00:20:21,820 --> 00:20:29,380
To a slight off point, so that way, whenever we're hovering over it and also let's update the cursor.

199
00:20:33,460 --> 00:20:34,330
Two pointer.

200
00:20:37,790 --> 00:20:45,380
So that whenever we hover over it, we'll get that type of effect and also I'm going to add in a margin

201
00:20:46,550 --> 00:20:54,030
at the bottom of five pics so there's some more spacing between the items on the page.

202
00:20:54,770 --> 00:21:01,940
So what to happen is whatever they get clicked, then it's going to query again and load all of the

203
00:21:01,940 --> 00:21:02,510
content.

204
00:21:02,660 --> 00:21:05,300
And I know we already have it within this API.

205
00:21:05,780 --> 00:21:09,100
So the candidates to practice and making requests.

206
00:21:09,350 --> 00:21:12,230
So we're going to get by the Idy value.

207
00:21:13,100 --> 00:21:14,750
So selecting it by the Edek.

208
00:21:14,780 --> 00:21:18,920
Let's make some updates to this so we can track the ID information.

209
00:21:19,040 --> 00:21:25,940
And within that listener, we're going to simply select and use the event target as the source for the

210
00:21:25,940 --> 00:21:30,710
EDEK information and update the adding into the element object.

211
00:21:31,010 --> 00:21:38,450
We can add in a value for the ID, the question ideas available within the API, under the property

212
00:21:38,450 --> 00:21:40,210
value of question ID.

213
00:21:40,460 --> 00:21:45,830
So selecting the value for question ID, we want to pass that in and save it into the element.

214
00:21:46,050 --> 00:21:53,900
So creating a separate element object and adding it in as Q ID and then assign a value to it a question

215
00:21:53,900 --> 00:21:54,290
ID.

216
00:21:54,310 --> 00:22:01,070
So it's going to be data dot question ID to get the value that's associated with each one of these elements.

217
00:22:01,340 --> 00:22:07,160
And then this way we can simply linko to get by ID and we don't have to pass on any arguments or parameters

218
00:22:07,280 --> 00:22:08,710
other the event object.

219
00:22:08,930 --> 00:22:14,900
And this way that element itself is the one that's going to hold the ID information that we can then

220
00:22:14,930 --> 00:22:18,350
use in order to query and get the ID contents.

221
00:22:18,680 --> 00:22:25,730
So connecting to the method, get by ID, it automatically passes in the event object and we're selecting

222
00:22:25,730 --> 00:22:26,270
the element.

223
00:22:26,270 --> 00:22:33,650
So assigning to the element, the event target, so passing in the object and then to object as E and

224
00:22:33,650 --> 00:22:38,150
then the target is going to reference the element that initiated the click.

225
00:22:38,420 --> 00:22:44,600
And then from here within the element object, we do have a value for Q ID, so whenever any of these

226
00:22:44,600 --> 00:22:47,960
get clicked we can now see it being loaded into the console.

227
00:22:48,170 --> 00:22:54,320
So that's loading in the ID numbers and then we can use those ID numbers with our query in order to

228
00:22:54,320 --> 00:22:58,840
query and build out the information for that particular object.

229
00:22:59,510 --> 00:23:04,090
So as they get clicked, we can build the information for the object itself.

230
00:23:05,290 --> 00:23:11,550
Let's set up one more variable here, so adding in that answers as well, so you can select the answer

231
00:23:11,560 --> 00:23:13,080
count from the API.

232
00:23:13,480 --> 00:23:19,510
So make a note, attach it to the main object, and this can just be a regular div.

233
00:23:19,750 --> 00:23:26,460
And the contents of this div, you're going to use the template, literals some back text and less populated

234
00:23:26,500 --> 00:23:29,540
with value for the answer data.

235
00:23:29,560 --> 00:23:33,280
So that's the data from the answer account property.

236
00:23:34,170 --> 00:23:40,770
And we're going to pass that information in and reference it as answers onto the page, so that way

237
00:23:40,770 --> 00:23:42,690
it's going to be displayed onto the page.

238
00:23:45,080 --> 00:23:49,610
And we're also going to be listing out the answers for a particular question, so that's going to be

239
00:23:49,610 --> 00:23:51,500
another request from me to the API.

240
00:23:51,770 --> 00:23:58,910
Let's update some of the styling for the tags so that we can add in some additional margin spacing between

241
00:23:58,910 --> 00:24:00,470
the answers and the tags.

242
00:24:00,710 --> 00:24:04,550
And then also we can create a separate class for the answers themselves.

243
00:24:05,000 --> 00:24:10,550
And this way we can create the class and separate out some of the content.

244
00:24:12,200 --> 00:24:19,490
Making the text align to center and also let's update the font size so that they can make it a fairly

245
00:24:19,490 --> 00:24:25,210
small font size, so smaller than the rest of the content as we don't really need this to stand out.

246
00:24:25,370 --> 00:24:28,480
But this is just some details that we want to present to the user.

247
00:24:28,790 --> 00:24:37,700
So when we refresh it, we need to still add to the answer account elements using classless add and

248
00:24:37,700 --> 00:24:41,280
add in the answers class to that element.

249
00:24:41,600 --> 00:24:45,650
So once we add that in, we notice that it does get centered now on the page.

250
00:24:45,860 --> 00:24:53,480
So that class does get applied to the elements and now it's being presented to the user within the content

251
00:24:53,540 --> 00:24:55,660
that's coming back from the JSON data.

252
00:24:56,890 --> 00:25:00,070
And as we click them, we're still picking up the.

253
00:25:00,940 --> 00:25:04,930
The question ID and we're able to use that within the.

254
00:25:07,210 --> 00:25:14,110
Was in the get it function, so we're going to be able to make our next request to the question ID.

255
00:25:16,720 --> 00:25:17,770
Using that.

256
00:25:19,090 --> 00:25:20,050
Event target.

257
00:25:21,540 --> 00:25:29,100
Thanks for this lesson are to connect to the Stock Exchange API and return back the jigsaw data from

258
00:25:29,100 --> 00:25:36,870
the end point and use that recent data to dynamically create Piech elements for the user's visual interaction

259
00:25:37,140 --> 00:25:42,480
and then also add the interactions where the page elements are clickable and they're going to pass the

260
00:25:42,480 --> 00:25:45,090
object data over to the new function.

261
00:25:46,240 --> 00:25:52,350
So that we can make another request and load more content from the API onto the Web page.