Hey there, in the previous video, we made a call to this holiday API to get all the holidays for the
previous year for a given country, and now we just need to integrate with this black box, because
every time we select a different country here, we need to update the list of holidays.
So the first thing I'm going to do is just copying this age html to up here so we can show right after
the list.
So you can go to Visual Studio Code, just go to the HTML file.
As you can see, here's the structure that I'm suggesting you to use.
You can just go up here.
So right after the select box.
We can place our e-mail.
I'm just going to break two lines here.
And let's go back there and see how it looks.
All right, so now we have the country here and the list of holidays, of course, we just need to erase
all the data.
So I'm not going to leave any list item here.
I'm also going to erase the current here.
And the country actually is not current here, its previous year, if you want to change this, you
can do it.
So previous year.
So going back to the page, refreshing it now we just have the structure here.
So any time there's a change here, we are going to call our function.
So the name of the function, I'm going to erase this because I'm not going to call it here anymore.
But now we know that we have a function called Get Holliday's, which is right here.
So there are two times where we are going to use this, so the first is every time there's a change.
So if we go down here, we have populate and we have this change.
So every time there's a change, we need to call this function and pass the value, which is that code.
So we are going to pass the value to this function and this is going to bring all the public holidays.
Of course, we still need to adjust this function because we don't want to send the values to the console,
but we want to populate that list.
So here's one place where we need to use this.
And the other place, it's here, so when we have it in local storage.
We are going to select that country and we are also going to get the holidays, so then we will have
that code in the local storage and we are going to use that code to get the holidays.
So let's see if this is working now.
So going back to the page, one thing I'm going to do first is just cleaning the local storage.
So let's go to application, local storage.
I'm just going to clean this.
All right, let's go back to the console, so refreshing the page, I have nothing here yet.
Now I'm going to select a country, so let's try.
Brazil.
And now we just chose Brazil, and as you can see, we have the list of public holidays in Brazil.
Let's try again, let's try a different country, say, Austria.
And now we have the list of holidays for Austria.
OK, so now we can go ahead and just populate the list.
So let's go back to our function.
And one thing that we can do here, just go to the e-mail file again so we can get all the IDs.
So I'm just going to copy all this.
Go back here right inside the function we've just created here.
So I'm just going to place it here.
Just to just so I see what are the IDs for the element, so I have one called Selected Country.
I have one called previous year.
And I have one called Holiday List.
That's all we need.
So we can populate the list, so we're going to start doing this as soon as we receive the data.
So if the country exists, I'm assuming that we are going to receive a success response, if not, we
may just receive an error so we can test maybe we can try to choose a country that it's not likely to
exist in the database and test.
What is the response that we are going to receive?
But for now, we can just continue here.
So let's remember that we need data, not holidays, so I'm just going to copy this and I'm going to
create a variable called Holliday's for our array, which is just going to be data that holidays.
And now we can, first of all, populate the selected country that year and the holiday list.
So the holiday list is here the previous year here, but we don't have the name of the country, so
we're going to have to pass the name of the country as well.
So let's create another argument so we can pass the country name, actually.
Let's do this afterwards.
Let's just use the country code for now just to make it simple.
And then in the end, we can make this better and just use the country name.
So let's use the country code for now.
So after we have this success, what we are going to do is just updating the elements.
So first, let's update the selected country.
So that's the idea of the element and the text inside it is just going to be for now.
The country called.
Let's do the same thing for the previous year.
Pretty good.
And before we go ahead, let's just save this and see if this is working.
Refreshing the page.
Now it's Austria, we are populating the year and the country called, let's change it.
Again, it seems to be working, let's try.
Brazil, here's the code for Brazil, the year, so everything seems to be working well, and now what
we have to do is just make a loop to iterate through this list.
So let's do it now.
It's a for loop.
So A has to be less than data or holidays.
Which is already the name of our variable, so holidays that lenth.
A plus plus.
So every time we go inside here, the first thing we need to do is test if the holiday is a public holiday,
because if you look to the exercise.
I'm asking you to list all the public holidays, but not all the holidays that it's that are listed
here are public holidays just to make a test, let's just send it to the council again.
Let's send the holiday so we can check this out.
So here we have the holidays, so if we go inside this New Year's Day, you will see that there is a
public property which is set to true, which means it is a public holiday.
If not so this.
World Wildlife Day public is set to.
So we are only going to list the public holidays.
So going back there.
Then we can do holidays.
With an index of a then we are going to check for the public property.
We don't have to do.
Equals true, we don't have to do this because true value is going to come here directly.
So this is enough.
So if it is a public holiday, then we can do something.
So let's create a variable for the list item.
Which is going to start with an HTML element.
Here, we can just close it down here.
So using the incremental operator.
So plus equal then closing the list item.
And.
In the middle.
Let's see how this has to be just erased everything, but let me hit control Z so I can look at it.
So here we need to include a year a dash and the name of the holiday.
Pretty good.
So right inside here, first we need.
The date.
So there is a property called late, so we can just do.
Holidays with an index of a.
That date then we can concatenate with white space dash white space, and now we can just concatenate
with the name of the holiday, which is just name.
So, again, let's just copy this.
All right, so now this should be OK and let me just copy this.
And before we enter the loop, one important thing is to just erase everything that's inside the list.
So the list has this Idy holiday list.
So let's set the age HTML this time it has to be HTML, because we're going to place HTML inside, so
we're just going to send an empty string.
To our aliment, and now every time we go inside here.
We can just append the list item so we can do.
It like this, so this is the element we're going to use the append method, which is going to keep
adding things to this element.
And in this case, what we want to append is just.
The list item that we just created up here, so let's save this and let's see if this is working now.
So refreshing the page.
I just loaded the page with Brazil preselected, and now I'm seeing the list of public holidays in Brazil,
which is really, really cool.
Now, let's try to change this to see if this is working.
So, yeah, this seems to be working.
Let's see if we can find a country that has no data.
It's a bit hard to find now.
Every country I tried here had data from that API, which is actually good, but one thing we can do
here, if we don't find anything, we can just leave everything blank.
So every time we go inside here, the first thing that we can do is just.
Refreshing those element.
So we can just set.
The HTML for this.
And for the other two elements, for empty strings just like that.
So we're going to do this before trying to the Ajax request now, I can already erase this.
So every time we go inside this function.
We're just going to leave those elements blank, and if there's any error here, it will be OK.
We're just not going to list the holidays.
So let's save this just to see if this is still working.
So now we can see it blank and then when we have the response, then this is populated.
Let's try Greece blank and then we see the information, which is much better now.
So now just the last thing that we need to do here, we need to erase the console that log, and we
also need to send the actual country name here instead of the country code should be pretty easy to
do.
So let's go back to Visual Studio Code.
So first, let's just erase this console, that log.
And now right here, when we call that function, so here it is, get holidays we need to send.
The name of the country and the way we can get the name of the country, so let's create a variable
here called Country Name.
The way we can do this with Jake warit.
It's just.
Listing the element like this and instead of getting the value, we are going to get an option inside
this element that has the selected property and by doing this.
We can get the text inside that option because if we go back here and inspect this element, we have
a selected option.
And inside.
We have some text, this is inside the option age HTML element, this is why we are doing it like this.
So the option that has the selected attribute, we are just going to get the text.
And then we can just send the country name, so same thing here.
Every time it changes.
We are just going to get the country name again.
And.
Sand as an argument of that function, and now we need to go to the function and actually create this
argument and right here.
Instead of sending the country code, we are going to send the country name, so let's test this out.
Refreshing the page.
And now we are just sending the country name.
Let's make some tests here.
Pretty cool.
So this one is solved.
So I hope you had fun and you had the chance to learn a lot by doing these exercises, I know this time
we only had three exercises, but they were a bit more time consuming.
So I think this is good for now.
In the next section, we're going to have a very interesting project, which is going to be the quiz
game we're going to build using Ajax.
So I'll see you then.
Bye bye.