Hey, everyone, we are pretty much done with our project and now we just need to format the price and
then activate that yellow spinner loader.
So let's start with the price.
So let's change the quantity to 100.
And as we've seen, if we do this, we have a lot of decimal places.
Now, let's try a thousand, maybe a thousand and two.
And as you can see now, we don't have the thousand separators and we have a lot of decimal places,
which is not good.
So let's go to Visual Studio Code and see what we can do to make this better.
So here we are, just returning the total.
Which is a float, no, we do all the calculations and we are not doing any formatting, so the first
thing we could do here is just apply the two fixed method.
Which is going to round to a given number of decimal places in this case, we just want to round to
two decimal places.
So if we do this, let's go back there and let's try again.
Going to change it to 100.
And now, as you can see, this is much, much better, but if we use one hundred and two again, let's
see now this is much better, but still I'm missing the thousand separator here.
So the way we can do this, there's a better method for this, which is called to local string.
So let's search for this.
So just to look at string.
And we wanted for currency.
So let's go to the Yewtree schools.
Let's go down here.
So, as you can see, we have some parameters that we can pass in this method, so as you can see,
we can choose the option as currency.
Which is going to do exactly what we need, so down here we have an example here, we need to pass the
format we want.
In this case, let's use English, us and for the options, we're going to use style currency and the
currency is actually going to be US dollars.
So just by using this style, it's going to automatically round to two decimal places and include a
thousand separators we want.
So let's copy all this and let's bring it to visual record so we can use what we need.
Just like this, so now, instead of using the two fixed, we are going to use the two local string.
So let's replace it here.
And now, instead of Great Britain, we are going to use English us, and here we don't need to create
a variable for this, we can just pass the options since we are not using a lot of options, we can
just do it like this.
So this is how we use this method.
Let me just erase everything down here.
So, again, we are passing two parameters, the first one is a string with the language, so in this
case it's English US.
The second one is an object that we can pass a few options.
One of the options is the style.
So we are actually working with a currency.
So the style is currency and the currency is not euro, but USD.
If you want, you can research more about this method.
You can just copy this and search on Google and then you will see all the options you have for this
argument, all the options you have for this object.
For now, I know that this is what we need.
So if we do this, let's try again.
Refresh the page.
And now this is much better, but now we don't need this dollar sign here because we already have,
because since we are using currency as the option, this is going to come with the currency sign already.
And this is cool because if we were working with another currency like euro, so let's try changing
it back to euro here.
Refreshing the page, as you can see, it already comes with the symbol, which is cool, but in this
case it's just showing twice.
So what we need to do is just going to the age tml where we have the price.
Here it is.
What I'm going to do is removing the space and removing this symbol.
So now let's see how it shows.
OK, so this is better, let's try now 100 so as you can see, pretty cool, two decimal places.
Let's try.
A thousand and one.
And now we have the thousand separator, we have two decimal places.
Let's try to increase this quantity.
One more zero.
And now, as you can see, we have two thousand separators and the two decimal places, which is exactly
what we needed here, so the price formatting is done.
And now for the yellow loader, if we go back to the elements and we go up here, you will see that
we have an element with a class of refresh loader that has the display of none.
If I remove this, we can see the loader here and I'm going to select this box again.
And now it's not showing anymore.
So the only thing we need to do is hiding and showing.
And you can use Jan for this.
So let's just copy this and going back to Visual Studio, to our scripts, not just so every time we
are going to update the order details, what we can do is before we start doing it.
We can just show the element.
And by the end of it, we can just hide the element.
So let's save this, let's see if we can see the loader, so I'm going to change it now, we can't see
it because this is actually happening too fast.
OK, in the example I showed you, I just used a sad time out just to delayed a little bit.
And in a real life situation, we wouldn't need this because in order to get the price, probably you
would be calling a server to get that price.
So this process would take around half a second or one second and you would actually be able to see
that loader.
So things are happening so fast in our page that we can't even see it.
If you want to simulate a delay, of course, in a real life situation, never do this.
You shouldn't delay anything in our page.
It should be as fast as possible.
But just for our example, if you want to simulate a delay to get the information, you can just do
a set time out.
So window.
That set time out.
And then we need a function.
And the time let's delay half a second, so five hundred millisecond.
So after half a second, then we hide the refresh loader.
Let's see if now we can see it refreshing the page.
And as you can see now we are seeing it.
I'm just going to close the console.
I'm going to click here.
And now we are seeing it for half a second, which is cool.
So everything seems to be working in our project.
Let's keep changing the values a little bit so we can test, let's change it to plan.
So everything seems to be working really well.
Now, before we finish, let's just make a quick test with the calculator to see if the numbers are
accurate.
So in this case, we have a white plain shirt.
So let's go back to that object.
So here we have white plain shirt.
So the price should be five point twelve.
So let's go back to the page.
Let's open the calculator here.
So five point twelve.
We are ordering 1000.
So now we still have to apply the discount, we don't have to increase the price because we are not
choosing the high quality one.
But we need a discount for a thousand units.
So in this case, the discount for a thousand units is 20 percent.
So if we multiply this by point.
Eight, we are going to have 20 percent discount, so this should be the total, which seems to be accurate.
Let's make another test.
Let's try six hundred.
Colored.
And high quality.
So collared plain.
Humorous colored plane.
So this is the unit price.
So six 04, we are ordering six hundred, so here it is now, since we are asking for the high quality,
let's go back there.
If we ask for the high quality, we have a 12 percent increase.
So let's multiply this by one point twelve.
All right.
But we are ordering six hundred, so we have a discount here.
So 600 units, we don't have the 20 percent discount, but we have the 12 percent discount.
So.
Multiply this by point eighty eight to give a 12 percent discount, and this should be the total price.
So the calculations seem to be correct.
So that's it.
We are done with this project.
I hope you like that.
If you try to do it on your own and you had some trouble and now you just watch the solution, I suggest
you just erase everything and try to do it again.
Trust me, I know it's a lot of work to do this, but this is going to be very good for you.
These things that we did, getting IDs and selecting aliments dynamically, this is something very important
that you are going to have to do many, many times in your career as a web developer.
If you have any questions, any doubts about this project, you can leave in the Q&A section and I will
help you out.
So that was all for this section.
I'll see you soon.