1
00:00:03,290 --> 00:00:07,470
In this lesson, we're going to be connecting to the random user API.

2
00:00:07,700 --> 00:00:11,840
So this is an API that generates dummy data that you can use.

3
00:00:11,840 --> 00:00:18,540
And also it's good practice material for making JSON and getting JSON data and putting it on the page.

4
00:00:18,770 --> 00:00:24,290
So our application is going to be dynamic where we can select the number of users that we want to return.

5
00:00:24,440 --> 00:00:30,710
We hit the click me button and that results in returning back all of these users.

6
00:00:30,740 --> 00:00:36,590
So these are dummy profiles and we've added in some features into the application where if we click

7
00:00:36,590 --> 00:00:39,260
it, it just puts it here at the top of the page.

8
00:00:39,270 --> 00:00:46,280
So whatever user we're selecting, it dumps it to the top of the page and you can build your own version.

9
00:00:46,400 --> 00:00:50,570
And there's a lot of information that's contained within the API data.

10
00:00:51,020 --> 00:00:57,620
And this is all JSON structured data that you can make use of within your webpage and practice selecting

11
00:00:57,620 --> 00:01:01,550
the different property values and outputting them onto your page.

12
00:01:02,540 --> 00:01:03,370
So let's get started.

13
00:01:03,490 --> 00:01:06,310
I've set up the default indexed to impeach.

14
00:01:06,320 --> 00:01:12,440
So we've got the five for each HTML elements here, the each one, the input, the button and the div

15
00:01:12,710 --> 00:01:19,510
so that we can output data and we've got some basic content on the page and linking OTA up five G.S..

16
00:01:19,820 --> 00:01:22,740
So that's what we're going to be doing, all of our JavaScript construction.

17
00:01:23,060 --> 00:01:29,780
So selecting that page elements cut that into the JavaScript file, also making some updates and adding

18
00:01:29,780 --> 00:01:30,530
the event listener.

19
00:01:30,770 --> 00:01:34,700
That's also double check and make sure that our event listener is firing.

20
00:01:35,570 --> 00:01:38,840
And when we click the button, we do get ready within the console.

21
00:01:39,050 --> 00:01:43,670
So we're ready to make the connection and make the facts request to return back the results.

22
00:01:43,910 --> 00:01:49,540
The API that we're connecting to in this lesson is going to be random user dot com e.

23
00:01:49,850 --> 00:01:51,920
So this is a random user generator.

24
00:01:51,920 --> 00:01:56,510
It's a free open source API that allows you to generate user data.

25
00:01:56,780 --> 00:02:03,200
And it's kind of like lorem ipsum, but it generates people in images and it generates a fairly rich.

26
00:02:05,000 --> 00:02:09,500
Set of data that you can use, and it's also a great API to practice with.

27
00:02:09,770 --> 00:02:11,400
They also have some examples here.

28
00:02:11,420 --> 00:02:16,840
So here's the query example and they give you an example of some of the results that are being returned.

29
00:02:17,030 --> 00:02:20,740
So there are quite a bit of information here within the results.

30
00:02:21,140 --> 00:02:23,900
So let's get to it and connect it to the API.

31
00:02:24,050 --> 00:02:30,380
The API address is just for its API and this is going to allow you to load.

32
00:02:35,200 --> 00:02:42,040
The AP content, and it's actually going to be fought with us at the end, so this is going to be the

33
00:02:42,190 --> 00:02:48,040
content that's being returned back and you can also open up within the Web browser and just ensure that

34
00:02:48,040 --> 00:02:49,680
this is, Jason, a data.

35
00:02:49,690 --> 00:02:55,990
So looking at the page source and if there's no HTML, then this is being returned back as Jason data

36
00:02:56,170 --> 00:03:03,190
so we can make our Fach request and return the data directly back as a Jason object and then use that

37
00:03:03,280 --> 00:03:05,370
as an object within the JavaScript.

38
00:03:05,680 --> 00:03:10,640
So let's add the Web URL and the URL is going to be this one.

39
00:03:12,160 --> 00:03:18,880
So adding it in as a string value and then let's make our Futch request to the Web you URL.

40
00:03:21,180 --> 00:03:28,110
And we'll just create a separate function and I'll call it atter, and let's run that Adir function

41
00:03:29,010 --> 00:03:36,450
in case we need to make some updates to the Web, you we'll pass the URL value directly within the outer

42
00:03:36,450 --> 00:03:39,780
function and then within the outer function.

43
00:03:40,560 --> 00:03:46,650
We're going to first output the data that's being Pastan and this is just going to be the Web you URL.

44
00:03:48,270 --> 00:03:56,040
And we can also call it your URL as well, so that when we click the button, we get the path passed

45
00:03:56,040 --> 00:04:03,060
into the function is ready to move it to the next stage where we'll make the Thach request to the Web

46
00:04:03,060 --> 00:04:08,700
you URL and once we successfully connect, it's promise based.

47
00:04:08,710 --> 00:04:14,490
So we're running the function and getting a response object being returned back.

48
00:04:15,090 --> 00:04:21,090
And with that response objects, we're going to return it back using the JSON method and then the next

49
00:04:21,090 --> 00:04:27,120
part, the next chain within the premises is where we can use data that's being returned back.

50
00:04:27,630 --> 00:04:32,420
So at this point we can get the data and this should be in a proper JSON structure.

51
00:04:33,330 --> 00:04:39,930
And just to double check, let's output that content into the console and let's also make sure that

52
00:04:39,930 --> 00:04:42,080
we're returning back the response object.

53
00:04:42,390 --> 00:04:45,710
So let's try and we see that we get the results coming back.

54
00:04:45,960 --> 00:04:52,380
So we've got results coming back from the API where we've got info and it tells us the basic overall

55
00:04:52,380 --> 00:04:54,340
info that we requested.

56
00:04:54,360 --> 00:05:00,570
We've got page one results, one seed version, and then the results and the results are represented

57
00:05:00,570 --> 00:05:01,710
within an array format.

58
00:05:01,980 --> 00:05:06,010
And we can also increase the number of results that we can return back.

59
00:05:06,240 --> 00:05:13,740
So let's make a quick update to the content and we're going to return back a number of results.

60
00:05:13,740 --> 00:05:17,970
So we'll set a default value of ten results and input.

61
00:05:17,970 --> 00:05:21,030
Val set attribute.

62
00:05:21,330 --> 00:05:24,090
And we're going to set the attribute type two number.

63
00:05:26,110 --> 00:05:32,860
So that we within the input, we're generating a number so it can be moved up and down, and that's

64
00:05:32,860 --> 00:05:35,770
the difference between the input types there with the number.

65
00:05:36,160 --> 00:05:43,630
And we want to add and append to the Web URL if we want to turn back more than just the set number of

66
00:05:43,630 --> 00:05:49,580
results we can add and select to return more results back.

67
00:05:50,710 --> 00:05:53,340
So that's with the added parameter.

68
00:05:53,890 --> 00:06:02,440
So let's get the value of what we've got from input and whatever the current value is.

69
00:06:03,070 --> 00:06:10,600
And also let's update that value so we'll create the string value where we've got the question mark

70
00:06:10,600 --> 00:06:11,590
and results.

71
00:06:11,860 --> 00:06:18,040
So we're basically going to concatenate to the Web URL and then whatever the results value is, this

72
00:06:18,040 --> 00:06:20,470
is the number of results that we want to return back.

73
00:06:22,860 --> 00:06:32,040
So we're going to add those two together, and that should now return back a string result of more items

74
00:06:32,040 --> 00:06:33,540
coming back from the point.

75
00:06:34,140 --> 00:06:38,580
And we can see that a number of results changes depending on what our input is.

76
00:06:38,910 --> 00:06:42,450
So we have a flexible number of results that we can return back.

77
00:06:43,140 --> 00:06:49,860
So let's output into the output area and then we'll send this information out to be output onto the

78
00:06:49,860 --> 00:06:50,250
page.

79
00:06:50,520 --> 00:07:00,300
So output in our HTML and using the back takes again again to select some content from the data so we

80
00:07:00,300 --> 00:07:03,960
can do a seed or whatever the seed value is.

81
00:07:03,960 --> 00:07:09,870
And that's sitting within data, info and seed object.

82
00:07:10,830 --> 00:07:15,120
And most of the time you're going to find that you can use the dot notation.

83
00:07:15,390 --> 00:07:20,760
But if there are spaces or if any of the property names have spaces or anything that's not properly

84
00:07:20,760 --> 00:07:25,170
formatted to be used in the notation, then you can use the bracket notation.

85
00:07:25,410 --> 00:07:33,600
So keep that in mind that you can use whatever one is the most effective one and results.

86
00:07:35,850 --> 00:07:42,530
And this is contained within data, info and results, so let's see what we got now.

87
00:07:43,260 --> 00:07:48,270
So we've got the seed, we've got the results, and you can also pull out whatever other information

88
00:07:48,270 --> 00:07:49,860
that you want, want it to add there.

89
00:07:50,700 --> 00:07:54,390
I just make it larger and wrap it with an H3 tags.

90
00:07:56,900 --> 00:08:04,310
So there's our results and now let's send it over to the maker function and for their maker function,

91
00:08:04,310 --> 00:08:09,630
we're going to use the data and the content is contained within the results array.

92
00:08:10,160 --> 00:08:15,680
So just going to send that array straight over into the function and then loop through the contents

93
00:08:15,680 --> 00:08:17,780
of that result.

94
00:08:19,720 --> 00:08:29,170
So that's coming in from the Jason, or we could just call it data and for now a console log out data

95
00:08:30,460 --> 00:08:34,900
so that we can check to double check to make sure that we've got the content properly.

96
00:08:35,800 --> 00:08:38,990
So we're putting the array of data.

97
00:08:39,370 --> 00:08:46,780
So let's loop through data using for each and loop through the contents.

98
00:08:46,810 --> 00:08:52,800
I can turn back that element and then within the console output, the element content.

99
00:08:54,250 --> 00:08:57,080
So let's see what we've got now and then.

100
00:08:57,080 --> 00:09:04,360
Now it's a matter of selecting from the object the data that you want to output on the page and then

101
00:09:04,360 --> 00:09:06,600
adding it using JavaScript.

102
00:09:06,910 --> 00:09:12,160
So let's select the name of the person.

103
00:09:12,770 --> 00:09:17,150
And also I'm going to create element maker.

104
00:09:18,070 --> 00:09:25,510
So first it will select the type of that type of element, hurricane element type or element tag.

105
00:09:26,690 --> 00:09:31,480
So it's going to be the tag and then the whatever the parent is.

106
00:09:31,480 --> 00:09:33,160
So in those two properties.

107
00:09:35,620 --> 00:09:43,300
And we can also have one for a content, I would just call it contents, so let's create the elements

108
00:09:44,650 --> 00:09:46,000
as we loop through.

109
00:09:46,810 --> 00:09:49,090
So that element type, it's going to be a div.

110
00:09:50,200 --> 00:09:56,780
The parent is going to be output and then whatever we want for the contents.

111
00:09:57,070 --> 00:10:00,790
So in this case, we want to add in some temporary contents.

112
00:10:03,040 --> 00:10:09,100
And I'll just give it a variable name of temp and then whatever we want placed within the elements and

113
00:10:09,100 --> 00:10:16,300
we want to use the name object, so get the name, the title, the first and last.

114
00:10:17,710 --> 00:10:19,030
So from that element.

115
00:10:21,160 --> 00:10:33,160
Let's get the name and title and then also add in the first and last values, so first and then last.

116
00:10:35,790 --> 00:10:41,670
And then this is the kind this wall reference, the content that we want to create and as we iterate

117
00:10:41,670 --> 00:10:55,260
through there, let's we'll create the elements and using their documents and it saves some time when

118
00:10:55,260 --> 00:11:00,760
you can create functions that are going to run blocks of code that you'd have to do multiple times.

119
00:11:01,470 --> 00:11:07,420
So let's append and one appended to that output object.

120
00:11:07,440 --> 00:11:09,330
So this is going to be an object.

121
00:11:09,990 --> 00:11:19,950
So parents append and then we want to append this newly created element to the parent and then for the

122
00:11:19,950 --> 00:11:20,550
element.

123
00:11:24,080 --> 00:11:26,990
And let's do the inner turmoil of the elements.

124
00:11:28,110 --> 00:11:33,180
And that can just be held within the contents variable, so let's see what that looks like.

125
00:11:33,210 --> 00:11:38,190
So that gave us a structure that we can output the names to.

126
00:11:39,030 --> 00:11:41,790
Let's add some more elements to the page.

127
00:11:42,540 --> 00:11:46,230
So if we want to include and have the.

128
00:11:49,020 --> 00:11:57,390
Picture, we can add that as well, so let's select the pitcher object and selecting the element maker

129
00:11:58,320 --> 00:12:06,570
and adding in another div and then the contents of the div, so call attempt to attempt one.

130
00:12:08,460 --> 00:12:15,600
And within the contents of this div, we're going to add in an image tag with our source and the source

131
00:12:15,600 --> 00:12:19,830
of the content for the image is going to be coming from the element.

132
00:12:21,780 --> 00:12:23,460
And let's look at the data structure.

133
00:12:23,470 --> 00:12:27,200
So element, picture and thumbnail or large element.

134
00:12:28,350 --> 00:12:32,620
Actually, it's the picture and then large suit that looks like.

135
00:12:34,980 --> 00:12:37,590
So it gave us the option to add the pictures.

136
00:12:40,020 --> 00:12:46,080
And we can also now that we've structured it, it's going to be easier for us to if we want to create

137
00:12:46,080 --> 00:12:56,070
a parent element that's going to contain these, we can use the document creates elements and we can

138
00:12:56,070 --> 00:12:58,190
use the same maker to create the elements.

139
00:12:58,190 --> 00:13:05,490
So if we want to create a parent div, so the parent is going to be the output object and the element

140
00:13:05,490 --> 00:13:11,310
tag is going to be a div that we want to create and we're not going to have any contents in it.

141
00:13:11,670 --> 00:13:21,260
And if we want we can then instead of output will append it to div and then for the div itself using

142
00:13:21,930 --> 00:13:22,950
class list.

143
00:13:27,990 --> 00:13:38,070
And so let's also return the element so that gives us an option to use the d'Hiv and add a class of

144
00:13:38,070 --> 00:13:38,960
box to it.

145
00:13:39,690 --> 00:13:44,130
So let's check our HTML and do an inspect on it.

146
00:13:45,030 --> 00:13:51,230
So we've got the parents that are box, they've got the title there and then the images within it.

147
00:13:51,600 --> 00:13:54,110
So let's add some styling to that.

148
00:13:54,480 --> 00:14:03,570
So selecting the box, adding in some padding and let's do a display in line.

149
00:14:07,400 --> 00:14:11,750
In line block and set up with two, it's a default with two it.

150
00:14:14,640 --> 00:14:20,160
Now, set this looks like so that allows us to have a little bit more styling on the elements.

151
00:14:20,560 --> 00:14:24,060
Also, let's apply the box sizing to all of them.

152
00:14:25,260 --> 00:14:31,580
And what the box size thing will do is if you use border box that allows you to remove out any extra.

153
00:14:31,680 --> 00:14:38,190
So a width of twenty five percent will be 25 percent of the available width.

154
00:14:38,400 --> 00:14:49,320
And that will also include the 10 packs of padding and then also within the box for images width of

155
00:14:49,350 --> 00:14:50,300
one hundred percent.

156
00:14:51,630 --> 00:14:55,590
So that will spread the available width of the image all the way across.

157
00:14:57,300 --> 00:15:02,880
Let's also do a text, a line and will center align the contents.

158
00:15:06,240 --> 00:15:13,560
Of the fight, let's do an update on the fight sighs And of course, you can style this however you

159
00:15:13,560 --> 00:15:14,930
feel necessary.

160
00:15:17,710 --> 00:15:19,570
I got to add in some Google fonts.

161
00:15:22,760 --> 00:15:28,880
So just select a Google fight to apply a little bit more styling class to it and actually are going

162
00:15:28,880 --> 00:15:30,050
to select the regular one.

163
00:15:32,730 --> 00:15:38,040
And my preferred is to use import, you can also use the link, so whatever your preferences, because

164
00:15:38,040 --> 00:15:41,400
most of the time I am doing this within stylesheet file.

165
00:15:41,970 --> 00:15:46,050
So that way I just import it and I don't have to worry about linking to it.

166
00:15:46,060 --> 00:15:51,450
So on the page, but because I am doing it on the page, I could just as easily just link to it on the

167
00:15:51,450 --> 00:15:55,430
page and within the body object.

168
00:15:56,460 --> 00:15:58,260
We're going to apply the font family.

169
00:15:58,620 --> 00:16:02,300
So that just is going to get applied across the board on the page.

170
00:16:03,150 --> 00:16:12,060
So we've got the font and also lets out a little bit more styling to the devs that are immediately underneath

171
00:16:12,060 --> 00:16:12,240
it.

172
00:16:14,780 --> 00:16:16,100
So doing a border.

173
00:16:18,740 --> 00:16:25,040
And just do a slight border around it and then also maybe a little bit of padding within those as well.

174
00:16:28,120 --> 00:16:32,440
So that just adds that type of effect to the content.

175
00:16:33,040 --> 00:16:42,040
Let's also put some more content on the page so we've got the names and let's see what other information

176
00:16:42,430 --> 00:16:43,720
we might want to pull out there.

177
00:16:44,170 --> 00:16:47,380
We can also add in the email address as well, if you want.

178
00:16:51,790 --> 00:17:01,060
So let's do a line break here and select the email so that one is right on the root of the element so

179
00:17:01,060 --> 00:17:04,680
you can select the email address like this and run through it.

180
00:17:05,680 --> 00:17:07,270
And that's a little bit long.

181
00:17:07,490 --> 00:17:10,990
So let's resize and.

182
00:17:14,630 --> 00:17:16,910
Overflow will do an overflow hidden.

183
00:17:20,450 --> 00:17:25,980
So that way we're not and that will allow us to resize and if right to make it responsive.

184
00:17:26,000 --> 00:17:29,680
Of course, we could add in the media queries to resize the content.

185
00:17:30,190 --> 00:17:33,100
And it looks like this fight is throwing an error.

186
00:17:33,350 --> 00:17:36,490
So I'm going to just update and change it to a different font style.

187
00:17:37,040 --> 00:17:43,310
So select a different flight style and I'll make us bigger so we can do the selection of that font style

188
00:17:43,550 --> 00:17:47,290
and I'll remove out the other ones that were causing the issue.

189
00:17:47,750 --> 00:17:50,780
And let's do an import on this flight style.

190
00:17:53,210 --> 00:18:02,300
So updating our source for the import for the fight stuff and then let's also update the body, fight

191
00:18:02,300 --> 00:18:08,650
family and go back to the application and see how that works.

192
00:18:09,800 --> 00:18:14,480
And we also probably want to make the font size smaller because most of the time we're working on a

193
00:18:14,480 --> 00:18:17,450
smaller screen and then you can adjust the size needed.

194
00:18:17,990 --> 00:18:24,230
So on the smaller screen that I've got the content showing up and it looks like the overflow should

195
00:18:24,230 --> 00:18:31,340
be on the device inside immediately with inside the box so that we don't have the emails that are hanging

196
00:18:31,340 --> 00:18:33,020
over the access.

197
00:18:33,470 --> 00:18:41,120
Also, let's take a look at what other values we can get from the the object and see what else we might

198
00:18:41,120 --> 00:18:43,100
want to update and add to the page.

199
00:18:47,480 --> 00:18:53,570
So then each one of these objects, we've got a date of birth as well, so let's add that date of birth.

200
00:18:53,580 --> 00:18:54,970
So we've got an age and a date.

201
00:18:55,820 --> 00:19:03,230
So going to get into the JavaScript, we just do a line, break their date of birth and then add that

202
00:19:03,230 --> 00:19:04,540
object details.

203
00:19:05,810 --> 00:19:11,180
So that's within their element objects and within a property name to date of birth.

204
00:19:11,540 --> 00:19:13,520
And then we've got the age.

205
00:19:17,350 --> 00:19:19,180
So how about we just do an age here?

206
00:19:21,680 --> 00:19:28,670
And then try it again, make sure that you're outputting so it looks like that left out the dollar sign

207
00:19:28,670 --> 00:19:28,880
there.

208
00:19:29,450 --> 00:19:30,340
Try that one more time.

209
00:19:31,250 --> 00:19:32,630
So we've got the age.

210
00:19:35,180 --> 00:19:41,120
And you can tell that this is just sample data, so it doesn't necessarily reflect the contents of the

211
00:19:41,120 --> 00:19:41,440
user.

212
00:19:42,500 --> 00:19:47,450
And let's do one more where we're at in the location as another object.

213
00:19:49,910 --> 00:19:56,030
So we can add that in maybe under the pitcher and now that we've got the element maker, it's going

214
00:19:56,030 --> 00:19:59,530
to make it really easy to add additional objects onto the page.

215
00:20:00,290 --> 00:20:07,880
So if you want to get the location, it's within the element location and you can also shorten it.

216
00:20:08,060 --> 00:20:14,790
So to make it more readable, if you want, you can get the location objects.

217
00:20:14,790 --> 00:20:22,230
So element location and that will shorten the path to that object property.

218
00:20:22,580 --> 00:20:30,500
So this way I can do a location and select the city and we'll just try that first and just make sure

219
00:20:30,500 --> 00:20:31,100
it's working.

220
00:20:31,310 --> 00:20:38,810
So there's the city and then whatever else we want for location, we can get the country.

221
00:20:40,010 --> 00:20:44,840
So the location and we're just moved where we've got the root of the object content.

222
00:20:48,650 --> 00:20:51,200
And also, let's include the state as well.

223
00:20:55,390 --> 00:21:01,810
And then whatever else you want to include, that's all possible within the API, so that constructs

224
00:21:02,020 --> 00:21:06,160
these elements, provides information about where they're located.

225
00:21:06,770 --> 00:21:12,430
Now, let's do one more thing before we conclude and let's make this element clickable.

226
00:21:14,850 --> 00:21:21,090
So Divx odd event listener and whatever, we click on the elements.

227
00:21:25,270 --> 00:21:26,890
So whenever we click on it.

228
00:21:33,320 --> 00:21:40,670
Well, add in the option that we can update the details at the top of the page, so select where we've

229
00:21:40,670 --> 00:21:41,660
got the H1.

230
00:21:44,150 --> 00:21:45,530
And take the H1.

231
00:21:48,520 --> 00:21:49,990
And let's set the inner.

232
00:21:52,220 --> 00:21:54,830
And actually just set this up as the tax content.

233
00:21:56,930 --> 00:21:59,510
And we can still get the tax content.

234
00:22:04,230 --> 00:22:12,810
Using the temp object so you can do these different types of interactions and actually this should be

235
00:22:12,810 --> 00:22:16,620
in our e-mail because we are passing an HTML their.

236
00:22:19,210 --> 00:22:27,100
So now whenever we click these, we're updating the information here at the top for the user, in addition

237
00:22:27,520 --> 00:22:29,830
for the box Hova.

238
00:22:31,340 --> 00:22:37,940
Let's update the cursor to pointer, so whenever we go on top of them, it's got the pointer.

239
00:22:37,940 --> 00:22:43,790
So it's indicating that it can be clicked and we might also want to just have everything up at the top

240
00:22:43,790 --> 00:22:44,160
as well.

241
00:22:45,170 --> 00:22:51,070
So now that we've got it within these objects, it's going to be really easy just to add the content

242
00:22:51,070 --> 00:22:56,770
in and just save that and just try to make sure it's working.

243
00:23:03,840 --> 00:23:05,520
And let's wrap this.

244
00:23:08,070 --> 00:23:12,840
With a div so open and close ative, and we'll wrap Temperton the.

245
00:23:18,240 --> 00:23:25,440
So that gives us a quick way to access and see the different users that we've generated and we can select

246
00:23:25,440 --> 00:23:31,950
how many we want to generate, and then this will once again update the content.

247
00:23:32,310 --> 00:23:34,830
We'll also move the content to the top.

248
00:23:34,830 --> 00:23:43,200
So using the window and scroll to method in JavaScript, and this requires an object parameter.

249
00:23:43,470 --> 00:23:50,150
And within the object we can specify where we want to scroll to see if we want to go right to the top.

250
00:23:50,520 --> 00:23:56,540
We can scroll it right to the top just by specifying the scroll location, scroll bar location to zero.

251
00:23:56,970 --> 00:24:00,240
So let's try it and move down so that moves it up.

252
00:24:00,480 --> 00:24:02,840
And this is good if you've got a lot of results.

253
00:24:02,880 --> 00:24:07,980
So if you've gone down all the way to the bottom, you want to be able to see that you've made that

254
00:24:07,980 --> 00:24:08,580
selection.

255
00:24:08,580 --> 00:24:13,350
You've brought that particular one up right to the top.

256
00:24:19,420 --> 00:24:24,340
So there's a number of options here and there's quite a bit of data that's within this API, so you

257
00:24:24,340 --> 00:24:27,220
can create your own version of this application.

258
00:24:34,360 --> 00:24:37,240
And I'm also going to do a quick update to the one.

259
00:24:41,880 --> 00:24:46,050
So we'll take each one style.

260
00:24:48,120 --> 00:24:49,350
And sat with.

261
00:24:59,230 --> 00:25:03,490
And so at the margin to auto and you could do this with with styling as well.

262
00:25:08,230 --> 00:25:11,140
Text aligned and or central line the text.

263
00:25:14,840 --> 00:25:18,100
So that will just align the content near the top there.

264
00:25:22,380 --> 00:25:23,070
And then.

265
00:25:33,170 --> 00:25:34,970
Also, let's add in a border.

266
00:25:40,330 --> 00:25:46,870
And test out the application just to make sure it's working, so you do occasionally run into these

267
00:25:46,870 --> 00:25:48,850
course errors and cause issues.

268
00:25:49,270 --> 00:25:54,790
And this is just something that I wanted to note, that if you do come across cause errors and this

269
00:25:54,790 --> 00:26:01,840
API for the most part will work and it does throw these course errors occasionally when we're trying

270
00:26:01,840 --> 00:26:08,080
to make too many requests from the local so that can happen or for making too many local requests.

271
00:26:08,710 --> 00:26:14,220
We see that the cause error, the course issue now, there is a way to go around the course.

272
00:26:14,470 --> 00:26:19,870
And so to avoid that, it's making the request locally you can use.

273
00:26:22,160 --> 00:26:29,990
Cource anywhere, and this is an API that enables cross swords and requests to anywhere, and there's

274
00:26:29,990 --> 00:26:38,420
more information about it, but essentially what you do is you apply the Eurail course anywhere just

275
00:26:38,420 --> 00:26:44,990
before you make the Web, you R-AL request so you could do it like this.

276
00:26:45,370 --> 00:26:47,870
It looks like we're coming across another issue.

277
00:26:48,020 --> 00:26:54,680
And this is because when we're using Kurs anywhere, so it's updating where the request is being made

278
00:26:54,680 --> 00:26:55,010
from.

279
00:26:55,550 --> 00:27:01,070
So this is good if you're connecting locally to a Web API that needs to have a website.

280
00:27:01,190 --> 00:27:06,740
But in this case, what's happened here is that we're getting too many requests from this base.

281
00:27:06,740 --> 00:27:07,370
You URL.

282
00:27:07,610 --> 00:27:11,660
So it's updating the server as it's coming from the CRS anywhere.

283
00:27:11,900 --> 00:27:17,180
So there's probably other people that have been using the CRS anywhere to connect to the random user

284
00:27:17,180 --> 00:27:20,200
EMY, and that's why it's denying the requests.

285
00:27:20,420 --> 00:27:26,360
So there is some throttling on there that it does prevent making too many requests and we have been

286
00:27:26,360 --> 00:27:28,160
making a lot of requests with local.

287
00:27:28,400 --> 00:27:35,240
So that's likely why we're throwing the errors when we're making the requests and you'll find that they

288
00:27:35,240 --> 00:27:35,990
will go away.

289
00:27:36,710 --> 00:27:39,200
Any type of queries there or cause issue.

290
00:27:39,650 --> 00:27:47,300
This is related to the server and you can find out more about how well CRS anywhere works where you

291
00:27:47,300 --> 00:27:49,130
can redirect automatically.

292
00:27:49,640 --> 00:27:57,980
So it's good for debugging and it redirects the results in addition to the course redirect header where

293
00:27:57,980 --> 00:28:04,070
it starts at one and we're headers are not accessible by typical HTTP request API.

294
00:28:05,730 --> 00:28:12,150
And there's more information and more documentation available on these sites, the challenges and the

295
00:28:12,150 --> 00:28:18,780
tasks for this lesson are to connect to the random user API, look through the JSON object, return

296
00:28:18,780 --> 00:28:23,970
back the data, and then go through the data and output it on your page and also build an interactive

297
00:28:23,970 --> 00:28:30,960
web application that allows the user to interact with the data and make use of it and interact with

298
00:28:30,960 --> 00:28:39,120
the page content as well and really get its opportunity to familiarize yourself with getting JSON data

299
00:28:39,120 --> 00:28:39,990
from endpoints.