1
00:00:00,360 --> 00:00:06,300
Hey, in this lesson, we're building out a joke API, so that allows us to connect to the Chuck Norris

2
00:00:06,300 --> 00:00:10,110
API and get jokes back from the Chuck Norris API.

3
00:00:10,320 --> 00:00:16,520
And there was a warning for this lesson that some of these jokes there might be not your style.

4
00:00:16,530 --> 00:00:18,920
So you are welcome to skip this.

5
00:00:19,440 --> 00:00:23,340
Some of the jokes, they might be offensive.

6
00:00:23,520 --> 00:00:26,790
So keep that in mind that we're not writing the jokes.

7
00:00:27,000 --> 00:00:33,270
We're just connecting to that endpoint, the API and getting some of the content back in order to practice

8
00:00:33,270 --> 00:00:34,750
constructing Web applications.

9
00:00:35,160 --> 00:00:39,150
So this is an open, free JSON API that we can connect to.

10
00:00:39,450 --> 00:00:42,750
And they've got some documentation on the websites as well.

11
00:00:43,480 --> 00:00:49,350
So at the end, we are going to create an application that's going to generate a number of categories.

12
00:00:49,530 --> 00:00:55,440
When you click the category, it allows us to get a random joke from that category and displayed on

13
00:00:55,440 --> 00:00:55,920
the page.

14
00:00:56,130 --> 00:01:02,670
I've made the jokes text fairly small again because we don't want to focus too much on the text of the

15
00:01:02,670 --> 00:01:06,360
joke, but more on the JSON data and create an application.

16
00:01:06,600 --> 00:01:13,920
We can also search for a search term and that will return back the joke according to whatever the search

17
00:01:13,920 --> 00:01:14,510
term is.

18
00:01:14,730 --> 00:01:18,690
So we do have the usage where we can just get a random joke.

19
00:01:19,050 --> 00:01:23,910
We're going to be also covering how we can generate and get the categories list.

20
00:01:23,940 --> 00:01:28,590
So this is just an array of all the different categories that are available for the jokes.

21
00:01:28,860 --> 00:01:31,760
And then from the categories we can select a random joke.

22
00:01:31,980 --> 00:01:39,120
So building out the categories, list dynamically of buttons and then selecting from those buttons and

23
00:01:39,120 --> 00:01:44,910
generating random joke from those categories and also being able to search to return back joke results

24
00:01:46,200 --> 00:01:52,290
and then outputting the content onto our page and making a fully interactive web application that's

25
00:01:52,290 --> 00:01:56,760
going to be driven from JSON data within the Chuck Norris API.

26
00:01:57,120 --> 00:02:01,890
The assessment we're going to be connecting to the joke API that Chuck George and George API.

27
00:02:02,250 --> 00:02:08,610
So the HTML file is set up the same way as in the earlier lessons where we've got the HTML elements

28
00:02:08,820 --> 00:02:16,020
that we can interact with the button, also update and get an input value and with the each one have

29
00:02:16,020 --> 00:02:19,380
a title and then linking to a new file.

30
00:02:19,650 --> 00:02:26,790
So that's up seven G.S. And in this case we've just got the basics as well, starting out with connecting

31
00:02:26,790 --> 00:02:32,760
to the elements on the page, connecting them to objects that we can use in JavaScript and then adding

32
00:02:32,760 --> 00:02:34,350
an event listener to the object.

33
00:02:34,530 --> 00:02:39,780
So when I click the button, we've got ready coming up and we're ready to start interacting and getting

34
00:02:39,780 --> 00:02:41,810
some content from the Endpoint API.

35
00:02:42,210 --> 00:02:51,090
So this is the API, Chuck Norris start all sorts of free JSON API and allows you to send.

36
00:02:52,140 --> 00:02:53,490
Chuck Norris jokes.

37
00:02:54,210 --> 00:02:57,180
So this is a free app that you can interact with.

38
00:02:57,390 --> 00:03:03,720
You can also do a free text search by sending to Chuck and then questionmark with the search term.

39
00:03:03,900 --> 00:03:11,160
So we'll try out a few of these different ways of making connections as where we can get jokes from

40
00:03:11,160 --> 00:03:12,530
particular categories.

41
00:03:12,540 --> 00:03:15,180
So they've broken it apart within categories.

42
00:03:15,450 --> 00:03:19,570
So this is also a Jason list that we can use as well.

43
00:03:19,950 --> 00:03:25,410
So let's make an interactive application using this Chuck Norris joke.

44
00:03:26,640 --> 00:03:27,390
And point.

45
00:03:31,000 --> 00:03:36,070
So first of that, we want to do is update and add that you are all that we're connecting to.

46
00:03:36,520 --> 00:03:42,400
So the base URL for the Chuck Norris jokes is going to be this.

47
00:03:42,580 --> 00:03:43,980
So jokes random.

48
00:03:45,340 --> 00:03:52,480
And if we do want to have the search query that we'd have to remove at random so that we could accommodate

49
00:03:52,480 --> 00:03:55,600
for search for random four categories.

50
00:03:56,080 --> 00:04:00,790
So let's just have the base, your URL and then when you click the button.

51
00:04:04,070 --> 00:04:06,410
And this will output the joke.

52
00:04:10,500 --> 00:04:17,320
And actually, let's do the get joke, so that's the euro that we're going to make the Thach request

53
00:04:17,360 --> 00:04:26,250
to such request to the euro and return back the response object and then take the response object and

54
00:04:26,250 --> 00:04:35,100
return it as JSON and then get the JSON data and then we're going to put that onto the console.

55
00:04:37,580 --> 00:04:44,240
So it's going to be the data, so the URL that we want to connect to, so this is just going to be jokes,

56
00:04:44,240 --> 00:04:53,870
random, so outputting and using the get joke and let's updates and create a temp yourself.

57
00:04:54,230 --> 00:05:01,750
And your URL is going to use the base, your URL, and then add to it just the text of random.

58
00:05:02,000 --> 00:05:04,190
So that will return back a random joke.

59
00:05:05,770 --> 00:05:14,530
And let's use this as the URL that we're connecting to you and also to just update us to one so they're

60
00:05:14,530 --> 00:05:18,630
not passing in and we're not any confusion with the URL variable.

61
00:05:19,900 --> 00:05:21,580
So refresh click the button.

62
00:05:23,480 --> 00:05:31,640
And just double check the code, click the button, and that should return back.

63
00:05:32,630 --> 00:05:38,540
OK, so we've got the basic so we've got the categories and we've got a value that's being returned.

64
00:05:38,870 --> 00:05:42,600
So the actual joke is sitting within the value.

65
00:05:44,840 --> 00:05:49,550
So there's our joke and whenever we click it, we can output a different joke.

66
00:05:50,510 --> 00:05:53,330
So let's add the joke to Page.

67
00:05:57,830 --> 00:06:08,480
And we'll take Output's clean out the inner HTML and add the joke to the page, so we'll just add and

68
00:06:08,480 --> 00:06:13,910
append whatever we've currently got on the page with whatever we've got for the value.

69
00:06:15,200 --> 00:06:19,300
And instead of doing a console like, we're going to just put it to the page.

70
00:06:24,180 --> 00:06:29,010
So this gives us an opportunity to click and update and get different jokes.

71
00:06:29,790 --> 00:06:32,640
Let's also try the search of the jokes.

72
00:06:33,120 --> 00:06:34,440
So instead of.

73
00:06:37,790 --> 00:06:44,960
The random one, well, we'll do a search query and then we'll also get all of the categories, list

74
00:06:44,960 --> 00:06:51,020
them out and have those as clickable buttons that we can get jokes from within those categories or making

75
00:06:51,020 --> 00:06:52,570
the API request.

76
00:06:53,030 --> 00:06:56,170
So let's update this to be the search query.

77
00:06:56,480 --> 00:07:06,980
So this button is going to take the value from the search and let's update the parameters so jokes and

78
00:07:07,070 --> 00:07:11,830
update that to include search and then whatever the query value is.

79
00:07:12,530 --> 00:07:18,250
So let's get the value, the query value and we can get this from input value.

80
00:07:18,980 --> 00:07:25,040
So whatever the current value is, and that's going to be our query value.

81
00:07:25,340 --> 00:07:27,380
So add that as a valuable one.

82
00:07:27,680 --> 00:07:31,970
And also we want to make sure that we don't have a vowel, an empty value.

83
00:07:32,330 --> 00:07:35,360
So let's add in test as a default value for vowel.

84
00:07:38,810 --> 00:07:44,960
Because currently, within the input, we don't have any contents there, so let's refresh.

85
00:07:47,460 --> 00:07:54,210
And for now, we'll console, logout the tempura, and then we can open up the browser just to make

86
00:07:54,210 --> 00:07:54,920
sure it's working.

87
00:07:57,750 --> 00:08:00,810
So that is turning back some results.

88
00:08:02,690 --> 00:08:10,340
And the reason we're not getting the joke being added is that this is returning back an array of content.

89
00:08:10,350 --> 00:08:13,380
So we've got a number of results that are being returned back.

90
00:08:13,650 --> 00:08:20,550
So we can't send it over to get joke where we have to get jokes for this case.

91
00:08:21,120 --> 00:08:27,750
So this is going to be in case we've got multiple items that are being returned, so do the similar

92
00:08:27,750 --> 00:08:29,820
type format where we've got the Thach request.

93
00:08:30,240 --> 00:08:36,030
And except we're going to cancel logout the results as data so we can take a closer look at the object

94
00:08:36,030 --> 00:08:36,870
that's being returned.

95
00:08:39,790 --> 00:08:42,590
And this would actually be going to get jokes.

96
00:08:44,590 --> 00:08:50,140
So it's safe and we're getting a total of one hundred and fifty six results.

97
00:08:54,730 --> 00:09:00,860
Let's try this result, so one hundred and thirty one results, so the input field is returning back

98
00:09:00,860 --> 00:09:02,140
a different set of results.

99
00:09:04,670 --> 00:09:17,270
So the array here is contained within result, so let's update output and set that the HTML as we're

100
00:09:17,270 --> 00:09:25,100
going to be clearing out the output and we want to get whatever was searched for the total results.

101
00:09:29,390 --> 00:09:31,580
So let's add in the search term.

102
00:09:35,810 --> 00:09:38,420
And that's going to be equal to the Vall one.

103
00:09:41,060 --> 00:09:42,500
So do the search term.

104
00:09:46,140 --> 00:09:54,780
And we can output search term here found and then the number that we've found, and this is just coming

105
00:09:54,780 --> 00:10:02,760
from the JSON data under total, so data that total will return back the total number of results that

106
00:10:02,760 --> 00:10:03,180
were found.

107
00:10:03,810 --> 00:10:05,820
So test found results.

108
00:10:08,890 --> 00:10:17,710
So I read found six hundred and seventeen results, so it is changing and we are able to update it.

109
00:10:19,450 --> 00:10:26,280
Let's try another one and big search finds one hundred and thirty one results.

110
00:10:26,950 --> 00:10:29,860
So all of the content is contained within the results.

111
00:10:30,520 --> 00:10:33,510
And this is where we can loop through and we can add the jokes.

112
00:10:35,050 --> 00:10:40,120
So taking data results and using for each.

113
00:10:42,270 --> 00:10:49,830
We're going to live through each one of the results, so each one of these jokes and how about we output

114
00:10:49,830 --> 00:10:53,160
the joke onto you into the console?

115
00:10:55,490 --> 00:11:01,430
And just make sure you get the brackets around joke, and that's what's being returned, and that actually

116
00:11:01,430 --> 00:11:03,230
should be results, not results.

117
00:11:04,160 --> 00:11:06,330
So that's why it wasn't able to find the results.

118
00:11:07,220 --> 00:11:12,440
So we've got categories as an array because it might contain multiple categories.

119
00:11:12,930 --> 00:11:17,980
It's got an icon, you URL and ID, your URL and a value.

120
00:11:18,770 --> 00:11:22,180
So the value is the one that we can use to output the joke.

121
00:11:23,180 --> 00:11:30,920
So if you want to add the joke to the page, we can select the joke and get the value.

122
00:11:34,210 --> 00:11:37,620
And then as we're looping through, that should add all of the jokes to the page.

123
00:11:38,590 --> 00:11:46,660
So let's try another one, do something like happy and that return back the results so you can style

124
00:11:46,660 --> 00:11:48,990
this and customize it as needed.

125
00:11:49,300 --> 00:11:56,470
The other option is that I want to loop through the array of categories and provide a way to select

126
00:11:56,470 --> 00:12:00,310
the contents of those categories and put those on the page.

127
00:12:00,680 --> 00:12:07,150
And I'm just going to add in a line break so that we'll add in a line, breaks a little local jokes

128
00:12:07,150 --> 00:12:11,470
are separated, and next, let's loop through the categories.

129
00:12:11,950 --> 00:12:17,070
So as we load the page content, we did have an option for categories.

130
00:12:17,650 --> 00:12:20,620
So these are all the different categories that we can search under.

131
00:12:21,550 --> 00:12:23,170
So once the page loads.

132
00:12:25,570 --> 00:12:27,760
We can make a fat request.

133
00:12:30,100 --> 00:12:32,080
And build Cats'.

134
00:12:34,070 --> 00:12:41,000
And just run the function to build the categories and we're going to make fetch request for the building

135
00:12:41,000 --> 00:12:45,380
of the categories, so let's set up the function and build cats.

136
00:12:45,650 --> 00:12:51,470
So to build all of the categories on the page, to select the categories and add buttons to the page

137
00:12:51,680 --> 00:12:53,710
according to the categories.

138
00:12:53,990 --> 00:13:00,320
So using the jokes as the base, you are where you make a fêtes request to get the categories.

139
00:13:00,680 --> 00:13:08,660
So let's first start by creating our new URL temp and we're going to use the user well one as the base

140
00:13:08,990 --> 00:13:17,720
and then just append it with the categories and this will return back the categories and you can console

141
00:13:17,720 --> 00:13:22,850
logout that your URL so that we can be sure that what you are all working with.

142
00:13:23,570 --> 00:13:28,640
Let's load the page, build the categories, click the link to make sure that you're getting the categories.

143
00:13:28,970 --> 00:13:31,240
And this is presented within an array format.

144
00:13:31,550 --> 00:13:37,210
So that means that the returned results we can iterate through and we can output onto the page.

145
00:13:37,790 --> 00:13:41,360
So let's make our Futch request to the Eurail.

146
00:13:41,900 --> 00:13:45,440
So making our Futch request to the U.

147
00:13:45,440 --> 00:13:51,040
RL temp value and returning back our response object.

148
00:13:51,290 --> 00:13:57,500
And from that response object, this is JSON formatted, so we're able to return it back as JSON.

149
00:13:58,280 --> 00:14:05,780
And then lastly, let's do the last promise where we're getting the data results return back and we

150
00:14:05,780 --> 00:14:07,520
want to loop through the data.

151
00:14:08,000 --> 00:14:11,640
So let's do a console log and check out what we've got for data.

152
00:14:11,870 --> 00:14:14,120
So this would provide us a list of the categories.

153
00:14:14,360 --> 00:14:22,040
And from these categories, we can then take data and use for each and loop through each one of the

154
00:14:22,040 --> 00:14:27,740
category and then use those and create some buttons on the page.

155
00:14:30,900 --> 00:14:40,370
And this action needs to be button one or button temp or create some temporary buttons, so document

156
00:14:40,950 --> 00:14:51,870
create elements and the element that we're creating is going to be a button and the button text button

157
00:14:51,870 --> 00:14:59,340
temp text content is going to be equal to whatever we've got for the cut value.

158
00:15:00,690 --> 00:15:03,540
And then we want to append these to the page.

159
00:15:08,290 --> 00:15:11,860
So let's take the button and we're going to hand it to button.

160
00:15:18,160 --> 00:15:21,610
And append the button temp object to the button.

161
00:15:24,030 --> 00:15:25,980
Actually, we're going to hand it to the H1.

162
00:15:29,820 --> 00:15:32,010
So first will clear the one.

163
00:15:34,850 --> 00:15:37,580
And update the inner HTML.

164
00:15:39,980 --> 00:15:45,770
So that gives us a listing of all the buttons and let's make the buttons clickable so that whenever

165
00:15:45,770 --> 00:15:51,710
we click the button, we can make the request to get the jokes and we're not going to be doing the search

166
00:15:51,710 --> 00:15:52,080
term.

167
00:15:52,100 --> 00:15:59,360
This time we're going to be doing the category, as in the documentation, it provides us an option

168
00:15:59,540 --> 00:16:01,990
to get content by categories.

169
00:16:02,510 --> 00:16:07,150
So we've got the category and we can select a random joke from a category.

170
00:16:07,490 --> 00:16:10,080
So that's going to be the Web URL that we want to use.

171
00:16:10,730 --> 00:16:17,420
So let's add in to the button temp at an event, listener to the bottom temp.

172
00:16:17,810 --> 00:16:21,740
So adding in the click event and then the event object.

173
00:16:22,160 --> 00:16:24,620
And this is where we can make the Thach request.

174
00:16:27,830 --> 00:16:33,350
And this is going to be the end point that we want to request to, and we've also got the category here

175
00:16:33,530 --> 00:16:40,560
so undercut, so console log and just make sure that we have the text object that's ready to use.

176
00:16:41,000 --> 00:16:46,550
So refresh and that's getting the category as text.

177
00:16:46,880 --> 00:16:50,960
So we do need that in order to get the temporary URL.

178
00:16:54,940 --> 00:16:58,390
So for this temporary URL.

179
00:17:01,480 --> 00:17:11,680
We're going to use that URL and then concatenate to it random and then whatever the category value is

180
00:17:12,130 --> 00:17:19,810
so advertised as a string and then lastly, add the category to it and then we can make a fetch request

181
00:17:19,810 --> 00:17:30,520
to the temp you URL and then return back the response object and the response can be responded back

182
00:17:30,520 --> 00:17:34,410
and return back as JSON and then once we have the content.

183
00:17:35,620 --> 00:17:38,200
So that's going to be the JSON content.

184
00:17:39,730 --> 00:17:47,350
We should have a value that's contained within there and phrenologists console log out the JSON data

185
00:17:49,990 --> 00:17:56,890
and that should be able to return back that value and that will be the joke from the random joke in

186
00:17:56,890 --> 00:17:57,760
that category.

187
00:17:59,890 --> 00:18:03,040
So we've got a random joke within the category.

188
00:18:03,250 --> 00:18:08,230
When we click the categories, we can return back those jokes that are associated with those categories.

189
00:18:08,650 --> 00:18:13,840
And then also, just as we did before, we can add the joke content.

190
00:18:16,490 --> 00:18:26,030
And here we just add the joke from the Jason value, and now whenever we click, we can get a joke from

191
00:18:26,030 --> 00:18:27,210
the particular category.

192
00:18:28,070 --> 00:18:32,030
Also, if we want, we can also clear out the inner HTML.

193
00:18:35,800 --> 00:18:37,420
So before we are joke.

194
00:18:40,550 --> 00:18:48,290
We can specify to the user which category it is that we're adding the joke from and just specify the

195
00:18:48,290 --> 00:18:48,890
category.

196
00:18:51,420 --> 00:18:54,420
And also add to that.

197
00:18:58,050 --> 00:19:05,080
Or horizontal rule, so category and then whatever joke that we've got for the category.

198
00:19:05,700 --> 00:19:13,020
So there we go and we've completed the Web application, you can apply styling to the elements as well.

199
00:19:26,120 --> 00:19:35,690
And Curser Pointer, and this is just for the buttons, let's make the font size bigger border.

200
00:19:39,120 --> 00:19:48,180
And you can apply whatever styling suits your your design, it's just some quick styling for the buttons

201
00:19:48,180 --> 00:19:55,680
themselves and I'm going to add that to each one of the button.

202
00:19:56,490 --> 00:20:04,800
Temp's using class list and then add and the class that I'm adding is the buttons.

203
00:20:11,760 --> 00:20:17,460
And actually, let's make this smaller, it's coming across fairly large.

204
00:20:21,120 --> 00:20:27,690
And a little bit less padding, so but we try eight picks and I'll do a margin around them as well,

205
00:20:29,380 --> 00:20:34,920
so some space around the buttons and it looks like we need just a touch more padding.

206
00:20:37,450 --> 00:20:43,750
And usually because these are buttons, clickable buttons, I like to have the hover effect, and I

207
00:20:43,750 --> 00:20:51,040
usually typically will use the opacity so that whenever you hover over it, you get that kind of button

208
00:20:51,040 --> 00:20:51,720
feel to them.

209
00:20:55,490 --> 00:20:59,840
There's also the ones like Text Transform.

210
00:21:01,530 --> 00:21:06,660
We can capitalize the text, can also change it to uppercase as well.

211
00:21:12,720 --> 00:21:17,880
And just click through it, make sure that it's working and also for output.

212
00:21:25,410 --> 00:21:30,840
And I was just at the march on here to Otto and said a default with.

213
00:21:32,550 --> 00:21:34,830
70 percent and a border.

214
00:21:45,300 --> 00:21:51,810
So that will output the content and also I'm going to add in a font size for the content.

215
00:21:58,570 --> 00:22:04,270
And you can also apply staling to the input and to the click me button, so the click me button is actually

216
00:22:04,270 --> 00:22:04,870
a search.

217
00:22:06,700 --> 00:22:08,860
So that's search.

218
00:22:11,280 --> 00:22:17,130
These ones are clickable categories, and I am going to apply some styling to the input.

219
00:22:20,260 --> 00:22:22,210
As well as to the button object.

220
00:22:26,440 --> 00:22:28,960
And let's update the font size to two.

221
00:22:36,720 --> 00:22:39,900
And check those to display as Vlok.

222
00:22:43,210 --> 00:22:45,490
And actually, I'm going to do this in line block.

223
00:22:48,860 --> 00:22:50,570
So that will apply some spacing.

224
00:22:59,480 --> 00:23:03,200
And let's do a text, a line, and we can central line the text.

225
00:23:07,780 --> 00:23:14,410
And if we want to align this, the central line that we'd have to have an element wrapping it and that

226
00:23:14,410 --> 00:23:21,940
way we could align it, we could also set with all of the inputs 50 percent.

227
00:23:25,260 --> 00:23:31,140
And that's actually setting on the button as well, so just leave that and we can set to the button.

228
00:23:37,920 --> 00:23:39,270
And it's the button class.

229
00:23:48,540 --> 00:23:50,820
And let's make the font size even bigger.

230
00:23:56,030 --> 00:24:03,500
So that gives us a better search option where you can search for all the related text, we can select

231
00:24:03,500 --> 00:24:14,430
a joke at random from a category that's up to you to take it from here and update your application accordingly.

232
00:24:17,160 --> 00:24:24,150
This is a practice lesson to connect to an end point and get juice on data back and construct a dynamic

233
00:24:24,150 --> 00:24:28,860
Web application that changes depending on the data that we're getting back from the endpoint.