1
00:00:09,140 --> 00:00:15,560
Hey, everybody, continuing with our list of exercises, now it's time to solve number two, this is

2
00:00:15,560 --> 00:00:18,530
going to be more or less similar to the previous one.

3
00:00:18,830 --> 00:00:27,020
We just need to track and on change event to these radio buttons, and then we need to get some information

4
00:00:27,020 --> 00:00:30,280
from this object to update this element.

5
00:00:30,560 --> 00:00:37,220
So the first thing we need to do is getting the idea of this element or in this case, since they are

6
00:00:37,220 --> 00:00:44,750
radio buttons, we just need to get the name of them so all of them have a name of product.

7
00:00:45,200 --> 00:00:53,630
So going to Visual Studio Code, let's start by creating a variable named radio items or something like

8
00:00:53,630 --> 00:00:54,110
this.

9
00:00:55,410 --> 00:00:59,190
And now we're going to do documents that get.

10
00:01:01,850 --> 00:01:03,160
Element by name.

11
00:01:05,890 --> 00:01:11,780
Then the name of them is product or let me see if it's plural.

12
00:01:12,100 --> 00:01:13,660
No, it's it's correct.

13
00:01:14,930 --> 00:01:17,370
So now we are just selecting all of them.

14
00:01:17,660 --> 00:01:24,750
We know that if we send this to the council, we are going to have an array with all those radio buttons.

15
00:01:25,190 --> 00:01:28,400
So now what we need to do is just starting a loop.

16
00:01:28,610 --> 00:01:30,320
So let's start a for loop.

17
00:01:33,230 --> 00:01:38,360
So the for loop is going to be so far a equals zero.

18
00:01:41,350 --> 00:01:44,320
A has to be smaller than.

19
00:01:45,250 --> 00:01:47,410
Radio items that lenth.

20
00:01:53,090 --> 00:01:54,380
A plus plus.

21
00:01:57,340 --> 00:02:04,720
So inside here, what we need to do is setting the on change event for all those elements so we can

22
00:02:04,720 --> 00:02:07,180
just do radio items.

23
00:02:10,200 --> 00:02:16,800
We have an index of a so we can set it to all the elements, then the unchanged event.

24
00:02:24,370 --> 00:02:31,630
And now we have a function, so before moving ahead, let's just send some message to the council just

25
00:02:31,630 --> 00:02:34,740
to see if so far everything's working.

26
00:02:35,170 --> 00:02:37,450
So let's do cancel that log.

27
00:02:38,200 --> 00:02:40,710
Trust me, this is a very good practice.

28
00:02:40,960 --> 00:02:47,140
This is going to avoid a lot of heartache, because if this is not working, we are going to know this

29
00:02:47,500 --> 00:02:49,420
very early in the process.

30
00:02:50,140 --> 00:02:52,610
So let's ride something like changed.

31
00:02:53,080 --> 00:02:54,560
This is not a waste of time.

32
00:02:54,580 --> 00:02:56,890
This is actually a very good practice.

33
00:02:58,450 --> 00:03:00,640
So refreshing the page.

34
00:03:02,220 --> 00:03:06,660
Going to the console, let's try to change it so as you can see.

35
00:03:07,640 --> 00:03:09,050
This is working well.

36
00:03:10,680 --> 00:03:12,290
So now we can continue.

37
00:03:15,030 --> 00:03:22,170
Now, every time there's a change, we need to go through all the elements to check which one is checked.

38
00:03:22,410 --> 00:03:26,700
So this is why we need a loop inside the loop.

39
00:03:27,060 --> 00:03:31,050
So now that we go inside and set this event.

40
00:03:32,380 --> 00:03:40,960
To all the radio buttons, every time there's a change, we need to go through all them again to check

41
00:03:40,960 --> 00:03:43,350
if they have that attribute.

42
00:03:43,660 --> 00:03:46,060
So I'm just going to copy all this.

43
00:03:46,210 --> 00:03:52,750
So I just selected the loop and I'm going to paste another loop inside itself like this.

44
00:03:53,790 --> 00:03:55,170
I don't need this part.

45
00:03:56,900 --> 00:04:02,600
I just need to loop, so let's change the name of the variable so we don't have a conflict.

46
00:04:02,750 --> 00:04:05,150
So B, B and B.

47
00:04:07,070 --> 00:04:12,530
And now what we need to do is just starting and if statement.

48
00:04:14,620 --> 00:04:17,680
So if radio items.

49
00:04:19,790 --> 00:04:21,200
We have an index of B.

50
00:04:22,610 --> 00:04:29,990
Has the checked attributes, it means that we just found the one that that is select.

51
00:04:32,400 --> 00:04:38,010
So then we can start a variable called maybe selected radio.

52
00:04:40,530 --> 00:04:43,770
Which is going to be radio items with.

53
00:04:45,290 --> 00:04:50,300
An index of B and we just want the value attribute.

54
00:04:53,080 --> 00:05:02,110
OK, so now that we found the element, let's just do console that log and see what we have inside these

55
00:05:02,110 --> 00:05:04,180
selected radio variable.

56
00:05:06,230 --> 00:05:08,030
So refreshing the page.

57
00:05:09,230 --> 00:05:17,060
Let's try to select a different one, so as you can see, we are getting the values of the radio buttons.

58
00:05:17,450 --> 00:05:26,220
So this one is iPhone eleven, black iPhone eight plus silver than the first one is iPhone AC Red.

59
00:05:26,450 --> 00:05:34,340
So, again, as you can see, the values we have are the same names as the properties of this object.

60
00:05:34,560 --> 00:05:39,770
So this is going to be similar to what we've done in exercise number one.

61
00:05:40,010 --> 00:05:44,600
So let's go check the IDs of the elements that we need to change.

62
00:05:44,840 --> 00:05:49,520
So the image, it has an ID, a phone image.

63
00:05:50,770 --> 00:05:53,320
So let's just copy it to our code.

64
00:05:58,180 --> 00:05:59,720
So this is the image.

65
00:05:59,740 --> 00:06:04,990
Now let's get the idea for the product name, which is going to be phone name.

66
00:06:08,490 --> 00:06:12,960
And we also have the price, which is phone price.

67
00:06:20,780 --> 00:06:26,230
All right, so let's just copy this structure so we don't have to write it again.

68
00:06:29,650 --> 00:06:32,680
So let's start by the phone name.

69
00:06:35,360 --> 00:06:37,760
Which is the easiest one.

70
00:06:39,320 --> 00:06:45,770
So inside the HTML, what we are going to do is just go inside the phones, object.

71
00:06:47,200 --> 00:06:51,340
So phones and we need to go inside.

72
00:06:53,380 --> 00:06:56,740
One of the objects, so we have.

73
00:06:57,950 --> 00:07:07,250
These properties names already inside our selected radio variable, so we can just use it here.

74
00:07:08,550 --> 00:07:15,540
Inside braces and now for the name we want a property called name.

75
00:07:19,930 --> 00:07:21,520
So that name.

76
00:07:23,200 --> 00:07:26,110
Now, let's do the same thing for the price.

77
00:07:28,260 --> 00:07:30,090
So phone price.

78
00:07:34,140 --> 00:07:41,560
Now, first, we need to get the currency and then the price with two decimal places.

79
00:07:41,610 --> 00:07:43,890
So first, let's get the currency.

80
00:07:49,430 --> 00:07:55,370
Which is already a string and now we are going to concatenate with.

81
00:08:03,320 --> 00:08:04,940
The price.

82
00:08:11,910 --> 00:08:13,560
So this is going to.

83
00:08:15,070 --> 00:08:23,470
Go through the tooth fixed method so we can round it to two decimal places or in this case force it

84
00:08:23,470 --> 00:08:31,570
to two decimal places and then we can get all this, I think you don't need parentheses for this, but

85
00:08:31,570 --> 00:08:38,530
I like doing it like this and I'm just going to convert it into a string, so to string, so we don't

86
00:08:38,530 --> 00:08:42,670
have any problem to concatenate with the currency.

87
00:08:42,880 --> 00:08:46,570
So if we do it like this, let's just test it.

88
00:08:46,570 --> 00:08:50,000
Before we go to the image, I'm going to refresh the page.

89
00:08:50,020 --> 00:08:54,070
Now let's go to the console to see if we have any error.

90
00:08:54,070 --> 00:08:55,830
So let's try to change this.

91
00:08:55,840 --> 00:08:58,390
I'm going to select this other phone.

92
00:08:58,660 --> 00:09:04,810
And as you can see, we were able to change the name, include the currency and change the price.

93
00:09:04,990 --> 00:09:05,980
So pretty good.

94
00:09:07,520 --> 00:09:14,990
Let's try it with the third one, it seems to be working so five one nine, the price is correct, the

95
00:09:14,990 --> 00:09:18,670
currency is correct and the name is also correct.

96
00:09:19,010 --> 00:09:20,690
Going back to the first one.

97
00:09:21,040 --> 00:09:22,150
This is all fine.

98
00:09:23,030 --> 00:09:28,350
So now we just have to deal with the product's image, which should be really simple.

99
00:09:28,820 --> 00:09:33,150
So going back to Visual Studio Code, let's copy the same thing here.

100
00:09:33,740 --> 00:09:37,430
Now, the idea of this aliments is phone image.

101
00:09:38,120 --> 00:09:40,610
This is an image aliments from age.

102
00:09:41,210 --> 00:09:44,440
So how do we change the source attribute?

103
00:09:44,720 --> 00:09:52,220
So if we go back there and select the image, we can see that there is a source attribute and this is

104
00:09:52,220 --> 00:09:53,460
what we need to change.

105
00:09:53,720 --> 00:10:00,110
Now, I don't remember if I talked about this specifically how to change the source of an image.

106
00:10:00,530 --> 00:10:07,580
But let me tell you that much more important than knowing everything by heart, then having learned

107
00:10:07,580 --> 00:10:13,230
everything is being able to find out how to do what you want.

108
00:10:13,250 --> 00:10:19,640
So I remember when I was starting out with programming, one of the things that made me evolve very

109
00:10:19,640 --> 00:10:24,350
fast was being able to search for what I want and finding out how to do stuff.

110
00:10:24,710 --> 00:10:27,010
So this is pretty simple to find online.

111
00:10:27,230 --> 00:10:30,320
How do we change this attribute with JavaScript?

112
00:10:30,680 --> 00:10:31,100
Well.

113
00:10:32,320 --> 00:10:41,710
We can just go to Google and type gess change as our sea of image, so if we do this, we should have

114
00:10:41,710 --> 00:10:44,950
the answer we want in the first search result.

115
00:10:46,430 --> 00:10:54,800
So trust me, it's very important for you to do this, don't get stuck because you haven't learned something

116
00:10:54,920 --> 00:11:00,710
previously, just go online, search for what you want, and you are going to have all the answers.

117
00:11:00,950 --> 00:11:02,300
So here we have it.

118
00:11:02,570 --> 00:11:09,080
There's a property called SIRC, which is exactly what we want to change.

119
00:11:10,130 --> 00:11:11,510
So let's copy this.

120
00:11:13,630 --> 00:11:18,550
So that s our C and now we just need the URL.

121
00:11:19,820 --> 00:11:20,870
Of the image.

122
00:11:25,060 --> 00:11:32,740
So this is going to be phones with an index of selected radio and the property we want is how much you

123
00:11:32,740 --> 00:11:33,130
are out.

124
00:11:44,540 --> 00:11:46,440
All right, now, this should be good.

125
00:11:46,460 --> 00:11:51,480
Let's refresh the page and test, so let's select the next one.

126
00:11:52,250 --> 00:11:56,100
So as you can see, we are changing the image, which is really cool.

127
00:11:56,120 --> 00:11:57,450
Let's try the third one.

128
00:11:58,340 --> 00:11:59,630
This is working well.

129
00:11:59,990 --> 00:12:02,200
Let's try the first one again.

130
00:12:02,690 --> 00:12:03,830
So this is good.

131
00:12:04,130 --> 00:12:06,290
So this one is also solved.

132
00:12:06,590 --> 00:12:09,050
Just one thing that I want to say.

133
00:12:09,470 --> 00:12:12,680
I got these new URLs from the Internet.

134
00:12:13,040 --> 00:12:18,820
So if you go to the object, you will see that all of them are hosted online.

135
00:12:19,070 --> 00:12:25,070
So when you are watching this video, I'm not sure if these you URLs are going to be working.

136
00:12:25,340 --> 00:12:30,890
Maybe these websites that just put the images down, they just deleted.

137
00:12:32,090 --> 00:12:39,320
So if for any reason you see a broken image, let me simulate a broken image here like this.

138
00:12:42,920 --> 00:12:44,620
So let me try again.

139
00:12:45,580 --> 00:12:53,410
So if you click on something and you see a broken image, probably it's because the website just remove

140
00:12:53,410 --> 00:12:54,130
the image.

141
00:12:54,430 --> 00:12:55,840
So this is not a problem.

142
00:12:55,840 --> 00:13:00,720
If this happens to you, you can just copy the name of the phone like this.

143
00:13:01,480 --> 00:13:03,040
Go to Google Images.

144
00:13:03,340 --> 00:13:06,760
Let me just search for this image.

145
00:13:08,030 --> 00:13:16,940
So search for it on Google, go to images, and then just pick any image here, so let's say this one,

146
00:13:17,630 --> 00:13:20,120
this one here, right, click.

147
00:13:21,710 --> 00:13:29,420
And choose copy, image address, then go back here and replace the URL.

148
00:13:36,530 --> 00:13:41,670
And by doing this, you will be able to see the product image.

149
00:13:41,690 --> 00:13:44,620
Well, this one is a bit smaller, but that's OK.

150
00:13:45,440 --> 00:13:50,190
I just wanted to show you that I don't know when you will be watching this video.

151
00:13:50,420 --> 00:13:53,930
Maybe this image does not exist online anymore.

152
00:13:54,230 --> 00:14:00,380
So I just want to show you that if you see that error, maybe it's not because you're doing something

153
00:14:00,380 --> 00:14:00,740
wrong.

154
00:14:00,740 --> 00:14:03,650
Maybe it's just because the image does not exist anymore.

155
00:14:03,650 --> 00:14:07,880
So you can just pick another one and replace the wall in the object.

156
00:14:08,450 --> 00:14:10,610
So going back to how it was before.

157
00:14:12,250 --> 00:14:18,590
And number two is done, so now the third one is going to be a lot of fun.

158
00:14:18,610 --> 00:14:22,930
So now it's time to start making the stopwatch work.

159
00:14:23,380 --> 00:14:26,890
So again, I'm going to have to do it in a separate video.

160
00:14:27,190 --> 00:14:28,140
So I'll see you then.