Hey, everyone, let's get started with exercise number three, add a new functionality to the country
selector of exercise one when the country is selected, list below it, the public holidays for that
country in the previous year.
So this is the layout we should use.
So basically when we select the country here, so let's say.
Ecuador, we need to list below here all the public holidays for this country, so the way we are going
to do this is by using the holiday API.
So let's.
Do this exercise in two parts.
First, let's understand how this API works.
Let's try to do the request.
And when we can make sure that it is working well, then we can integrate with exercise number one.
So you can just click on this link and then if you click here, it's going to ask you for your email
address.
You just need to type in your e-mail address and then you will be.
Redirected to a page like this where you will see your API key.
So you can just copy it and just base it on Visual Studio Code, just like I did here so you can use
to make the requests.
So here, how does it work when you are inside?
A page for an API like this, you should always search for this developer's.
Menu or maybe API documentation or something like this, it's usually where you will find examples of
how to use the API.
So if we go to developers.
So you see some rules for you to use so we can see that we can use our for two or Alpha three format
for the countries, which is good.
So this is what we are looking for.
We are looking for listing the holidays.
So if we click here, try it in your browser, you can see that we already have a request made.
We can see how we are going to receive this data.
And what's important here, so I'm asking you to list the public holidays for the previous year.
This is because the free version of this API only works with the previous year.
So I'm recording this video in 2020.
It's only going to work for 2019 for me.
But of course, we have to make this dynamic.
So it always works.
But what's important here is just copying this.
So now we know exactly the Yooralla that we need to use.
So I'm just going to copy this.
Let's take this to visuals to record.
And now we can just copy the same structure we used in exercise one.
So like this.
And the name of our function can be get Holliday's.
And what we're going to need.
What will be dynamic here is the country code, because every time we select a different country, then
we need to make the request again.
So we can create.
An argument called Country Code.
And now the euro, let's replace the world here.
OK, so now we just need to concatenate so here we have the key, which we just need to erase this.
Just like that, and here we are going to concatenate with our actual API key, if you want to put it
inside a variable, that's fine.
If not, you can just copy it like this.
I think the request already had my API key, I'm not sure about this, but still I prefer to do it like
this because that's the API key that I copied from the dashboard.
So it is right here.
And now there's the country and the ear.
So the other information that we need to replace here is just the country code.
And in this case.
We are going to use the country code that we are going to pass as an argument for dysfunction, so let's
place it right here.
And we also need.
To get the previous year.
So let's do it now.
Let's concatenate with.
A variable called previous year that we are going to do just now, so let's just copy this.
So when we go inside here, we already have the country code, let's create another one to have the
dynamic previous year.
Just like that.
And now we know that in order to get the current here, we can start a new date object just like that,
and we can apply a method called get full year, which is going to return.
The year with four digits.
But what we want actually is not.
The current year, but the previous year, because that's what's going to work with that API, so for
that we can just subtract one.
If you want to test this out before you.
Go ahead and put it in your code, you can just copy this, just open the browser, go to the inspector
and here in the can so you can just test this out to see if this is working.
So as you can see, I'm able to get the previous year dynamically by using this.
So when it's two thousand twenty one, then this is going to return to twenty twenty.
And that call to the API is always going to work.
So now we already have the previous year.
This is already part of the euro, so I think everything should be working now.
Just let's adjust the function here because we don't know what we are going to receive yet.
So for this, let's just send the data to the consul.
And the first time we call this function, let's do it like this.
And for the country code, let's just go back to the browser, let's see any country that we have here.
So let's try maybe friends or something like this, let's see the code for friends.
So here it is.
We have this three digit value, so we have this value with three characters.
I'm just going to copy this just so we can make a quick test.
And I'm going to pass this code as the argument for this function and let's see what's going to happen.
So saving this, let's go to the console, let's refresh the page.
And there is a two hundred status here, which is cool.
Now we have the list of holidays, we have some other stuff here in the response, so maybe we just
want to send the holidays property to the console.
So let's go back there instead of just STADA.
Let's do DataDot holidays.
Which is going to be the only thing we want here.
So I'm going to try again.
So now, as you can see, I just received a list of all holidays in France for 2019, which is really
cool.
And it's exactly what we need for this exercise.
So now that we have part one ready, I'm just going to break this video into two parts so it doesn't
get too long.
So in the next video, we're going to integrate it with this select box.
I'll see you then.