Hey, everyone, let's get started solving the list of exercises, number five, so number one, populate
the below select box with the list of countries of the world, the tasks should be divided into two
parts.
So let's start with the first part, which is actually getting the list of countries from this API.
So let's copy this euro and let's see what this is about.
Let's try to do this HTP request.
As you can see, this is the response we are getting, which is adjacent with all the countries in the
world.
That seems a bit crazy because we have a lot of data here.
But when we transform this into an object, we'll be able to see this better.
So let's do the first part of this exercise.
Let's go to Visual Studio Code.
So let's create a function.
We can call it get.
Country's.
So I'm going to leave the URL here.
And let's go back to our written material.
Let's go back to the Ajax's with Jay Quarrie.
Listen, we're going to need this, so I'm going to copy all this so we can use in the first part of
this exercise.
So here it is.
I just need to change the address.
So here's the address we're going to use get.
We need the data in, Jason, let's send the data to the council so we can see it.
So the first part is pretty much this.
So to see if this is working, let's just execute this function and if everything goes right.
We should be able to see the list of countries in the council already as an object because we are using
the data type.
Jason, here.
Let me save this.
Now, let's go back to the right e-mail file for the exercise, let's refresh the page.
Let me open the inspector and now if we go to the council, we should be able to see the list of countries.
This is divided like this just because it's a big number of countries.
So it's dividing into every hundred countries.
If we open this, every element of this array is going to be a country with many, many properties.
So we have currency area, capital flag.
If you go to this image file, you see that this is actually the image for the country's flag, which
is really, really cool.
You could use this in the front end of your website.
But what we are going to need here is just the list of countries.
So we only need the name of the country and maybe some kind of ID so we can identify them so we can
put it inside the value of each of the options.
So if we go up here, we can see that we have this alpha code.
I think this should be unique for each of the countries.
So maybe we can use this Alpha three code.
To put it in the value attribute.
But this is cool.
We can see that the first part of this exercise is already working.
So now let's start the second part.
So let's go back to Visual Studio now, instead of sending all this data to the console.
We need to call a function.
So let's call it like.
Populate.
Countries.
So one thing is getting the countries which we are already doing.
And another thing is populating the select box with the countries, that's the second part of the exercise.
So I'm just calling this function that doesn't exist yet.
And now let's create it down here.
So when you function instead of data, let's use countries as the argument of this function.
And now for each of these countries, we just need to create an option for them.
So here we can start a for loop.
So we're going to start a new variable called a the loop is going to be executed until this variable
is less than countries that length.
And at each iteration, we're going to add one to this variable.
We're going to incremented.
So this is the basic structure of a loop.
And now, before we go ahead, just to see if this is working, let's send it to the console again.
But this time, let's try to do something different.
So let's try to send countries.
Then with the index and let's try to send the name property that we know that each country has, let's
see if this is working.
If it is, we're just going to see a list of country names in the council, this is important because
if something is not working, we are going to see this at an early stage and we can adjust.
So saving this.
Going back here, I'm going to refresh the page, and now we are just seeing a list of countries, which
is good.
Now, what we need to do is just populating the select box pretty good.
Let's see if this element so we have a select box with an idea of countries.
Let's just copy this.
So now for each of the countries, let's create a variable called country, maybe country option.
Then we are just going to do.
The basic option structure, which is the option, then we can close it.
And here we need a value property, this is going to be important in the next part, actually, as we
are using double quotation marks.
We're going to have to use single quotation marks inside here to avoid problems.
So now it's better, and here we are going to add the name of the country, so here, let me close the
string, let me open it again, and now let's use the plus sign to do some concatenation.
And we are just going to use the country name here.
And here inside the value, so let's do the same thing, closing it, opening it again, using the plus
sign to concatenate something in the middle.
So.
Then instead of the name.
I'm just going to comment this and actually do the console that logged just for the country's just so
I can see everything again and see the name of the property that we need.
So now let me save this real quick, refreshing the page, let's go to the console.
Here it is.
It's actually inside a loop.
That's OK, so we can check each of the countries.
So the name of it is Alpha three code.
Political.
So right here, we are just going to add the Alpha three code as the value for each of the options and
then the name of the country, which is what is going to be visible in the front end.
So we don't need this console anymore.
And after doing this.
We just need to get this country's element and just adding this age html inside, so for this, we don't
need Jake where we can just use plain JavaScript.
So document not yet.
Element by ID.
So the ID is countries, then let's call the inner e-mailed property, it's going to be then we can
use an incremental operator, so plus equal.
So it's going to be the content it already has, because if we go back there, we can see that this
element already has an option element inside.
We don't want to erase it so we can just go adding at each iteration of the loop.
So then we are just going to add.
Another option, which is this one that we already built up here.
And this should be all we need to do for the second part of this exercise.
So let's save this.
Let's refresh the page.
We don't see any errors in the console if we open this now, we can see a complete list of countries,
which is really cool if we inspect this element.
So let's see one of the options.
So as you can see in the value property or the value attribute we have that the latter code for each
of the countries, which is going to be important for the next thing we need to do here about the local
storage and inside the option, we have the name of the country, which is exactly what we need.
Now, the last part of the exercise should be pretty simple.
So when a country is selected, use local storage to make it selected the next time the page is loaded.
So we just need to create a change event for this select box.
Before we do this, let's remember how we create things inside the local storage.
So let's go through this lesson and here it is.
We just need to set a new item.
So let's just copy this.
Let me go back to the exercise.
So then we can just use Jay Quarrie now.
So we have this country's aliment.
Which is a select box, and we can use a change event with Jay Querrey, let's remember that inside
here we need to pass a function.
That's going to be executed when this is changed.
Actually, I misspelled it, so change I it's correct.
I'm just going to add a comment here for what we need to do with the local storage, but before we go
ahead again, let me do a console that log just to make sure that we are detecting a change inside that
element.
So let me write CELAC black box has changed.
Let me save this.
So refreshing the page.
We see nothing here if I change this.
We can see that the event is being detected, I'm going to try to change it again, so here it is,
pretty cool so we can continue.
All right.
So when the change is detected, we just need to create a new item so we can amend the window object.
This is fine.
So just local storage, not set item, let's name it as selected country.
And since we use that code for the values of each of the options, we can just try to send.
This black box that VAO.
Let's see what we have if we do this.
So refreshing the page.
Now let's go to the application tab here we are inside the local storage.
So if we choose a country, it's creating an item with that code, which is exactly what we need.
So let's make a test.
Let's select another one to see if this is replaced.
Now, we can see that this is being replaced, which is good.
So if we already have that item, instead of seeing an error, it actually just replaces the values,
which is what we need, a tri Brazil.
So here's the code for Brazil.
Pretty cool.
Now, going back to the code now, the only thing we need to do is inside is get countries function.
It is important to do it inside here because if we do it outside, maybe when we try to run this code
to select the country, we don't have the country yet.
So it is important to do this inside this call back.
So here we can make sure that we already have the countries and now we can test.
If there is an item inside a local storage, so if we have something here, so.
Local storage that.
Selected country.
So this should be pretty simple, we can just copy this.
And we know that with Jay Quarrie, if we pass a value inside here instead of getting the value, it's
actually going to select it.
So if there's something inside a local storage, we can just set the value of this CELAC box to whatever
we have in local storage.
So let's save this.
Let me just erase this so we can test this properly, so I'm just going to refresh the page.
We got nothing we see.
Select your country now.
I'm going to select.
Bolivia, now we can see the cold here and when we refresh the page.
We can see that Bolivia started.
Preselected, which is exactly what we.
Wanted to happen.
Let me try another country now, let's try France now we can see that the code changed here.
And when we refresh the page now France is being preselected.
So exercise no one is finished.
In the next video, we're going to start solving number two.
I'll see you then.