1
00:00:09,070 --> 00:00:14,410
Hey, everyone, it's time to start solving this challenge, and the first thing we are going to do

2
00:00:14,410 --> 00:00:18,630
is just making some preparation for the first page load.

3
00:00:18,850 --> 00:00:23,380
So when the page loads, we already have something in these filters.

4
00:00:23,650 --> 00:00:30,240
So we just need to get these values and update the photo and the order details down here.

5
00:00:30,430 --> 00:00:37,450
So the best way to approach this is creating functions because then we can use the same functions every

6
00:00:37,450 --> 00:00:44,170
time we change the filters, because basically what we need to do is just get the selected values,

7
00:00:44,470 --> 00:00:51,980
send to that search parameters variable and then calculate the price and update this element.

8
00:00:52,510 --> 00:00:57,760
This is something that we are going to do on page load and also when we change elements.

9
00:00:58,090 --> 00:01:00,850
So we might as well have functions.

10
00:01:01,000 --> 00:01:03,070
So we can we use later.

11
00:01:03,400 --> 00:01:11,470
So before we go to Visual Studio, let's just remember how to deal with forms using query and we have

12
00:01:11,470 --> 00:01:13,300
to form Fuds here.

13
00:01:13,300 --> 00:01:17,800
So we have this select box and we have this input field.

14
00:01:18,040 --> 00:01:22,120
But we also have two elements that are not exactly form Fuds.

15
00:01:22,300 --> 00:01:27,400
So let's see, how can we get the values of these two elements?

16
00:01:27,490 --> 00:01:29,110
Let's get started with the input.

17
00:01:29,140 --> 00:01:30,660
So this is pretty easy.

18
00:01:30,670 --> 00:01:32,170
Let's just inspect this.

19
00:01:33,500 --> 00:01:36,300
So here we have the idea of quantity.

20
00:01:36,500 --> 00:01:40,850
So let's go to the cons. If we use Jay Querrey.

21
00:01:42,840 --> 00:01:50,700
We can just select this element by using its ID like this, and then if we use the vowel function,

22
00:01:51,030 --> 00:01:54,170
we can see that it's easy to get the value.

23
00:01:54,660 --> 00:02:01,150
So let's keep copying this and bringing to visual record so we can work with later.

24
00:02:01,770 --> 00:02:04,290
So this is how we are going to get the quantity.

25
00:02:08,010 --> 00:02:10,890
I'm just going to leave this comment at here.

26
00:02:12,940 --> 00:02:20,050
Now, let's get the style first, because this is also pretty easy as this is a form filled, so we

27
00:02:20,050 --> 00:02:25,510
have a select box with an idea of style and the way we get the value.

28
00:02:25,550 --> 00:02:28,370
So let's see what options do we have here?

29
00:02:28,990 --> 00:02:34,000
So as you can see, we have values printed and plain.

30
00:02:36,120 --> 00:02:43,650
And if we go back to visuals to record, as you can see, this is exactly the names we want so we can

31
00:02:43,650 --> 00:02:45,300
access this object.

32
00:02:45,540 --> 00:02:48,050
So we have printed and plane.

33
00:02:48,330 --> 00:02:54,400
So just getting those values will make it possible for us to access the price we want.

34
00:02:54,840 --> 00:02:57,700
So going down here, let's go back there.

35
00:02:57,720 --> 00:03:02,640
So the idea of this select box is style.

36
00:03:06,170 --> 00:03:14,840
So if I do the same thing I did here, but instead of quantity, I use style, as you can see, I can

37
00:03:14,840 --> 00:03:16,390
get what selected.

38
00:03:16,610 --> 00:03:18,260
Let's change this to plain.

39
00:03:19,230 --> 00:03:23,940
If I run it again now, I have the plane, which is exactly what we need.

40
00:03:24,290 --> 00:03:25,770
So let's just copy this.

41
00:03:29,840 --> 00:03:36,560
So we are doing this step by step and you will see how easy it is to solve something like this as long

42
00:03:36,560 --> 00:03:38,120
as we do it like this.

43
00:03:38,480 --> 00:03:41,540
So now let's see how we can get stuff inside here.

44
00:03:41,540 --> 00:03:45,380
So we have an element with an idea of color.

45
00:03:45,710 --> 00:03:52,770
So inside this color element, we can see that we have two elements that share the same class.

46
00:03:52,770 --> 00:03:57,730
So the class they both share is called option button.

47
00:03:58,010 --> 00:04:00,290
So we need to use this class.

48
00:04:00,770 --> 00:04:06,340
And now we can see that the selected one also has a selected class.

49
00:04:06,350 --> 00:04:10,460
So this is how we are going to get the element we want.

50
00:04:10,490 --> 00:04:12,520
So let's go to the console again.

51
00:04:12,620 --> 00:04:14,230
Let's try to do this now.

52
00:04:15,110 --> 00:04:24,770
So we are going to use a class option button and we also want the one that has the selected class.

53
00:04:25,010 --> 00:04:30,650
So by using the CSF selector here, we know that we can't use spaces.

54
00:04:31,010 --> 00:04:34,310
So just put the dot right after the name of the class.

55
00:04:34,550 --> 00:04:43,220
So this means that the element needs to have this class and also the selected class and these buttons

56
00:04:43,220 --> 00:04:44,420
are inside.

57
00:04:44,580 --> 00:04:50,300
So let's go back to the HDMI while they are inside the color element.

58
00:04:50,420 --> 00:04:52,520
So this is the parent element.

59
00:04:53,420 --> 00:04:56,870
So the way we are going to select this is like this.

60
00:04:57,790 --> 00:05:06,550
So here we use a space because then it's a child element of the color element and then inside it we

61
00:05:06,550 --> 00:05:09,990
need the option button that has the class of selected.

62
00:05:10,000 --> 00:05:17,380
If we do this, we can see that we already selected this blue element.

63
00:05:17,560 --> 00:05:19,900
So now what do we do with it?

64
00:05:19,960 --> 00:05:24,070
Well, we can get its inner HTML if we want.

65
00:05:24,860 --> 00:05:28,330
If we do like this, we can see that we just got.

66
00:05:29,330 --> 00:05:36,800
The inner turmoil which we could use, of course, this has a capital ladder, so we would have to convert

67
00:05:36,800 --> 00:05:40,280
it to lower case so you can use in that object.

68
00:05:40,280 --> 00:05:43,410
But this is actually not the best thing we can do here.

69
00:05:43,910 --> 00:05:49,760
This is where I told you that you would need to make some research if you wanted to do this by yourself.

70
00:05:49,770 --> 00:05:57,520
So how can we select an element and then get the information of the I.D. attribute?

71
00:05:57,710 --> 00:06:04,880
I'm not sure if we talked about this already, but if not, this is pretty simple to find out how to

72
00:06:04,880 --> 00:06:05,840
do so.

73
00:06:06,220 --> 00:06:13,070
If you just go to Google and search for Jay Querrey, get idea of element.

74
00:06:14,040 --> 00:06:14,970
As you can see.

75
00:06:16,180 --> 00:06:23,680
If you're going to explain what you want to do, you will always have the answers in the first result

76
00:06:23,800 --> 00:06:25,050
of the search results.

77
00:06:25,210 --> 00:06:26,980
So if we go inside here.

78
00:06:28,580 --> 00:06:31,490
We can see that this is pretty simple to do.

79
00:06:31,520 --> 00:06:36,800
We just need to use the 8R method and pass the ID.

80
00:06:37,890 --> 00:06:39,560
So let's try this out.

81
00:06:42,030 --> 00:06:49,680
Again, we know that we already selected this element, so now if we apply the attribute.

82
00:06:51,260 --> 00:06:59,930
Method, and we want to get its idea, if we do this, we can see that we have exactly what we need

83
00:07:00,380 --> 00:07:02,190
to go inside that object.

84
00:07:02,360 --> 00:07:07,080
So this is how we are going to get the selected option for the color.

85
00:07:07,370 --> 00:07:08,870
So let's copy this.

86
00:07:13,380 --> 00:07:19,620
And this is going to be very similar for this one, but this one instead of color, this is going to

87
00:07:19,620 --> 00:07:21,540
be inside quality.

88
00:07:21,780 --> 00:07:23,300
So let's try it out.

89
00:07:23,340 --> 00:07:26,580
Let me go back to the console now, this time.

90
00:07:28,110 --> 00:07:35,190
I'm going to go inside the quality element and I'm just going to do the same thing, so get the option

91
00:07:35,190 --> 00:07:39,800
button that has a class of selected and I'm going to try to get its ID.

92
00:07:40,200 --> 00:07:47,250
So by doing this, we can see that we have Q one 50, which is the basic quality.

93
00:07:47,610 --> 00:07:49,230
So let's copy this.

94
00:07:54,300 --> 00:08:00,220
So by doing this, we were able to get the selected values of those filters.

95
00:08:00,450 --> 00:08:06,480
Now what we need to do is updating our search parameters variable.

96
00:08:06,840 --> 00:08:09,300
You don't have to use this if you don't want to.

97
00:08:09,960 --> 00:08:18,150
But I think it's a good idea to have all the filter values just centralize in one variable, because

98
00:08:18,150 --> 00:08:21,000
this way our code is going to be more organized.

99
00:08:21,570 --> 00:08:26,790
So now what we need to do is just update these values.

100
00:08:27,360 --> 00:08:30,870
So the variable is search parameters.

101
00:08:32,460 --> 00:08:39,840
So, like I said, instead of start writing the code just inside the ready event, it's better to create

102
00:08:39,840 --> 00:08:40,470
a function.

103
00:08:40,480 --> 00:08:46,010
So the first function we're going to create is to update the parameters.

104
00:08:46,500 --> 00:08:50,790
So let's create a function and let's call it up date.

105
00:08:54,250 --> 00:08:55,060
Forams.

106
00:08:57,120 --> 00:09:00,180
So what our function is going to do is just.

107
00:09:01,190 --> 00:09:07,370
Update each of those values, so we have quantity, color, quality and style.

108
00:09:07,880 --> 00:09:09,740
So let's just copy this.

109
00:09:12,380 --> 00:09:13,190
Quantity.

110
00:09:19,560 --> 00:09:22,050
Colour, quality and style, so.

111
00:09:23,970 --> 00:09:24,570
Color.

112
00:09:29,550 --> 00:09:30,900
Quality and.

113
00:09:33,460 --> 00:09:41,530
Style, so now we know that to get the quantity, we just need to use this.

114
00:09:44,970 --> 00:09:47,970
For the color, here it is.

115
00:09:51,020 --> 00:09:53,060
This is for the quality.

116
00:09:55,030 --> 00:09:55,660
And.

117
00:09:57,440 --> 00:09:59,930
This is for the style.

118
00:10:07,100 --> 00:10:13,550
So now we have a function that we can run on page load, so right down here, when the page loads,

119
00:10:13,730 --> 00:10:17,000
we can just execute this function by doing this.

120
00:10:18,310 --> 00:10:22,100
And we can also run it every time a filter changes.

121
00:10:22,120 --> 00:10:28,330
So this is why it's a good idea to create a function so we don't have to repeat this code.

122
00:10:28,960 --> 00:10:35,200
So to see if this is working, not only we're going to update this variable, but we are also going

123
00:10:35,200 --> 00:10:38,040
to send it to the council so we can see it.

124
00:10:38,410 --> 00:10:44,980
So after updating all the properties, let's send this to the council and let's see what happens on

125
00:10:44,980 --> 00:10:46,030
page load.

126
00:10:47,760 --> 00:10:50,440
So going back there, I'm already at the console.

127
00:10:50,460 --> 00:10:52,410
I'm just going to load the page again.

128
00:10:53,430 --> 00:11:03,030
So as you can see, we started with some interesting stuff here, so inside our search parameters variable,

129
00:11:03,270 --> 00:11:06,950
we have the selected values for the filters.

130
00:11:06,990 --> 00:11:10,280
So we have colored, which is exactly what selected here.

131
00:11:10,560 --> 00:11:14,670
We have the cube one fifty, which is the basic quality.

132
00:11:14,970 --> 00:11:19,740
We have the quantity and we have the style which is printed.

133
00:11:19,920 --> 00:11:22,060
So we already made some progress.

134
00:11:22,080 --> 00:11:30,570
Now, the next thing we need to do is just getting this information and start updating the order details

135
00:11:30,570 --> 00:11:31,040
down here.

136
00:11:31,380 --> 00:11:34,740
This is what we're going to start doing in the next lesson.

137
00:11:34,770 --> 00:11:35,610
I'll see you then.