Nice work, we're done with feature products, we can display them nicely.
Now let's talk about these funny looking numbers, why the price is in cents.
And there's two reasons for that.
First, when we talk about payment processors, they will be looking for the smallest unit of currency.
For example, if I'm selling in dollars, they will be looking for a price in cents, for example.
So we'll have to convert it at the end of the day anyway.
That's number one.
Number two, we also need to keep in mind that in our application we've got a card and in that card
we have a bunch of calculations.
And the tricky thing about JavaScript, when we talk about decimals, we need to understand that once
in a while we get some weird bugs.
And the last thing you want with real money is to have some kind of bug.
So it is much more easier if everything is incents.
So we have whole numbers and then we for sure know that all the questions we're doing are going to be
exactly like we wanted to, because trust me, when it comes to real money, you rather take precaution
because it's not a strength.
If I have some error with the title, I can live with that.
But one dot, left or right, makes a whole lot of difference.
OK, so that's why when you talk about money, you want to set up your prices in that smallest unit
because the payment processor is going to be looking for that.
And because with JavaScript, you know that you can sleep good at night since you know that they're
not going to be any weird bugs.
Now, of course, the downside of that is that everywhere where you want to display, you'll have to
do a little bit of work.
Now, to me, that is a small price to pay.
I rather deal with some kind of format, function or just format manually each and every time.
But at least I know that once the application is ready to go, I'm not going to get a angry email that
says that, hey, listen, you know, now we send out the product for, I don't know, forty dollars.
And actually they cost four thousand.
So how does that work?
Well, the simple solution would be like this.
We know that one dollar is one hundred percent correct.
And what we simply can do is just divide by one hundred.
So of course now my price is in cents and I just simply divide my price by 100 and I'll get the dollar
value.
For example, this very stable cost, one thousand two hundred nine dollars.
And technically it works.
But there's a better solution because in JavaScript there is a built in method and the method name is
international number format.
That's why if you take a look at the imports, we've got this format price and it's coming from utils
and of course the filename is helper's, so why don't we navigate there and work on this function?
So first I'll start by removing the dollar sign because you'll see how it nicely adds it by default
and I'll just pass in the price in the format price.
So set up a function that we'll use all throughout our project every time we want to display the price
nicely to the user.
So we've got format price.
That's the name of the function and we pass in the price again the moment nothing is coming back.
That's why we don't see anything.
So now let's navigate to utils and then we have helper's an hour.
That's my function.
Now of course we just need to set up the functionality so I know I'll be passing in some kind of number.
That is going to be my price.
So I'm saying here.
Yeah.
Price in the parameter then.
As far as the return.
Well I guess let's start with simply returning a number and let's do a little bit of console logging
just so we all are on the same page.
Like I said, the object is international.
And the property or the method I guess we're looking for is no format.
So for now, I'm just going to say const and then new number.
And that one will be equal to, like I said, international plus one.
And then we've got a dot and then no format.
And in this method, the first argument is the locale.
And of course I'm going to go with English and then U.S. So if you have different locale, just check
for appropriate values and then we pass in the object where will say style.
And in this case it is going to be a currency.
And the next thing is, what is the actual currency and in my case, it's going to be USD, so we pass
here USD and then once we set up this object, we get back a format function.
Now, in this case, we'll still have to divide this by a hundred, because if we simply pass format
and the number now, of course, I'll change my mind and I'll say that I would want to return a new
number from the function.
We're still not taking into account the fact that the price is incents.
That's why these numbers are so gigantic and we simply need to divide it by one hundred.
And of course, we have a proper value and notice how we nicely format.
Again, this is just to showcase to the user, well, what is the price?
I noticed it right away as the dollar signs and all that good stuff.
Now, when we talk about increasing, decreasing the items in a cart, as well as actually calculating
the totals, all of that is going to be happening in a sense, because those are round numbers.
Those are not decimals.
Like I just said, the reason why we're doing that is because we don't want some weird box.
But everywhere in our project where we would want to display the price, we'll use this form and function
for Matt Price and then we just return our price, whatever is nicely formatted.
And of course, we can do a bit of a shortcut where I can just say return on whatever value I'm returning
so I don't need to create this new variable.
Now, one thing that you want to do probably is just add new, and that's just going to make sure that
you follow the proper syntax.
So we create the new format and we naturally display whatever the price is.