1
00:00:09,160 --> 00:00:16,540
Hey, everyone, let's get started solving the list of exercises, number five, so number one, populate

2
00:00:16,540 --> 00:00:22,990
the below select box with the list of countries of the world, the tasks should be divided into two

3
00:00:22,990 --> 00:00:23,530
parts.

4
00:00:23,920 --> 00:00:31,600
So let's start with the first part, which is actually getting the list of countries from this API.

5
00:00:31,870 --> 00:00:35,880
So let's copy this euro and let's see what this is about.

6
00:00:36,520 --> 00:00:39,130
Let's try to do this HTP request.

7
00:00:39,320 --> 00:00:46,360
As you can see, this is the response we are getting, which is adjacent with all the countries in the

8
00:00:46,360 --> 00:00:46,840
world.

9
00:00:47,110 --> 00:00:50,020
That seems a bit crazy because we have a lot of data here.

10
00:00:50,350 --> 00:00:55,870
But when we transform this into an object, we'll be able to see this better.

11
00:00:56,410 --> 00:00:59,800
So let's do the first part of this exercise.

12
00:00:59,810 --> 00:01:01,450
Let's go to Visual Studio Code.

13
00:01:01,630 --> 00:01:03,250
So let's create a function.

14
00:01:04,540 --> 00:01:05,890
We can call it get.

15
00:01:07,920 --> 00:01:08,670
Country's.

16
00:01:14,630 --> 00:01:16,820
So I'm going to leave the URL here.

17
00:01:18,040 --> 00:01:21,800
And let's go back to our written material.

18
00:01:22,240 --> 00:01:25,390
Let's go back to the Ajax's with Jay Quarrie.

19
00:01:25,390 --> 00:01:33,460
Listen, we're going to need this, so I'm going to copy all this so we can use in the first part of

20
00:01:33,460 --> 00:01:34,510
this exercise.

21
00:01:34,840 --> 00:01:35,680
So here it is.

22
00:01:35,920 --> 00:01:38,230
I just need to change the address.

23
00:01:42,570 --> 00:01:46,080
So here's the address we're going to use get.

24
00:01:46,500 --> 00:01:51,210
We need the data in, Jason, let's send the data to the council so we can see it.

25
00:01:51,480 --> 00:01:54,330
So the first part is pretty much this.

26
00:01:55,270 --> 00:02:02,100
So to see if this is working, let's just execute this function and if everything goes right.

27
00:02:03,600 --> 00:02:10,050
We should be able to see the list of countries in the council already as an object because we are using

28
00:02:10,050 --> 00:02:10,860
the data type.

29
00:02:10,860 --> 00:02:11,670
Jason, here.

30
00:02:12,600 --> 00:02:13,650
Let me save this.

31
00:02:15,700 --> 00:02:21,940
Now, let's go back to the right e-mail file for the exercise, let's refresh the page.

32
00:02:22,120 --> 00:02:28,840
Let me open the inspector and now if we go to the council, we should be able to see the list of countries.

33
00:02:29,200 --> 00:02:32,980
This is divided like this just because it's a big number of countries.

34
00:02:33,370 --> 00:02:36,450
So it's dividing into every hundred countries.

35
00:02:36,640 --> 00:02:44,760
If we open this, every element of this array is going to be a country with many, many properties.

36
00:02:44,980 --> 00:02:49,870
So we have currency area, capital flag.

37
00:02:50,290 --> 00:02:57,160
If you go to this image file, you see that this is actually the image for the country's flag, which

38
00:02:57,160 --> 00:02:58,690
is really, really cool.

39
00:02:59,140 --> 00:03:02,650
You could use this in the front end of your website.

40
00:03:02,980 --> 00:03:06,310
But what we are going to need here is just the list of countries.

41
00:03:06,320 --> 00:03:14,110
So we only need the name of the country and maybe some kind of ID so we can identify them so we can

42
00:03:14,110 --> 00:03:17,840
put it inside the value of each of the options.

43
00:03:18,130 --> 00:03:22,000
So if we go up here, we can see that we have this alpha code.

44
00:03:22,000 --> 00:03:25,870
I think this should be unique for each of the countries.

45
00:03:26,170 --> 00:03:30,010
So maybe we can use this Alpha three code.

46
00:03:31,180 --> 00:03:33,640
To put it in the value attribute.

47
00:03:35,000 --> 00:03:35,980
But this is cool.

48
00:03:37,490 --> 00:03:42,360
We can see that the first part of this exercise is already working.

49
00:03:42,620 --> 00:03:44,810
So now let's start the second part.

50
00:03:45,020 --> 00:03:52,620
So let's go back to Visual Studio now, instead of sending all this data to the console.

51
00:03:52,820 --> 00:03:54,920
We need to call a function.

52
00:03:56,390 --> 00:03:58,280
So let's call it like.

53
00:03:59,650 --> 00:04:00,640
Populate.

54
00:04:03,300 --> 00:04:04,090
Countries.

55
00:04:04,290 --> 00:04:09,200
So one thing is getting the countries which we are already doing.

56
00:04:09,270 --> 00:04:15,810
And another thing is populating the select box with the countries, that's the second part of the exercise.

57
00:04:16,170 --> 00:04:19,190
So I'm just calling this function that doesn't exist yet.

58
00:04:19,770 --> 00:04:22,920
And now let's create it down here.

59
00:04:30,510 --> 00:04:37,560
So when you function instead of data, let's use countries as the argument of this function.

60
00:04:41,060 --> 00:04:46,620
And now for each of these countries, we just need to create an option for them.

61
00:04:49,060 --> 00:04:51,670
So here we can start a for loop.

62
00:05:06,280 --> 00:05:14,050
So we're going to start a new variable called a the loop is going to be executed until this variable

63
00:05:14,050 --> 00:05:16,450
is less than countries that length.

64
00:05:16,630 --> 00:05:21,370
And at each iteration, we're going to add one to this variable.

65
00:05:21,380 --> 00:05:22,930
We're going to incremented.

66
00:05:23,560 --> 00:05:26,230
So this is the basic structure of a loop.

67
00:05:27,590 --> 00:05:34,130
And now, before we go ahead, just to see if this is working, let's send it to the console again.

68
00:05:34,340 --> 00:05:37,700
But this time, let's try to do something different.

69
00:05:37,980 --> 00:05:40,190
So let's try to send countries.

70
00:05:42,740 --> 00:05:51,050
Then with the index and let's try to send the name property that we know that each country has, let's

71
00:05:51,050 --> 00:05:52,310
see if this is working.

72
00:05:53,320 --> 00:05:59,440
If it is, we're just going to see a list of country names in the council, this is important because

73
00:05:59,440 --> 00:06:06,510
if something is not working, we are going to see this at an early stage and we can adjust.

74
00:06:07,120 --> 00:06:08,290
So saving this.

75
00:06:09,770 --> 00:06:17,990
Going back here, I'm going to refresh the page, and now we are just seeing a list of countries, which

76
00:06:17,990 --> 00:06:18,540
is good.

77
00:06:18,820 --> 00:06:25,210
Now, what we need to do is just populating the select box pretty good.

78
00:06:25,620 --> 00:06:32,480
Let's see if this element so we have a select box with an idea of countries.

79
00:06:33,080 --> 00:06:34,400
Let's just copy this.

80
00:06:37,490 --> 00:06:45,830
So now for each of the countries, let's create a variable called country, maybe country option.

81
00:06:48,260 --> 00:06:50,270
Then we are just going to do.

82
00:06:51,430 --> 00:06:57,970
The basic option structure, which is the option, then we can close it.

83
00:07:00,320 --> 00:07:07,670
And here we need a value property, this is going to be important in the next part, actually, as we

84
00:07:07,670 --> 00:07:09,590
are using double quotation marks.

85
00:07:09,850 --> 00:07:15,110
We're going to have to use single quotation marks inside here to avoid problems.

86
00:07:16,320 --> 00:07:23,310
So now it's better, and here we are going to add the name of the country, so here, let me close the

87
00:07:23,320 --> 00:07:29,760
string, let me open it again, and now let's use the plus sign to do some concatenation.

88
00:07:30,150 --> 00:07:34,650
And we are just going to use the country name here.

89
00:07:36,450 --> 00:07:43,230
And here inside the value, so let's do the same thing, closing it, opening it again, using the plus

90
00:07:43,230 --> 00:07:45,690
sign to concatenate something in the middle.

91
00:07:46,990 --> 00:07:48,310
So.

92
00:07:49,680 --> 00:07:52,410
Then instead of the name.

93
00:07:53,780 --> 00:08:00,680
I'm just going to comment this and actually do the console that logged just for the country's just so

94
00:08:00,680 --> 00:08:04,190
I can see everything again and see the name of the property that we need.

95
00:08:06,280 --> 00:08:12,280
So now let me save this real quick, refreshing the page, let's go to the console.

96
00:08:12,280 --> 00:08:13,060
Here it is.

97
00:08:15,070 --> 00:08:16,960
It's actually inside a loop.

98
00:08:17,920 --> 00:08:22,540
That's OK, so we can check each of the countries.

99
00:08:24,800 --> 00:08:28,220
So the name of it is Alpha three code.

100
00:08:30,420 --> 00:08:31,170
Political.

101
00:08:37,200 --> 00:08:45,540
So right here, we are just going to add the Alpha three code as the value for each of the options and

102
00:08:45,540 --> 00:08:51,500
then the name of the country, which is what is going to be visible in the front end.

103
00:08:51,900 --> 00:08:54,020
So we don't need this console anymore.

104
00:08:54,960 --> 00:08:56,370
And after doing this.

105
00:08:57,790 --> 00:09:07,000
We just need to get this country's element and just adding this age html inside, so for this, we don't

106
00:09:07,000 --> 00:09:10,090
need Jake where we can just use plain JavaScript.

107
00:09:10,540 --> 00:09:13,720
So document not yet.

108
00:09:14,050 --> 00:09:15,310
Element by ID.

109
00:09:17,880 --> 00:09:26,400
So the ID is countries, then let's call the inner e-mailed property, it's going to be then we can

110
00:09:26,400 --> 00:09:30,130
use an incremental operator, so plus equal.

111
00:09:30,720 --> 00:09:37,260
So it's going to be the content it already has, because if we go back there, we can see that this

112
00:09:37,260 --> 00:09:42,060
element already has an option element inside.

113
00:09:42,070 --> 00:09:49,670
We don't want to erase it so we can just go adding at each iteration of the loop.

114
00:09:50,520 --> 00:09:52,440
So then we are just going to add.

115
00:09:53,510 --> 00:09:57,890
Another option, which is this one that we already built up here.

116
00:10:00,150 --> 00:10:06,540
And this should be all we need to do for the second part of this exercise.

117
00:10:06,550 --> 00:10:07,620
So let's save this.

118
00:10:08,520 --> 00:10:09,960
Let's refresh the page.

119
00:10:12,830 --> 00:10:20,150
We don't see any errors in the console if we open this now, we can see a complete list of countries,

120
00:10:20,360 --> 00:10:24,920
which is really cool if we inspect this element.

121
00:10:25,170 --> 00:10:26,840
So let's see one of the options.

122
00:10:27,170 --> 00:10:35,930
So as you can see in the value property or the value attribute we have that the latter code for each

123
00:10:35,930 --> 00:10:41,540
of the countries, which is going to be important for the next thing we need to do here about the local

124
00:10:41,540 --> 00:10:49,670
storage and inside the option, we have the name of the country, which is exactly what we need.

125
00:10:49,890 --> 00:10:53,450
Now, the last part of the exercise should be pretty simple.

126
00:10:53,460 --> 00:11:00,800
So when a country is selected, use local storage to make it selected the next time the page is loaded.

127
00:11:00,960 --> 00:11:05,990
So we just need to create a change event for this select box.

128
00:11:06,440 --> 00:11:12,510
Before we do this, let's remember how we create things inside the local storage.

129
00:11:12,530 --> 00:11:16,160
So let's go through this lesson and here it is.

130
00:11:16,190 --> 00:11:18,700
We just need to set a new item.

131
00:11:19,010 --> 00:11:20,450
So let's just copy this.

132
00:11:20,630 --> 00:11:23,450
Let me go back to the exercise.

133
00:11:27,430 --> 00:11:31,060
So then we can just use Jay Quarrie now.

134
00:11:34,470 --> 00:11:37,320
So we have this country's aliment.

135
00:11:38,900 --> 00:11:47,180
Which is a select box, and we can use a change event with Jay Querrey, let's remember that inside

136
00:11:47,180 --> 00:11:49,490
here we need to pass a function.

137
00:11:51,250 --> 00:11:54,250
That's going to be executed when this is changed.

138
00:11:54,280 --> 00:11:59,680
Actually, I misspelled it, so change I it's correct.

139
00:12:02,150 --> 00:12:08,120
I'm just going to add a comment here for what we need to do with the local storage, but before we go

140
00:12:08,120 --> 00:12:16,310
ahead again, let me do a console that log just to make sure that we are detecting a change inside that

141
00:12:16,310 --> 00:12:16,800
element.

142
00:12:17,390 --> 00:12:22,370
So let me write CELAC black box has changed.

143
00:12:24,740 --> 00:12:25,910
Let me save this.

144
00:12:28,810 --> 00:12:30,490
So refreshing the page.

145
00:12:31,510 --> 00:12:34,240
We see nothing here if I change this.

146
00:12:35,290 --> 00:12:40,840
We can see that the event is being detected, I'm going to try to change it again, so here it is,

147
00:12:41,140 --> 00:12:44,020
pretty cool so we can continue.

148
00:12:44,470 --> 00:12:44,920
All right.

149
00:12:44,920 --> 00:12:54,700
So when the change is detected, we just need to create a new item so we can amend the window object.

150
00:12:54,790 --> 00:12:55,650
This is fine.

151
00:12:56,020 --> 00:13:04,930
So just local storage, not set item, let's name it as selected country.

152
00:13:06,160 --> 00:13:13,360
And since we use that code for the values of each of the options, we can just try to send.

153
00:13:15,010 --> 00:13:17,230
This black box that VAO.

154
00:13:18,380 --> 00:13:21,080
Let's see what we have if we do this.

155
00:13:23,730 --> 00:13:25,410
So refreshing the page.

156
00:13:25,620 --> 00:13:32,070
Now let's go to the application tab here we are inside the local storage.

157
00:13:32,490 --> 00:13:41,620
So if we choose a country, it's creating an item with that code, which is exactly what we need.

158
00:13:41,640 --> 00:13:42,780
So let's make a test.

159
00:13:42,780 --> 00:13:45,590
Let's select another one to see if this is replaced.

160
00:13:46,200 --> 00:13:49,320
Now, we can see that this is being replaced, which is good.

161
00:13:50,520 --> 00:13:57,570
So if we already have that item, instead of seeing an error, it actually just replaces the values,

162
00:13:57,780 --> 00:14:00,000
which is what we need, a tri Brazil.

163
00:14:00,780 --> 00:14:02,330
So here's the code for Brazil.

164
00:14:02,940 --> 00:14:03,690
Pretty cool.

165
00:14:04,900 --> 00:14:11,940
Now, going back to the code now, the only thing we need to do is inside is get countries function.

166
00:14:11,950 --> 00:14:20,680
It is important to do it inside here because if we do it outside, maybe when we try to run this code

167
00:14:20,680 --> 00:14:24,090
to select the country, we don't have the country yet.

168
00:14:24,400 --> 00:14:27,780
So it is important to do this inside this call back.

169
00:14:28,060 --> 00:14:34,060
So here we can make sure that we already have the countries and now we can test.

170
00:14:35,420 --> 00:14:40,820
If there is an item inside a local storage, so if we have something here, so.

171
00:14:46,470 --> 00:14:48,420
Local storage that.

172
00:14:51,260 --> 00:14:52,520
Selected country.

173
00:14:56,380 --> 00:15:00,130
So this should be pretty simple, we can just copy this.

174
00:15:02,990 --> 00:15:10,430
And we know that with Jay Quarrie, if we pass a value inside here instead of getting the value, it's

175
00:15:10,430 --> 00:15:12,240
actually going to select it.

176
00:15:12,680 --> 00:15:21,140
So if there's something inside a local storage, we can just set the value of this CELAC box to whatever

177
00:15:21,140 --> 00:15:23,390
we have in local storage.

178
00:15:23,900 --> 00:15:25,190
So let's save this.

179
00:15:28,020 --> 00:15:33,370
Let me just erase this so we can test this properly, so I'm just going to refresh the page.

180
00:15:33,600 --> 00:15:35,240
We got nothing we see.

181
00:15:35,250 --> 00:15:37,350
Select your country now.

182
00:15:37,350 --> 00:15:38,640
I'm going to select.

183
00:15:41,250 --> 00:15:47,010
Bolivia, now we can see the cold here and when we refresh the page.

184
00:15:48,170 --> 00:15:50,690
We can see that Bolivia started.

185
00:15:51,970 --> 00:15:54,880
Preselected, which is exactly what we.

186
00:15:55,850 --> 00:15:56,790
Wanted to happen.

187
00:15:56,810 --> 00:16:02,990
Let me try another country now, let's try France now we can see that the code changed here.

188
00:16:03,230 --> 00:16:08,660
And when we refresh the page now France is being preselected.

189
00:16:09,290 --> 00:16:11,840
So exercise no one is finished.

190
00:16:12,200 --> 00:16:15,470
In the next video, we're going to start solving number two.

191
00:16:15,590 --> 00:16:16,340
I'll see you then.