Hey, everyone, welcome to a news section.
We're now going to start a very exciting project, which is this online quotation of t shirts.
So let me show you how this works when we change anything here in these filters.
So let me change the color to white.
As you can see, we have the product photo updated and now the pricing and basic information about the
order.
So the photo is actually a combination of color and style.
So here I have white printed.
Let me try white plain.
So as you can see, it's a different photo.
Let me try colored.
So now it's colored plain.
Let me try color printed.
So these two filters, they make the combination for the photo that should appear here and the other
filters, they will just affect the price.
So if I change the quality to high, as you can see, this is a little more expensive if I change the
quantity here.
So let's change it to one hundred.
Now, as you can see, we are updating all the information and the price down here.
This should be pretty simple to do.
We just need to inspect these elements and understand how can we get these informations and how can
we use this to update the price actually to form the price and then to update these elements before
we go ahead.
Let's go to Visual Studio to see what do we have to get started with.
So here we have the project.
We have the HTML file where you can see all the elements we have on that page.
If you want to check the IDs and classes of elements, you can just come here and here.
We have the scripts that JS file and inside it we can see that we have this variable called products.
So this is how we are going to calculate the final price of the order.
So here inside this object, we have a property called white and one called colored.
So inside here we have prices for the white t shirt.
So we have a plane and a printed style inside plane and printed.
We have the unit price and the link for the photo.
Same thing for colored.
So this is how we are going to calculate the price and get the right photo.
Down here, we have a variable called search parameters in which we are going to use.
To store everything that's selected in the theaters and in that quantity input field, so every time
something changes on those filters, we're going to update this variable and then run a function to
calculate the price.
So going down here, we have some additional pricing rules, the first one is the prices above are for
basic quality.
Q one 50, the high quality shirt has a 12 percent increase in the unit price.
So going back to the page.
We can see that the quality is not inside that object, so what we need to do is just increasing the
price in 12 percent if high is selected.
The second rule is applied the following this counts for higher quantities, so if the person wants
to order more than a thousand units, we're going to give a 20 percent discount in the total price above
five hundred units, 12 percent and above a hundred units, five percent discount.
So these are the information that we need to start working down here.
You can see the place for the solution.
So as you know, this is the ready event in January.
So everything we write inside here is going to be executed when the page is fully loaded and ready.
So as you can see, this is blank.
So we are going to start from the absolute beginning.
You can download all these files right below the name of this lesson in the right hand panel.
So just download the zip file.
Then, as usual, you can just go to open folder and then you can open the folder.
I just saved the last t shirts, so if you open it, you have exactly the same thing I have here.
So let me just open the starting project, which is this one.
So as you can see, nothing is working here.
If I click on the filters, nothing happens.
We don't have the updated price.
So this is exactly what we need to do.
We need to put this page to work following the rules we have in that JS file.
If you want to try to do this by yourself, just go ahead.
I think this is a very good opportunity to practice what you know about JavaScript and Jake Querrey.
Some parts might be a bit hard because you need some tricks that we haven't talked about yet.
But still, you can make some research and try to solve this by yourself.
If you have any questions, you can always come to me, use the Q&A section and I will help you out.
To be honest, the times in my life where I learned the most was when I was trying to do something like
this, something that was above what I knew at the time.
I remember some situations where I did some code challenges to try to get hired by companies and they
just asked for stuff that I didn't know.
I didn't even know how to get started.
But those were great opportunities for me to learn.
So I encourage you to do this and I know this is going to be very good for you.
So having said that, now it's time to move on.
Let's start working on this.
So if you want to do this by yourself, just go ahead.
If you want to do this with me in the next video, I'm going to start solving this challenge.
So I'll see you then.