Hey, everyone, it's time to start solving this challenge, and the first thing we are going to do
is just making some preparation for the first page load.
So when the page loads, we already have something in these filters.
So we just need to get these values and update the photo and the order details down here.
So the best way to approach this is creating functions because then we can use the same functions every
time we change the filters, because basically what we need to do is just get the selected values,
send to that search parameters variable and then calculate the price and update this element.
This is something that we are going to do on page load and also when we change elements.
So we might as well have functions.
So we can we use later.
So before we go to Visual Studio, let's just remember how to deal with forms using query and we have
to form Fuds here.
So we have this select box and we have this input field.
But we also have two elements that are not exactly form Fuds.
So let's see, how can we get the values of these two elements?
Let's get started with the input.
So this is pretty easy.
Let's just inspect this.
So here we have the idea of quantity.
So let's go to the cons. If we use Jay Querrey.
We can just select this element by using its ID like this, and then if we use the vowel function,
we can see that it's easy to get the value.
So let's keep copying this and bringing to visual record so we can work with later.
So this is how we are going to get the quantity.
I'm just going to leave this comment at here.
Now, let's get the style first, because this is also pretty easy as this is a form filled, so we
have a select box with an idea of style and the way we get the value.
So let's see what options do we have here?
So as you can see, we have values printed and plain.
And if we go back to visuals to record, as you can see, this is exactly the names we want so we can
access this object.
So we have printed and plane.
So just getting those values will make it possible for us to access the price we want.
So going down here, let's go back there.
So the idea of this select box is style.
So if I do the same thing I did here, but instead of quantity, I use style, as you can see, I can
get what selected.
Let's change this to plain.
If I run it again now, I have the plane, which is exactly what we need.
So let's just copy this.
So we are doing this step by step and you will see how easy it is to solve something like this as long
as we do it like this.
So now let's see how we can get stuff inside here.
So we have an element with an idea of color.
So inside this color element, we can see that we have two elements that share the same class.
So the class they both share is called option button.
So we need to use this class.
And now we can see that the selected one also has a selected class.
So this is how we are going to get the element we want.
So let's go to the console again.
Let's try to do this now.
So we are going to use a class option button and we also want the one that has the selected class.
So by using the CSF selector here, we know that we can't use spaces.
So just put the dot right after the name of the class.
So this means that the element needs to have this class and also the selected class and these buttons
are inside.
So let's go back to the HDMI while they are inside the color element.
So this is the parent element.
So the way we are going to select this is like this.
So here we use a space because then it's a child element of the color element and then inside it we
need the option button that has the class of selected.
If we do this, we can see that we already selected this blue element.
So now what do we do with it?
Well, we can get its inner HTML if we want.
If we do like this, we can see that we just got.
The inner turmoil which we could use, of course, this has a capital ladder, so we would have to convert
it to lower case so you can use in that object.
But this is actually not the best thing we can do here.
This is where I told you that you would need to make some research if you wanted to do this by yourself.
So how can we select an element and then get the information of the I.D. attribute?
I'm not sure if we talked about this already, but if not, this is pretty simple to find out how to
do so.
If you just go to Google and search for Jay Querrey, get idea of element.
As you can see.
If you're going to explain what you want to do, you will always have the answers in the first result
of the search results.
So if we go inside here.
We can see that this is pretty simple to do.
We just need to use the 8R method and pass the ID.
So let's try this out.
Again, we know that we already selected this element, so now if we apply the attribute.
Method, and we want to get its idea, if we do this, we can see that we have exactly what we need
to go inside that object.
So this is how we are going to get the selected option for the color.
So let's copy this.
And this is going to be very similar for this one, but this one instead of color, this is going to
be inside quality.
So let's try it out.
Let me go back to the console now, this time.
I'm going to go inside the quality element and I'm just going to do the same thing, so get the option
button that has a class of selected and I'm going to try to get its ID.
So by doing this, we can see that we have Q one 50, which is the basic quality.
So let's copy this.
So by doing this, we were able to get the selected values of those filters.
Now what we need to do is updating our search parameters variable.
You don't have to use this if you don't want to.
But I think it's a good idea to have all the filter values just centralize in one variable, because
this way our code is going to be more organized.
So now what we need to do is just update these values.
So the variable is search parameters.
So, like I said, instead of start writing the code just inside the ready event, it's better to create
a function.
So the first function we're going to create is to update the parameters.
So let's create a function and let's call it up date.
Forams.
So what our function is going to do is just.
Update each of those values, so we have quantity, color, quality and style.
So let's just copy this.
Quantity.
Colour, quality and style, so.
Color.
Quality and.
Style, so now we know that to get the quantity, we just need to use this.
For the color, here it is.
This is for the quality.
And.
This is for the style.
So now we have a function that we can run on page load, so right down here, when the page loads,
we can just execute this function by doing this.
And we can also run it every time a filter changes.
So this is why it's a good idea to create a function so we don't have to repeat this code.
So to see if this is working, not only we're going to update this variable, but we are also going
to send it to the council so we can see it.
So after updating all the properties, let's send this to the council and let's see what happens on
page load.
So going back there, I'm already at the console.
I'm just going to load the page again.
So as you can see, we started with some interesting stuff here, so inside our search parameters variable,
we have the selected values for the filters.
So we have colored, which is exactly what selected here.
We have the cube one fifty, which is the basic quality.
We have the quantity and we have the style which is printed.
So we already made some progress.
Now, the next thing we need to do is just getting this information and start updating the order details
down here.
This is what we're going to start doing in the next lesson.
I'll see you then.