1
00:00:09,160 --> 00:00:16,390
Hey, everyone, let's get started with exercise number three, add a new functionality to the country

2
00:00:16,410 --> 00:00:24,820
selector of exercise one when the country is selected, list below it, the public holidays for that

3
00:00:24,820 --> 00:00:26,740
country in the previous year.

4
00:00:27,670 --> 00:00:29,980
So this is the layout we should use.

5
00:00:30,340 --> 00:00:34,120
So basically when we select the country here, so let's say.

6
00:00:35,000 --> 00:00:44,360
Ecuador, we need to list below here all the public holidays for this country, so the way we are going

7
00:00:44,360 --> 00:00:48,560
to do this is by using the holiday API.

8
00:00:48,860 --> 00:00:49,520
So let's.

9
00:00:50,480 --> 00:00:52,940
Do this exercise in two parts.

10
00:00:53,150 --> 00:00:56,720
First, let's understand how this API works.

11
00:00:57,050 --> 00:00:58,670
Let's try to do the request.

12
00:00:58,940 --> 00:01:06,860
And when we can make sure that it is working well, then we can integrate with exercise number one.

13
00:01:07,130 --> 00:01:14,870
So you can just click on this link and then if you click here, it's going to ask you for your email

14
00:01:14,870 --> 00:01:15,530
address.

15
00:01:16,900 --> 00:01:21,340
You just need to type in your e-mail address and then you will be.

16
00:01:22,380 --> 00:01:27,450
Redirected to a page like this where you will see your API key.

17
00:01:28,960 --> 00:01:36,880
So you can just copy it and just base it on Visual Studio Code, just like I did here so you can use

18
00:01:36,880 --> 00:01:38,350
to make the requests.

19
00:01:40,310 --> 00:01:44,450
So here, how does it work when you are inside?

20
00:01:45,710 --> 00:01:52,190
A page for an API like this, you should always search for this developer's.

21
00:01:54,050 --> 00:02:01,430
Menu or maybe API documentation or something like this, it's usually where you will find examples of

22
00:02:01,430 --> 00:02:02,680
how to use the API.

23
00:02:02,990 --> 00:02:04,940
So if we go to developers.

24
00:02:06,410 --> 00:02:14,930
So you see some rules for you to use so we can see that we can use our for two or Alpha three format

25
00:02:14,930 --> 00:02:16,820
for the countries, which is good.

26
00:02:17,690 --> 00:02:19,620
So this is what we are looking for.

27
00:02:19,640 --> 00:02:22,450
We are looking for listing the holidays.

28
00:02:22,670 --> 00:02:30,320
So if we click here, try it in your browser, you can see that we already have a request made.

29
00:02:30,320 --> 00:02:33,650
We can see how we are going to receive this data.

30
00:02:35,390 --> 00:02:41,790
And what's important here, so I'm asking you to list the public holidays for the previous year.

31
00:02:42,170 --> 00:02:49,610
This is because the free version of this API only works with the previous year.

32
00:02:49,610 --> 00:02:52,400
So I'm recording this video in 2020.

33
00:02:52,640 --> 00:02:56,480
It's only going to work for 2019 for me.

34
00:02:56,690 --> 00:03:00,050
But of course, we have to make this dynamic.

35
00:03:00,050 --> 00:03:01,520
So it always works.

36
00:03:01,970 --> 00:03:05,060
But what's important here is just copying this.

37
00:03:05,450 --> 00:03:09,270
So now we know exactly the Yooralla that we need to use.

38
00:03:09,890 --> 00:03:11,600
So I'm just going to copy this.

39
00:03:14,730 --> 00:03:17,160
Let's take this to visuals to record.

40
00:03:18,420 --> 00:03:25,680
And now we can just copy the same structure we used in exercise one.

41
00:03:27,000 --> 00:03:28,200
So like this.

42
00:03:33,120 --> 00:03:37,920
And the name of our function can be get Holliday's.

43
00:03:42,340 --> 00:03:44,350
And what we're going to need.

44
00:03:45,370 --> 00:03:52,330
What will be dynamic here is the country code, because every time we select a different country, then

45
00:03:52,330 --> 00:03:55,480
we need to make the request again.

46
00:03:56,420 --> 00:03:58,160
So we can create.

47
00:03:59,560 --> 00:04:02,110
An argument called Country Code.

48
00:04:03,300 --> 00:04:06,930
And now the euro, let's replace the world here.

49
00:04:18,120 --> 00:04:26,610
OK, so now we just need to concatenate so here we have the key, which we just need to erase this.

50
00:04:28,140 --> 00:04:37,080
Just like that, and here we are going to concatenate with our actual API key, if you want to put it

51
00:04:37,080 --> 00:04:39,240
inside a variable, that's fine.

52
00:04:39,480 --> 00:04:42,510
If not, you can just copy it like this.

53
00:04:44,950 --> 00:04:51,190
I think the request already had my API key, I'm not sure about this, but still I prefer to do it like

54
00:04:51,190 --> 00:04:55,500
this because that's the API key that I copied from the dashboard.

55
00:04:55,930 --> 00:04:57,850
So it is right here.

56
00:04:58,090 --> 00:05:00,940
And now there's the country and the ear.

57
00:05:01,210 --> 00:05:06,930
So the other information that we need to replace here is just the country code.

58
00:05:07,720 --> 00:05:09,370
And in this case.

59
00:05:11,230 --> 00:05:18,190
We are going to use the country code that we are going to pass as an argument for dysfunction, so let's

60
00:05:18,190 --> 00:05:19,330
place it right here.

61
00:05:20,350 --> 00:05:22,720
And we also need.

62
00:05:24,800 --> 00:05:26,780
To get the previous year.

63
00:05:28,360 --> 00:05:29,790
So let's do it now.

64
00:05:31,190 --> 00:05:33,290
Let's concatenate with.

65
00:05:34,400 --> 00:05:40,550
A variable called previous year that we are going to do just now, so let's just copy this.

66
00:05:41,750 --> 00:05:47,810
So when we go inside here, we already have the country code, let's create another one to have the

67
00:05:47,810 --> 00:05:49,790
dynamic previous year.

68
00:05:51,150 --> 00:05:52,260
Just like that.

69
00:05:53,870 --> 00:06:02,330
And now we know that in order to get the current here, we can start a new date object just like that,

70
00:06:03,230 --> 00:06:10,370
and we can apply a method called get full year, which is going to return.

71
00:06:11,310 --> 00:06:13,470
The year with four digits.

72
00:06:15,160 --> 00:06:18,490
But what we want actually is not.

73
00:06:20,570 --> 00:06:26,300
The current year, but the previous year, because that's what's going to work with that API, so for

74
00:06:26,330 --> 00:06:29,660
that we can just subtract one.

75
00:06:32,250 --> 00:06:34,890
If you want to test this out before you.

76
00:06:36,300 --> 00:06:42,840
Go ahead and put it in your code, you can just copy this, just open the browser, go to the inspector

77
00:06:42,960 --> 00:06:47,710
and here in the can so you can just test this out to see if this is working.

78
00:06:47,910 --> 00:06:53,940
So as you can see, I'm able to get the previous year dynamically by using this.

79
00:06:54,240 --> 00:06:59,280
So when it's two thousand twenty one, then this is going to return to twenty twenty.

80
00:06:59,520 --> 00:07:03,150
And that call to the API is always going to work.

81
00:07:06,810 --> 00:07:09,240
So now we already have the previous year.

82
00:07:09,750 --> 00:07:16,500
This is already part of the euro, so I think everything should be working now.

83
00:07:16,500 --> 00:07:23,480
Just let's adjust the function here because we don't know what we are going to receive yet.

84
00:07:25,330 --> 00:07:29,140
So for this, let's just send the data to the consul.

85
00:07:32,800 --> 00:07:37,240
And the first time we call this function, let's do it like this.

86
00:07:40,010 --> 00:07:47,960
And for the country code, let's just go back to the browser, let's see any country that we have here.

87
00:07:51,590 --> 00:07:59,570
So let's try maybe friends or something like this, let's see the code for friends.

88
00:07:59,580 --> 00:08:00,500
So here it is.

89
00:08:00,830 --> 00:08:07,760
We have this three digit value, so we have this value with three characters.

90
00:08:08,480 --> 00:08:12,560
I'm just going to copy this just so we can make a quick test.

91
00:08:12,860 --> 00:08:19,070
And I'm going to pass this code as the argument for this function and let's see what's going to happen.

92
00:08:20,550 --> 00:08:25,560
So saving this, let's go to the console, let's refresh the page.

93
00:08:26,540 --> 00:08:31,610
And there is a two hundred status here, which is cool.

94
00:08:32,630 --> 00:08:39,470
Now we have the list of holidays, we have some other stuff here in the response, so maybe we just

95
00:08:39,470 --> 00:08:44,020
want to send the holidays property to the console.

96
00:08:44,020 --> 00:08:47,240
So let's go back there instead of just STADA.

97
00:08:47,240 --> 00:08:49,170
Let's do DataDot holidays.

98
00:08:50,570 --> 00:08:53,370
Which is going to be the only thing we want here.

99
00:08:53,570 --> 00:08:55,220
So I'm going to try again.

100
00:08:55,400 --> 00:09:05,270
So now, as you can see, I just received a list of all holidays in France for 2019, which is really

101
00:09:05,270 --> 00:09:05,630
cool.

102
00:09:05,870 --> 00:09:09,300
And it's exactly what we need for this exercise.

103
00:09:09,350 --> 00:09:15,560
So now that we have part one ready, I'm just going to break this video into two parts so it doesn't

104
00:09:15,560 --> 00:09:16,460
get too long.

105
00:09:16,610 --> 00:09:22,130
So in the next video, we're going to integrate it with this select box.

106
00:09:22,160 --> 00:09:22,940
I'll see you then.