Hey, everybody, continuing with our list of exercises, now it's time to solve number two, this is
going to be more or less similar to the previous one.
We just need to track and on change event to these radio buttons, and then we need to get some information
from this object to update this element.
So the first thing we need to do is getting the idea of this element or in this case, since they are
radio buttons, we just need to get the name of them so all of them have a name of product.
So going to Visual Studio Code, let's start by creating a variable named radio items or something like
this.
And now we're going to do documents that get.
Element by name.
Then the name of them is product or let me see if it's plural.
No, it's it's correct.
So now we are just selecting all of them.
We know that if we send this to the council, we are going to have an array with all those radio buttons.
So now what we need to do is just starting a loop.
So let's start a for loop.
So the for loop is going to be so far a equals zero.
A has to be smaller than.
Radio items that lenth.
A plus plus.
So inside here, what we need to do is setting the on change event for all those elements so we can
just do radio items.
We have an index of a so we can set it to all the elements, then the unchanged event.
And now we have a function, so before moving ahead, let's just send some message to the council just
to see if so far everything's working.
So let's do cancel that log.
Trust me, this is a very good practice.
This is going to avoid a lot of heartache, because if this is not working, we are going to know this
very early in the process.
So let's ride something like changed.
This is not a waste of time.
This is actually a very good practice.
So refreshing the page.
Going to the console, let's try to change it so as you can see.
This is working well.
So now we can continue.
Now, every time there's a change, we need to go through all the elements to check which one is checked.
So this is why we need a loop inside the loop.
So now that we go inside and set this event.
To all the radio buttons, every time there's a change, we need to go through all them again to check
if they have that attribute.
So I'm just going to copy all this.
So I just selected the loop and I'm going to paste another loop inside itself like this.
I don't need this part.
I just need to loop, so let's change the name of the variable so we don't have a conflict.
So B, B and B.
And now what we need to do is just starting and if statement.
So if radio items.
We have an index of B.
Has the checked attributes, it means that we just found the one that that is select.
So then we can start a variable called maybe selected radio.
Which is going to be radio items with.
An index of B and we just want the value attribute.
OK, so now that we found the element, let's just do console that log and see what we have inside these
selected radio variable.
So refreshing the page.
Let's try to select a different one, so as you can see, we are getting the values of the radio buttons.
So this one is iPhone eleven, black iPhone eight plus silver than the first one is iPhone AC Red.
So, again, as you can see, the values we have are the same names as the properties of this object.
So this is going to be similar to what we've done in exercise number one.
So let's go check the IDs of the elements that we need to change.
So the image, it has an ID, a phone image.
So let's just copy it to our code.
So this is the image.
Now let's get the idea for the product name, which is going to be phone name.
And we also have the price, which is phone price.
All right, so let's just copy this structure so we don't have to write it again.
So let's start by the phone name.
Which is the easiest one.
So inside the HTML, what we are going to do is just go inside the phones, object.
So phones and we need to go inside.
One of the objects, so we have.
These properties names already inside our selected radio variable, so we can just use it here.
Inside braces and now for the name we want a property called name.
So that name.
Now, let's do the same thing for the price.
So phone price.
Now, first, we need to get the currency and then the price with two decimal places.
So first, let's get the currency.
Which is already a string and now we are going to concatenate with.
The price.
So this is going to.
Go through the tooth fixed method so we can round it to two decimal places or in this case force it
to two decimal places and then we can get all this, I think you don't need parentheses for this, but
I like doing it like this and I'm just going to convert it into a string, so to string, so we don't
have any problem to concatenate with the currency.
So if we do it like this, let's just test it.
Before we go to the image, I'm going to refresh the page.
Now let's go to the console to see if we have any error.
So let's try to change this.
I'm going to select this other phone.
And as you can see, we were able to change the name, include the currency and change the price.
So pretty good.
Let's try it with the third one, it seems to be working so five one nine, the price is correct, the
currency is correct and the name is also correct.
Going back to the first one.
This is all fine.
So now we just have to deal with the product's image, which should be really simple.
So going back to Visual Studio Code, let's copy the same thing here.
Now, the idea of this aliments is phone image.
This is an image aliments from age.
So how do we change the source attribute?
So if we go back there and select the image, we can see that there is a source attribute and this is
what we need to change.
Now, I don't remember if I talked about this specifically how to change the source of an image.
But let me tell you that much more important than knowing everything by heart, then having learned
everything is being able to find out how to do what you want.
So I remember when I was starting out with programming, one of the things that made me evolve very
fast was being able to search for what I want and finding out how to do stuff.
So this is pretty simple to find online.
How do we change this attribute with JavaScript?
Well.
We can just go to Google and type gess change as our sea of image, so if we do this, we should have
the answer we want in the first search result.
So trust me, it's very important for you to do this, don't get stuck because you haven't learned something
previously, just go online, search for what you want, and you are going to have all the answers.
So here we have it.
There's a property called SIRC, which is exactly what we want to change.
So let's copy this.
So that s our C and now we just need the URL.
Of the image.
So this is going to be phones with an index of selected radio and the property we want is how much you
are out.
All right, now, this should be good.
Let's refresh the page and test, so let's select the next one.
So as you can see, we are changing the image, which is really cool.
Let's try the third one.
This is working well.
Let's try the first one again.
So this is good.
So this one is also solved.
Just one thing that I want to say.
I got these new URLs from the Internet.
So if you go to the object, you will see that all of them are hosted online.
So when you are watching this video, I'm not sure if these you URLs are going to be working.
Maybe these websites that just put the images down, they just deleted.
So if for any reason you see a broken image, let me simulate a broken image here like this.
So let me try again.
So if you click on something and you see a broken image, probably it's because the website just remove
the image.
So this is not a problem.
If this happens to you, you can just copy the name of the phone like this.
Go to Google Images.
Let me just search for this image.
So search for it on Google, go to images, and then just pick any image here, so let's say this one,
this one here, right, click.
And choose copy, image address, then go back here and replace the URL.
And by doing this, you will be able to see the product image.
Well, this one is a bit smaller, but that's OK.
I just wanted to show you that I don't know when you will be watching this video.
Maybe this image does not exist online anymore.
So I just want to show you that if you see that error, maybe it's not because you're doing something
wrong.
Maybe it's just because the image does not exist anymore.
So you can just pick another one and replace the wall in the object.
So going back to how it was before.
And number two is done, so now the third one is going to be a lot of fun.
So now it's time to start making the stopwatch work.
So again, I'm going to have to do it in a separate video.
So I'll see you then.