1
00:00:03,150 --> 00:00:08,610
This lesson, we applied some styling as well as we made multiple requests, we, instead of fetch,

2
00:00:08,620 --> 00:00:15,600
requested another fetch request and returning back the answer information as well as the contents of

3
00:00:15,600 --> 00:00:17,480
the original question ID.

4
00:00:17,730 --> 00:00:25,350
And this is all dynamically loaded from the API and all using JavaScript to load that content.

5
00:00:28,380 --> 00:00:34,920
In the previous lesson we set up and we're pulling in information from the API and then we've got a

6
00:00:34,920 --> 00:00:41,520
clickable element that passes over the question ID and outputs that into the console.

7
00:00:41,880 --> 00:00:45,560
So once we have the question ID, we can use that.

8
00:00:45,570 --> 00:00:55,260
So there is a way to query within the API and return back the question content and we can close off

9
00:00:55,260 --> 00:00:56,850
some of these tabs that we have here.

10
00:00:57,150 --> 00:01:03,150
So this is the API and we can use this API to generate the ULS.

11
00:01:03,540 --> 00:01:04,800
So we've got a question.

12
00:01:05,280 --> 00:01:11,730
And so the question and then if we use the question ideas, we can also pull back the answers that are

13
00:01:11,730 --> 00:01:13,650
corresponding to the question IDs.

14
00:01:13,890 --> 00:01:16,110
And that's what we want to list out is the answers.

15
00:01:16,410 --> 00:01:19,370
So in this case, we see we've got this as an ID.

16
00:01:19,590 --> 00:01:23,400
So in this case, let's clear that click the first one.

17
00:01:23,400 --> 00:01:25,140
And this one has five answers.

18
00:01:25,470 --> 00:01:26,310
So we're on a list.

19
00:01:26,310 --> 00:01:35,580
The question details, but also the answers there so we can paste the actual we got a copy that just

20
00:01:35,580 --> 00:01:44,120
the ID value and that produces the endpoint for us.

21
00:01:44,310 --> 00:01:52,380
And if you run the endpoint, this is going to list out all of the answers for that particular question.

22
00:01:53,070 --> 00:02:00,300
So it's going to be the path that we want to use so you can construct it with the API and then add in

23
00:02:00,300 --> 00:02:01,440
the answers here.

24
00:02:01,650 --> 00:02:04,020
And this will give us a way to build that.

25
00:02:04,020 --> 00:02:05,820
You are able to make the request.

26
00:02:06,100 --> 00:02:12,060
So just as we did before where we set up the base, you are all and we're doing the loading of the page.

27
00:02:13,050 --> 00:02:15,660
We can load the content here.

28
00:02:15,840 --> 00:02:25,470
So we've got our base you URL, we've got the ID that we want to use here and let's replace the content

29
00:02:25,590 --> 00:02:27,240
with the ID value that we want.

30
00:02:28,200 --> 00:02:31,350
So you can also update some of these other parameters if you want.

31
00:02:32,250 --> 00:02:36,660
And the ID that we want to use is contained within the string here.

32
00:02:37,320 --> 00:02:45,090
So update it so we can dynamically set the ID value and then we make the fetch request.

33
00:02:45,510 --> 00:02:48,330
And right now we don't want to output the content yet.

34
00:02:48,660 --> 00:02:55,560
So we just want to go to the console log and see the data so that we can deconstruct the data and plan

35
00:02:55,560 --> 00:02:57,120
how we're going to use it on the page.

36
00:02:57,660 --> 00:03:00,540
So clear the content and do a refresh.

37
00:03:00,870 --> 00:03:02,910
So look for ones that do have answers.

38
00:03:05,340 --> 00:03:13,200
So when we click that, we return back the array and this is going to be the array of items and within

39
00:03:13,200 --> 00:03:17,390
the items, it's got an answer ID for whatever the question ID was.

40
00:03:18,000 --> 00:03:21,170
And this one has this one has 13 answers.

41
00:03:21,180 --> 00:03:23,990
So this one is going to be a better representation.

42
00:03:24,330 --> 00:03:27,440
So it's got all of these as answers to the question.

43
00:03:27,690 --> 00:03:35,100
So I want to do is want to open up a separate page and build the results, getting the question information,

44
00:03:35,220 --> 00:03:41,940
but also returning back the answer information as well.

45
00:03:42,270 --> 00:03:48,900
So there's a number of ways that we can do this where one is that we can query again to get the question

46
00:03:48,900 --> 00:03:49,550
information.

47
00:03:49,950 --> 00:03:53,780
So if we query and return back, the question results.

48
00:03:54,120 --> 00:04:02,130
So in this case, we've got this as the ID and go back and get questions and get the questions according

49
00:04:02,130 --> 00:04:02,770
to the ID.

50
00:04:03,120 --> 00:04:09,090
So this is going to return back to the question information so we could make a separate query and get

51
00:04:09,090 --> 00:04:10,770
the question information.

52
00:04:10,780 --> 00:04:19,710
So let's do that where we got your URL to or your real one, and then use the base, your URL and then

53
00:04:20,100 --> 00:04:25,860
add to the base your URL, the path for the question content.

54
00:04:27,450 --> 00:04:32,640
In addition, we had Posehn because we already got the question content so we could potentially load

55
00:04:32,640 --> 00:04:34,220
that into an array as well.

56
00:04:34,800 --> 00:04:39,580
So depending on how we want to do that, there's a number of options that are available for us.

57
00:04:40,170 --> 00:04:43,820
So this would be the path to get the question details.

58
00:04:44,490 --> 00:04:46,500
So let's load first.

59
00:04:46,510 --> 00:04:54,330
The first you URL actually let's change the order because we want to load the question details after

60
00:04:54,330 --> 00:04:58,140
we complete loading the main URL content.

61
00:04:58,590 --> 00:05:04,890
So loading the Eurail one first and then when we complete that one, we make another fetch request that

62
00:05:04,890 --> 00:05:06,390
we're going to load the second you URL.

63
00:05:07,140 --> 00:05:08,820
So let's refresh that.

64
00:05:11,260 --> 00:05:18,570
And it looks like there there was a path problem here with our API and we did end up with it again.

65
00:05:18,600 --> 00:05:20,500
So that's where that error was coming from.

66
00:05:21,300 --> 00:05:22,550
So try that one more time.

67
00:05:23,400 --> 00:05:32,910
And so first we're going to load through the contents and returning back the question with this as the

68
00:05:32,910 --> 00:05:33,360
ID.

69
00:05:33,720 --> 00:05:35,970
So just make sure it is the right question ID.

70
00:05:36,300 --> 00:05:40,410
So we've got all of that information there being loaded so we can load this.

71
00:05:40,650 --> 00:05:43,460
And then after that we can load all of the answers.

72
00:05:43,470 --> 00:05:48,900
So in this case we see that it's got three answers and then we can make a second request to the answers.

73
00:05:49,110 --> 00:05:54,430
So we're going to test the first set of data and added into the second set of data.

74
00:05:54,870 --> 00:06:00,420
So creating a variable that can hold the first set of data.

75
00:06:00,430 --> 00:06:07,200
So this is going to be the main item info and we're just going to set up a blank object for that.

76
00:06:07,680 --> 00:06:15,150
And then we're going to populate that content as data and set the contents of info to there.

77
00:06:15,420 --> 00:06:19,170
And we're going to then test a second Thach request.

78
00:06:20,350 --> 00:06:25,710
So once we make the initial Futch requests, we're turning back the JSON content as data.

79
00:06:26,340 --> 00:06:33,030
And the next item, we're going to then return back and do a second fetch.

80
00:06:33,990 --> 00:06:38,300
And this is going to be making a request to the URL, too.

81
00:06:38,790 --> 00:06:41,040
And once that promise completes.

82
00:06:43,110 --> 00:06:52,230
This is also going to have a response object so we can pull back that response data and return the response

83
00:06:52,230 --> 00:06:53,490
data as Jason

84
00:06:56,670 --> 00:07:00,270
and then output that new data object.

85
00:07:00,840 --> 00:07:07,260
So we can also call it data as well, or we could call it give it another variable name.

86
00:07:09,150 --> 00:07:21,210
And then here we're going to output the contents of Infl item info as well as the answers array or the

87
00:07:21,210 --> 00:07:22,250
answers object.

88
00:07:23,220 --> 00:07:24,940
And that's going to be contained within data.

89
00:07:27,240 --> 00:07:36,060
So now we've nested the object information and I'm going to remove out some of the console content because

90
00:07:36,060 --> 00:07:38,520
we've got quite a bit of stuff logging into the console.

91
00:07:38,700 --> 00:07:47,190
So let's do a replace on the code and look for console log and with the console, like we just add in

92
00:07:47,190 --> 00:07:53,280
the box in front of all the instances of it and do a replace on all instances of it.

93
00:07:53,670 --> 00:07:58,480
And then where we want to output it, we just want to output it within this part here.

94
00:07:58,920 --> 00:08:06,150
So now when we click one of the items that has multiple answers, the second array that we have here,

95
00:08:06,150 --> 00:08:09,810
the second object that we have with the items is all of the answers.

96
00:08:10,230 --> 00:08:16,710
And we've got the first one here is what's being returned back for questions resulting in from what

97
00:08:16,710 --> 00:08:21,240
we've got within the question by the ID of the question.

98
00:08:23,870 --> 00:08:34,220
So we're ready to output the content onto a page so it could another function, build page data and

99
00:08:34,220 --> 00:08:41,810
we can pass through from the first item info.

100
00:08:41,840 --> 00:08:50,260
So this is going to be just whatever the question data is and select from the items array.

101
00:08:50,660 --> 00:08:54,980
So item info and take items.

102
00:08:56,030 --> 00:09:02,300
And we're just going to return back the first result from the items and right now within the build data

103
00:09:02,300 --> 00:09:02,810
function.

104
00:09:03,380 --> 00:09:07,460
So create the function, build page data.

105
00:09:09,200 --> 00:09:12,110
Is this going to get the main question?

106
00:09:13,730 --> 00:09:16,670
And right now we'll just output the question object.

107
00:09:21,920 --> 00:09:26,270
So we click it and let's clear it.

108
00:09:29,370 --> 00:09:37,320
And here we see that we're listing out the main question data under Q we also want to pass over the

109
00:09:37,680 --> 00:09:39,240
array of items.

110
00:09:40,230 --> 00:09:46,060
So this is going to be the answers and get the answer items and then pass those in.

111
00:09:46,230 --> 00:09:47,480
And this is going to be an array.

112
00:09:48,690 --> 00:09:50,010
So a pluralize thought.

113
00:09:53,920 --> 00:10:00,880
And first, we're going to output the question contents and then we'll output the contents of the result.

114
00:10:00,910 --> 00:10:05,350
The answers are so a reload.

115
00:10:05,470 --> 00:10:06,300
So this one's good.

116
00:10:06,310 --> 00:10:07,800
It's got three answers.

117
00:10:08,380 --> 00:10:09,190
So click that.

118
00:10:14,100 --> 00:10:19,470
And instead of outputting everything, we're going to log out that information so it's a little bit

119
00:10:19,470 --> 00:10:23,070
easier to troubleshoot as we're passing in the two objects.

120
00:10:28,560 --> 00:10:31,440
And this actually should be data items.

121
00:10:37,050 --> 00:10:38,800
So let's try that one more time.

122
00:10:38,820 --> 00:10:40,680
Find one that has some answers.

123
00:10:44,090 --> 00:10:51,950
And so this is returning back the question information and then also the answers that are associated

124
00:10:51,950 --> 00:10:56,090
with the question, so ready to output them on the page and build the page content.

125
00:11:02,470 --> 00:11:09,010
So clearing out would output in our HTML and then we're also going to be looping through each one of

126
00:11:09,010 --> 00:11:09,790
the items there.

127
00:11:14,310 --> 00:11:22,590
So each one of the answers and right now we're just going to do a console log of each one of the answer

128
00:11:22,590 --> 00:11:23,010
items.

129
00:11:25,220 --> 00:11:32,540
And this actually should be answers that were looping through and we can also refer to it as item or

130
00:11:32,550 --> 00:11:37,730
actually let's just refer to it as answer and then I'll put the answer into the console.

131
00:11:49,660 --> 00:11:55,570
So there's each one of the answers being put into the console and then we can deconstruct this object

132
00:11:55,570 --> 00:11:58,400
information to extract the data that we want.

133
00:11:58,450 --> 00:11:59,920
The property values that we want.

134
00:12:02,110 --> 00:12:04,090
And for the object itself.

135
00:12:10,020 --> 00:12:17,670
Let's pull out some information and add it, such as the title, the question ID, we can also include

136
00:12:17,670 --> 00:12:18,150
the link.

137
00:12:22,420 --> 00:12:27,520
And the answer counts, so we're going to add those four properties onto the page.

138
00:12:35,790 --> 00:12:39,260
And we're just adding it to the main output area.

139
00:12:42,370 --> 00:12:49,240
So let's use the element crater that we have the note, make note.

140
00:12:51,980 --> 00:12:59,230
And do the make note function and return back the content that we need, so that's coming into the question

141
00:13:01,070 --> 00:13:01,550
title.

142
00:13:04,560 --> 00:13:10,410
And this is going to be referencing the main title so you can set that as an to as we're outputting

143
00:13:10,410 --> 00:13:11,320
the HTML.

144
00:13:12,000 --> 00:13:15,570
So this is going to be just going right to output.

145
00:13:20,760 --> 00:13:23,490
And we can set this up as the title.

146
00:13:26,850 --> 00:13:30,280
Next, we want to output's the question ID as well.

147
00:13:33,570 --> 00:13:40,350
I.D., so let's return back the question ID value from the property names.

148
00:13:43,230 --> 00:13:53,130
I would put that and this can just be done within a div, so separated out as a div and it's making

149
00:13:53,130 --> 00:13:54,870
just another div node.

150
00:13:58,060 --> 00:14:03,190
And then the other properties that we want to output, so maybe we want to do a link.

151
00:14:06,040 --> 00:14:07,690
So this could just be the link.

152
00:14:16,320 --> 00:14:22,440
And, well, output, so this is going into a hyperlink, so the contents of this are going to be from

153
00:14:22,440 --> 00:14:26,520
the question link and that's what we're going to output there.

154
00:14:27,280 --> 00:14:30,810
And for the link, we can set the

155
00:14:33,390 --> 00:14:34,200
attribute.

156
00:14:38,520 --> 00:14:44,520
Of HSF, and that will can equal whatever the question Lync value is.

157
00:14:47,140 --> 00:14:57,970
And also for the link set attribute and also the attribute of target to be equal to blank, so it's

158
00:14:57,970 --> 00:14:59,150
going to open up on a new page.

159
00:15:00,610 --> 00:15:02,190
So let's see what we have so far.

160
00:15:02,350 --> 00:15:03,180
So I click it.

161
00:15:06,320 --> 00:15:12,680
We've got the links there, so these are active hyperlinks and loads to the question.

162
00:15:15,780 --> 00:15:26,130
We've got the Idy value, so it's the title, we've got the question idy and let's add that into so

163
00:15:26,130 --> 00:15:27,720
we know what that's referring to.

164
00:15:32,860 --> 00:15:35,110
So the question ID, we've got the hyperlink.

165
00:15:38,540 --> 00:15:43,250
And what other information that we want to load click at?

166
00:15:51,380 --> 00:15:57,590
And we also want to load the number of answers that there are so accretes one more.

167
00:16:01,400 --> 00:16:03,440
Total and

168
00:16:05,900 --> 00:16:10,010
answers, and we're just going to reference the number of answers.

169
00:16:24,980 --> 00:16:27,230
And that's contained under the answer count.

170
00:16:36,440 --> 00:16:43,970
So we've got three answers question and then the link, the hyperlink, so we want to loop through and

171
00:16:43,970 --> 00:16:49,880
output the answers on the page as well, and we're just going to hand those to the output or we can

172
00:16:49,880 --> 00:16:51,980
create another element, another div.

173
00:16:54,670 --> 00:17:00,280
And this can just serve as our main container for the answers in case we don't apply some styling to

174
00:17:00,280 --> 00:17:00,420
it.

175
00:17:04,040 --> 00:17:08,570
So making a note and the content of this one is just going to be blank.

176
00:17:12,830 --> 00:17:21,080
And as we loop through, these are the contents that we have for the answers, so we've got an ID value

177
00:17:21,080 --> 00:17:21,800
for the answer.

178
00:17:28,300 --> 00:17:38,650
And let's use the same function to make the note, and this time we're tending it to the answer diff

179
00:17:40,060 --> 00:17:45,780
and this could be a diff and let's create some contents for HTML.

180
00:17:46,410 --> 00:17:49,450
This is what we're going to contain into the element.

181
00:17:49,990 --> 00:17:54,290
And then this will just be whatever we're building as the HTML content.

182
00:17:56,080 --> 00:18:00,310
So here we can add in the answer ID.

183
00:18:02,990 --> 00:18:10,190
And whatever other values that we want to add, so answer and answer ID.

184
00:18:17,580 --> 00:18:19,950
And let's just do a line break.

185
00:18:23,190 --> 00:18:24,600
So for each one of these.

186
00:18:40,820 --> 00:18:46,490
And we could also then afterwards query to get the answer information, but right now we're just get

187
00:18:46,490 --> 00:18:48,440
the owner contents.

188
00:18:49,700 --> 00:18:51,410
So under the owner display name.

189
00:18:57,330 --> 00:19:07,200
So that's going to be contained within the answer, and that's under the owner object, and then that's

190
00:19:07,200 --> 00:19:09,590
the display name that we have for the owner.

191
00:19:10,470 --> 00:19:12,210
So let's see what we have so far.

192
00:19:15,730 --> 00:19:17,920
Well, we clicked to load the answers.

193
00:19:21,210 --> 00:19:26,580
And as we loop through, let's get an index value for the answers.

194
00:19:29,170 --> 00:19:29,980
So that way

195
00:19:32,920 --> 00:19:42,400
and adding an answer no, so this will be whatever the index says, plus one and do another line, break

196
00:19:42,400 --> 00:19:42,670
their.

197
00:19:45,070 --> 00:19:51,760
And then, of course, until rule, so let's load one that has multiple answers.

198
00:19:51,790 --> 00:19:52,870
This one has two answers.

199
00:19:54,550 --> 00:19:57,220
So we click it, we get answer, one answer to.

200
00:20:02,540 --> 00:20:04,860
And maybe we'll do the horizontal rule above.

201
00:20:09,590 --> 00:20:16,550
So three answers, one, two and three, and then these are the results, and of course, you can select

202
00:20:16,550 --> 00:20:20,000
more information from the owner if you want.

203
00:20:22,890 --> 00:20:31,140
Good idea, and I despise despites, their display name also accept rate as well, so it's maybe another

204
00:20:31,140 --> 00:20:40,410
number that you want to add and so we'll just bracket that under answer owner and the accept rate.

205
00:20:41,370 --> 00:20:46,590
So at the dollar sign in the curly brackets to add that value and.

206
00:20:52,770 --> 00:20:54,230
And let's try that one more time.

207
00:21:03,410 --> 00:21:08,510
So let's do a reading and then reading if it's undefined.

208
00:21:11,780 --> 00:21:19,040
So it's going to be under this variable, so if the reading is if this is equal to.

209
00:21:22,650 --> 00:21:26,040
Or we can just set it as that or it's just going to be blank.

210
00:21:30,150 --> 00:21:37,340
And then add that value in as reading, so that way, hopefully we don't have the undefined anymore

211
00:21:39,270 --> 00:21:43,580
and it just adds in the if there's no value associated with it.

212
00:21:50,890 --> 00:21:57,550
So we're ready to apply some styling and we actually have to add the clicker that to the entire object

213
00:21:57,730 --> 00:21:59,920
as we've only got the click of Enten on the title.

214
00:22:04,320 --> 00:22:07,350
And let's add the click event to the main object.

215
00:22:10,520 --> 00:22:15,470
So that way we can click any part of the main object and let's

216
00:22:19,220 --> 00:22:19,880
refresh.

217
00:22:23,170 --> 00:22:24,760
And that's working a little bit better.

218
00:22:28,140 --> 00:22:34,800
So if we're getting undefined here for the question ID, then we should add the option to click at.

219
00:22:37,590 --> 00:22:45,300
Or if we do click it and if the ID is undefined, so we do the get by ID.

220
00:22:50,300 --> 00:22:52,700
So do a quick check to see if.

221
00:22:56,590 --> 00:22:58,060
Well, it exists

222
00:23:00,850 --> 00:23:05,170
then we do all this stuff otherwise.

223
00:23:16,120 --> 00:23:22,600
We're just going to write that there's been an error, that it's not we're not able to click it and

224
00:23:22,600 --> 00:23:24,280
we'll just put that in the console.

225
00:23:31,700 --> 00:23:35,450
So some of them don't have an ID and those ones aren't clickable.

226
00:23:41,970 --> 00:23:45,540
Let's apply some styling to the content

227
00:23:48,270 --> 00:23:49,890
and do an inspect on this.

228
00:23:56,060 --> 00:23:58,460
So for the main elements.

229
00:24:01,810 --> 00:24:04,150
And we'll just give it a class of Infl.

230
00:24:06,830 --> 00:24:10,910
And let's settle with two 80 percent border.

231
00:24:19,020 --> 00:24:21,030
And let's sort the font size.

232
00:24:28,140 --> 00:24:30,720
And then apply the class of info.

233
00:24:33,490 --> 00:24:39,070
To the main element as we're getting it by ID and then we're building the page data.

234
00:24:42,690 --> 00:24:53,040
And taking the answer, Divx and Closs list, let's add the class of info.

235
00:25:02,930 --> 00:25:04,610
So need to find out some answers.

236
00:25:08,350 --> 00:25:11,260
And that one doesn't have an ID, so it's not clickable.

237
00:25:14,270 --> 00:25:22,890
They're actually the ones that don't have I.D., let's carry those out, so as we're showing them so

238
00:25:22,890 --> 00:25:26,040
we can also just not have an event listed on them either.

239
00:25:33,060 --> 00:25:37,890
So if question ID, then we add the event listener.

240
00:25:40,750 --> 00:25:51,490
Otherwise, we're going to create the element, so to take me style and a lot of background.

241
00:25:56,580 --> 00:25:58,380
And ATAC background color.

242
00:25:59,420 --> 00:26:08,070
I just moved that in and then also let's output to the content so we'll add some more content to the

243
00:26:08,070 --> 00:26:13,080
node and this is just going to indicate whatever the ID is.

244
00:26:13,620 --> 00:26:15,600
So selling it to the machine.

245
00:26:15,600 --> 00:26:19,440
And this is going to be the key ID that we have.

246
00:26:20,460 --> 00:26:25,920
And that's going to just be referencing the question ID and we've got to give it a new different name.

247
00:26:30,390 --> 00:26:34,500
And question it, so will I put that to the page as well?

248
00:26:42,160 --> 00:26:46,090
So it looks like some of them aren't passing the question ID properly.

249
00:26:49,050 --> 00:26:51,740
And they all do appear to have a question, Heidi.

250
00:26:56,450 --> 00:27:02,960
So we need to do some troubleshooting to check to see why this ID is not passing within the element

251
00:27:02,960 --> 00:27:03,650
QAD.

252
00:27:05,890 --> 00:27:13,250
Maybe we can output it this way just to double check and see if it's outputting so it is being registered

253
00:27:13,250 --> 00:27:14,210
within the object.

254
00:27:20,690 --> 00:27:25,460
And maybe to be sure, we'll just update the get by it

255
00:27:28,310 --> 00:27:34,820
and we'll call the function manually, get by ID and then we'll pass in the ID of the element.

256
00:27:38,640 --> 00:27:41,270
And this is just going to take the value of the question, Heidi.

257
00:27:48,410 --> 00:27:51,800
And the only value that we need here is the question ID.

258
00:27:54,520 --> 00:27:58,660
So this is going to be taking the QAD, we don't need the target anymore.

259
00:28:04,300 --> 00:28:06,460
And let's update these values here.

260
00:28:11,260 --> 00:28:17,830
And save it, so now whenever we click it, they should all be working.

261
00:28:22,240 --> 00:28:28,420
And let's double check the element and see if we're applying the styling so it doesn't look like we're

262
00:28:28,780 --> 00:28:33,760
applying the styling, we are applying the styling of Infl to that element itself.

263
00:28:35,410 --> 00:28:43,140
So let's a margin of auto and you can apply styling as needed to the element content.

264
00:28:43,450 --> 00:28:46,630
So all the answers are also going to use some Google fonts.

265
00:28:51,520 --> 00:28:59,350
And add in the Google font into the styling of the page and add that just into the body of the page.

266
00:29:02,100 --> 00:29:11,250
So first we import the style and then to the body, the Ford family, we can add this as the font family.

267
00:29:12,360 --> 00:29:15,840
So to it that looks like change the way the application looks.

268
00:29:19,050 --> 00:29:25,650
And we also might want to apply some styling there within this main container, within the output container.

269
00:29:30,980 --> 00:29:33,690
So just kind of separating out it to output as well.

270
00:29:38,500 --> 00:29:46,150
So now we're loading the question content dynamically, depending on what the question is, and let's

271
00:29:46,150 --> 00:29:53,640
do one more quick look and see what we've got for the API so we can as well do a search within the API.

272
00:29:54,940 --> 00:29:56,320
And this is going to be the.

273
00:30:02,300 --> 00:30:09,230
Search, so we're going to add in still a quick option to do a search within the input and be able to

274
00:30:09,230 --> 00:30:12,440
click and update and output the content of the search.

275
00:30:12,590 --> 00:30:13,970
So that's coming up in part three.

276
00:30:21,190 --> 00:30:27,820
The challenges for this lesson and the tasks for this lesson are to make multiple Thach requests to

277
00:30:27,820 --> 00:30:29,780
that end point and return back data.

278
00:30:30,100 --> 00:30:33,090
So investing in a request with another request.

279
00:30:33,340 --> 00:30:41,140
So we're getting the question information as well as the answers content and then building out the content

280
00:30:41,140 --> 00:30:44,230
dynamically according to what the JSON data returns.

281
00:30:44,710 --> 00:30:49,360
And then also depending on what the user selection is, outputting some page content.