1
00:00:09,200 --> 00:00:16,220
Hey there, in the previous video, we made a call to this holiday API to get all the holidays for the

2
00:00:16,220 --> 00:00:22,580
previous year for a given country, and now we just need to integrate with this black box, because

3
00:00:22,580 --> 00:00:28,940
every time we select a different country here, we need to update the list of holidays.

4
00:00:29,240 --> 00:00:37,250
So the first thing I'm going to do is just copying this age html to up here so we can show right after

5
00:00:37,250 --> 00:00:37,880
the list.

6
00:00:38,300 --> 00:00:43,610
So you can go to Visual Studio Code, just go to the HTML file.

7
00:00:43,760 --> 00:00:48,480
As you can see, here's the structure that I'm suggesting you to use.

8
00:00:48,860 --> 00:00:50,220
You can just go up here.

9
00:00:50,750 --> 00:00:53,150
So right after the select box.

10
00:00:56,650 --> 00:00:59,020
We can place our e-mail.

11
00:00:59,080 --> 00:01:01,180
I'm just going to break two lines here.

12
00:01:02,120 --> 00:01:04,690
And let's go back there and see how it looks.

13
00:01:05,820 --> 00:01:13,290
All right, so now we have the country here and the list of holidays, of course, we just need to erase

14
00:01:13,290 --> 00:01:13,920
all the data.

15
00:01:13,920 --> 00:01:16,600
So I'm not going to leave any list item here.

16
00:01:17,340 --> 00:01:19,800
I'm also going to erase the current here.

17
00:01:22,600 --> 00:01:28,510
And the country actually is not current here, its previous year, if you want to change this, you

18
00:01:28,510 --> 00:01:29,140
can do it.

19
00:01:29,650 --> 00:01:30,730
So previous year.

20
00:01:33,550 --> 00:01:39,710
So going back to the page, refreshing it now we just have the structure here.

21
00:01:39,970 --> 00:01:46,020
So any time there's a change here, we are going to call our function.

22
00:01:46,450 --> 00:01:51,570
So the name of the function, I'm going to erase this because I'm not going to call it here anymore.

23
00:01:51,880 --> 00:01:57,970
But now we know that we have a function called Get Holliday's, which is right here.

24
00:02:00,950 --> 00:02:09,690
So there are two times where we are going to use this, so the first is every time there's a change.

25
00:02:10,160 --> 00:02:15,760
So if we go down here, we have populate and we have this change.

26
00:02:16,040 --> 00:02:26,050
So every time there's a change, we need to call this function and pass the value, which is that code.

27
00:02:26,450 --> 00:02:33,790
So we are going to pass the value to this function and this is going to bring all the public holidays.

28
00:02:33,800 --> 00:02:40,130
Of course, we still need to adjust this function because we don't want to send the values to the console,

29
00:02:40,370 --> 00:02:43,090
but we want to populate that list.

30
00:02:43,370 --> 00:02:46,430
So here's one place where we need to use this.

31
00:02:48,470 --> 00:02:53,030
And the other place, it's here, so when we have it in local storage.

32
00:02:54,410 --> 00:03:02,330
We are going to select that country and we are also going to get the holidays, so then we will have

33
00:03:02,330 --> 00:03:10,450
that code in the local storage and we are going to use that code to get the holidays.

34
00:03:10,730 --> 00:03:12,870
So let's see if this is working now.

35
00:03:13,130 --> 00:03:21,010
So going back to the page, one thing I'm going to do first is just cleaning the local storage.

36
00:03:21,020 --> 00:03:24,450
So let's go to application, local storage.

37
00:03:24,470 --> 00:03:25,970
I'm just going to clean this.

38
00:03:27,470 --> 00:03:34,530
All right, let's go back to the console, so refreshing the page, I have nothing here yet.

39
00:03:34,730 --> 00:03:39,350
Now I'm going to select a country, so let's try.

40
00:03:45,320 --> 00:03:45,950
Brazil.

41
00:03:47,930 --> 00:03:54,740
And now we just chose Brazil, and as you can see, we have the list of public holidays in Brazil.

42
00:03:56,350 --> 00:04:00,160
Let's try again, let's try a different country, say, Austria.

43
00:04:02,440 --> 00:04:05,580
And now we have the list of holidays for Austria.

44
00:04:05,740 --> 00:04:10,900
OK, so now we can go ahead and just populate the list.

45
00:04:12,480 --> 00:04:15,870
So let's go back to our function.

46
00:04:17,960 --> 00:04:25,090
And one thing that we can do here, just go to the e-mail file again so we can get all the IDs.

47
00:04:25,100 --> 00:04:26,990
So I'm just going to copy all this.

48
00:04:27,170 --> 00:04:31,910
Go back here right inside the function we've just created here.

49
00:04:35,870 --> 00:04:38,030
So I'm just going to place it here.

50
00:04:40,350 --> 00:04:47,580
Just to just so I see what are the IDs for the element, so I have one called Selected Country.

51
00:04:47,910 --> 00:04:49,890
I have one called previous year.

52
00:04:55,470 --> 00:04:59,070
And I have one called Holiday List.

53
00:05:00,630 --> 00:05:01,890
That's all we need.

54
00:05:03,070 --> 00:05:10,060
So we can populate the list, so we're going to start doing this as soon as we receive the data.

55
00:05:13,400 --> 00:05:22,280
So if the country exists, I'm assuming that we are going to receive a success response, if not, we

56
00:05:22,280 --> 00:05:29,180
may just receive an error so we can test maybe we can try to choose a country that it's not likely to

57
00:05:29,180 --> 00:05:31,520
exist in the database and test.

58
00:05:31,850 --> 00:05:34,640
What is the response that we are going to receive?

59
00:05:34,790 --> 00:05:38,210
But for now, we can just continue here.

60
00:05:39,690 --> 00:05:46,890
So let's remember that we need data, not holidays, so I'm just going to copy this and I'm going to

61
00:05:46,890 --> 00:05:53,410
create a variable called Holliday's for our array, which is just going to be data that holidays.

62
00:05:53,550 --> 00:06:00,110
And now we can, first of all, populate the selected country that year and the holiday list.

63
00:06:00,360 --> 00:06:06,750
So the holiday list is here the previous year here, but we don't have the name of the country, so

64
00:06:06,750 --> 00:06:10,100
we're going to have to pass the name of the country as well.

65
00:06:11,360 --> 00:06:16,190
So let's create another argument so we can pass the country name, actually.

66
00:06:16,220 --> 00:06:17,920
Let's do this afterwards.

67
00:06:18,260 --> 00:06:21,740
Let's just use the country code for now just to make it simple.

68
00:06:21,980 --> 00:06:27,110
And then in the end, we can make this better and just use the country name.

69
00:06:27,980 --> 00:06:29,970
So let's use the country code for now.

70
00:06:30,260 --> 00:06:37,800
So after we have this success, what we are going to do is just updating the elements.

71
00:06:38,690 --> 00:06:43,440
So first, let's update the selected country.

72
00:06:43,460 --> 00:06:51,800
So that's the idea of the element and the text inside it is just going to be for now.

73
00:06:53,510 --> 00:06:54,500
The country called.

74
00:06:56,390 --> 00:06:59,950
Let's do the same thing for the previous year.

75
00:07:08,330 --> 00:07:09,150
Pretty good.

76
00:07:09,500 --> 00:07:15,070
And before we go ahead, let's just save this and see if this is working.

77
00:07:17,180 --> 00:07:18,650
Refreshing the page.

78
00:07:19,100 --> 00:07:25,130
Now it's Austria, we are populating the year and the country called, let's change it.

79
00:07:27,710 --> 00:07:31,040
Again, it seems to be working, let's try.

80
00:07:32,270 --> 00:07:38,570
Brazil, here's the code for Brazil, the year, so everything seems to be working well, and now what

81
00:07:38,570 --> 00:07:44,240
we have to do is just make a loop to iterate through this list.

82
00:07:44,760 --> 00:07:45,800
So let's do it now.

83
00:07:46,970 --> 00:07:48,530
It's a for loop.

84
00:08:00,440 --> 00:08:06,400
So A has to be less than data or holidays.

85
00:08:08,020 --> 00:08:12,310
Which is already the name of our variable, so holidays that lenth.

86
00:08:14,170 --> 00:08:15,430
A plus plus.

87
00:08:16,780 --> 00:08:25,840
So every time we go inside here, the first thing we need to do is test if the holiday is a public holiday,

88
00:08:26,170 --> 00:08:28,690
because if you look to the exercise.

89
00:08:30,330 --> 00:08:37,770
I'm asking you to list all the public holidays, but not all the holidays that it's that are listed

90
00:08:37,770 --> 00:08:45,690
here are public holidays just to make a test, let's just send it to the council again.

91
00:08:48,240 --> 00:08:51,200
Let's send the holiday so we can check this out.

92
00:08:54,560 --> 00:09:00,980
So here we have the holidays, so if we go inside this New Year's Day, you will see that there is a

93
00:09:01,310 --> 00:09:06,320
public property which is set to true, which means it is a public holiday.

94
00:09:07,100 --> 00:09:08,720
If not so this.

95
00:09:09,740 --> 00:09:13,760
World Wildlife Day public is set to.

96
00:09:14,230 --> 00:09:18,380
So we are only going to list the public holidays.

97
00:09:18,560 --> 00:09:19,760
So going back there.

98
00:09:31,010 --> 00:09:33,470
Then we can do holidays.

99
00:09:36,570 --> 00:09:43,650
With an index of a then we are going to check for the public property.

100
00:09:45,420 --> 00:09:46,740
We don't have to do.

101
00:09:47,790 --> 00:09:55,710
Equals true, we don't have to do this because true value is going to come here directly.

102
00:09:55,740 --> 00:09:56,890
So this is enough.

103
00:09:57,180 --> 00:10:00,830
So if it is a public holiday, then we can do something.

104
00:10:01,380 --> 00:10:04,800
So let's create a variable for the list item.

105
00:10:06,490 --> 00:10:11,470
Which is going to start with an HTML element.

106
00:10:14,010 --> 00:10:17,220
Here, we can just close it down here.

107
00:10:19,490 --> 00:10:22,250
So using the incremental operator.

108
00:10:24,060 --> 00:10:28,410
So plus equal then closing the list item.

109
00:10:30,270 --> 00:10:30,840
And.

110
00:10:31,800 --> 00:10:32,640
In the middle.

111
00:10:34,230 --> 00:10:40,970
Let's see how this has to be just erased everything, but let me hit control Z so I can look at it.

112
00:10:41,370 --> 00:10:47,300
So here we need to include a year a dash and the name of the holiday.

113
00:10:47,640 --> 00:10:48,270
Pretty good.

114
00:10:58,570 --> 00:11:01,450
So right inside here, first we need.

115
00:11:03,170 --> 00:11:03,890
The date.

116
00:11:05,920 --> 00:11:11,470
So there is a property called late, so we can just do.

117
00:11:14,110 --> 00:11:16,420
Holidays with an index of a.

118
00:11:18,410 --> 00:11:28,970
That date then we can concatenate with white space dash white space, and now we can just concatenate

119
00:11:29,120 --> 00:11:32,300
with the name of the holiday, which is just name.

120
00:11:33,490 --> 00:11:36,310
So, again, let's just copy this.

121
00:11:43,150 --> 00:11:49,240
All right, so now this should be OK and let me just copy this.

122
00:11:50,870 --> 00:11:58,490
And before we enter the loop, one important thing is to just erase everything that's inside the list.

123
00:11:58,790 --> 00:12:02,660
So the list has this Idy holiday list.

124
00:12:05,400 --> 00:12:13,950
So let's set the age HTML this time it has to be HTML, because we're going to place HTML inside, so

125
00:12:13,950 --> 00:12:16,260
we're just going to send an empty string.

126
00:12:17,300 --> 00:12:21,620
To our aliment, and now every time we go inside here.

127
00:12:23,720 --> 00:12:28,460
We can just append the list item so we can do.

128
00:12:30,210 --> 00:12:38,130
It like this, so this is the element we're going to use the append method, which is going to keep

129
00:12:38,130 --> 00:12:40,850
adding things to this element.

130
00:12:40,950 --> 00:12:44,430
And in this case, what we want to append is just.

131
00:12:46,490 --> 00:12:55,190
The list item that we just created up here, so let's save this and let's see if this is working now.

132
00:12:56,180 --> 00:12:57,830
So refreshing the page.

133
00:12:59,950 --> 00:13:09,340
I just loaded the page with Brazil preselected, and now I'm seeing the list of public holidays in Brazil,

134
00:13:09,940 --> 00:13:11,560
which is really, really cool.

135
00:13:13,360 --> 00:13:16,770
Now, let's try to change this to see if this is working.

136
00:13:19,610 --> 00:13:22,110
So, yeah, this seems to be working.

137
00:13:22,640 --> 00:13:26,660
Let's see if we can find a country that has no data.

138
00:13:35,620 --> 00:13:37,450
It's a bit hard to find now.

139
00:13:38,950 --> 00:13:47,020
Every country I tried here had data from that API, which is actually good, but one thing we can do

140
00:13:47,020 --> 00:13:53,050
here, if we don't find anything, we can just leave everything blank.

141
00:13:57,450 --> 00:14:02,970
So every time we go inside here, the first thing that we can do is just.

142
00:14:04,870 --> 00:14:06,880
Refreshing those element.

143
00:14:08,860 --> 00:14:10,780
So we can just set.

144
00:14:12,600 --> 00:14:14,790
The HTML for this.

145
00:14:15,820 --> 00:14:23,260
And for the other two elements, for empty strings just like that.

146
00:14:26,470 --> 00:14:33,430
So we're going to do this before trying to the Ajax request now, I can already erase this.

147
00:14:34,830 --> 00:14:37,890
So every time we go inside this function.

148
00:14:38,870 --> 00:14:44,950
We're just going to leave those elements blank, and if there's any error here, it will be OK.

149
00:14:44,960 --> 00:14:48,160
We're just not going to list the holidays.

150
00:14:51,170 --> 00:14:54,250
So let's save this just to see if this is still working.

151
00:14:55,350 --> 00:15:01,620
So now we can see it blank and then when we have the response, then this is populated.

152
00:15:01,980 --> 00:15:06,840
Let's try Greece blank and then we see the information, which is much better now.

153
00:15:08,420 --> 00:15:14,570
So now just the last thing that we need to do here, we need to erase the console that log, and we

154
00:15:14,570 --> 00:15:21,590
also need to send the actual country name here instead of the country code should be pretty easy to

155
00:15:21,590 --> 00:15:21,920
do.

156
00:15:22,310 --> 00:15:24,410
So let's go back to Visual Studio Code.

157
00:15:24,650 --> 00:15:28,730
So first, let's just erase this console, that log.

158
00:15:30,550 --> 00:15:37,960
And now right here, when we call that function, so here it is, get holidays we need to send.

159
00:15:42,780 --> 00:15:48,270
The name of the country and the way we can get the name of the country, so let's create a variable

160
00:15:48,270 --> 00:15:50,850
here called Country Name.

161
00:15:52,210 --> 00:15:54,400
The way we can do this with Jake warit.

162
00:15:55,530 --> 00:15:56,340
It's just.

163
00:15:58,870 --> 00:16:07,300
Listing the element like this and instead of getting the value, we are going to get an option inside

164
00:16:07,300 --> 00:16:14,410
this element that has the selected property and by doing this.

165
00:16:17,860 --> 00:16:26,800
We can get the text inside that option because if we go back here and inspect this element, we have

166
00:16:26,800 --> 00:16:28,720
a selected option.

167
00:16:32,240 --> 00:16:33,260
And inside.

168
00:16:35,480 --> 00:16:43,160
We have some text, this is inside the option age HTML element, this is why we are doing it like this.

169
00:16:43,370 --> 00:16:48,680
So the option that has the selected attribute, we are just going to get the text.

170
00:16:49,680 --> 00:16:56,190
And then we can just send the country name, so same thing here.

171
00:16:59,740 --> 00:17:01,510
Every time it changes.

172
00:17:03,080 --> 00:17:05,600
We are just going to get the country name again.

173
00:17:06,950 --> 00:17:07,670
And.

174
00:17:09,080 --> 00:17:16,730
Sand as an argument of that function, and now we need to go to the function and actually create this

175
00:17:16,730 --> 00:17:19,610
argument and right here.

176
00:17:21,890 --> 00:17:29,270
Instead of sending the country code, we are going to send the country name, so let's test this out.

177
00:17:30,750 --> 00:17:32,380
Refreshing the page.

178
00:17:32,400 --> 00:17:35,250
And now we are just sending the country name.

179
00:17:35,280 --> 00:17:36,660
Let's make some tests here.

180
00:17:38,030 --> 00:17:38,740
Pretty cool.

181
00:17:41,010 --> 00:17:43,410
So this one is solved.

182
00:17:45,580 --> 00:17:52,240
So I hope you had fun and you had the chance to learn a lot by doing these exercises, I know this time

183
00:17:52,240 --> 00:17:56,740
we only had three exercises, but they were a bit more time consuming.

184
00:17:56,740 --> 00:17:58,510
So I think this is good for now.

185
00:17:59,020 --> 00:18:05,770
In the next section, we're going to have a very interesting project, which is going to be the quiz

186
00:18:05,770 --> 00:18:09,100
game we're going to build using Ajax.

187
00:18:09,400 --> 00:18:10,330
So I'll see you then.

188
00:18:10,870 --> 00:18:11,380
Bye bye.