Hey, let's do the output so we've got a total cost that we want might want to output, so creating
another method within the object, we can call it total costs and equal to anonymous function.
And then within this function, we can work out what the total cost is.
So creating value for total setting it at zero.
So we did a little bit of this before where we looked through all of the items within the object.
In this case, it's going to be the my list.
We're looping through all of those items within that object and we're getting all of the names from
them.
And then we can create and get some totals because we already have this.
Remember, this is already an existing method within that list, pro and subtotal.
And now all we need to do is take total and we need to just add in whatever the value of subtotal is
and then return back, whatever the value of total is.
So we can try that.
So now we've got another option there for total.
And actually let's add in another button in order so that we can output that total so I can show you
how you can get the total by having a button and grabbing the button.
So this one is going to be another button that we can call.
We can just call it out button or something like that.
This is going to be calculating the total.
So that out button is just going to get the total and I'll just write total and adding an event listener
to out button and then we're going to spend that to the output.
So we'll have it within the display area.
And we don't necessarily need to have a separate function for this.
We can just have an anonymous function that's going to sit in here and taking that cart object.
And then we've got going back in just to make sure that I've got the it's the total cost that we're
going to output.
So we're going to calculate the total cost and set this into a variable and then we'll output that variable
into the console.
So let's try that.
And total right now is zero.
Total is 15, because we've got three milks in there.
And maybe this is a really expensive who knows what.
So now every time we can add those into the list are total, is mind bogglingly large.
So that's how we can create and utilize the methods within the object in order really to kind of get
quite a bit of power out into our content.
So lastly, we also had one more that we wanted to do, and that's output that total.
They're constantly out into the visible area.
So this is going to be relatively the same as what we just did with Total.
So we can kind of copy this one and do pretty much the same thing.
Except this time we're outputting the cart contents.
So starting out with total and we're going to use that output area that we created.
So the output one getting the inner HTML, we're going to just clear that up.
So those are two double quotes together and then the subtotal is going to work the same way and then
updating that output one and inner HTML.
We'll just set the entire HTML directly within this and using the tactics.
So whatever we want that in our TEMEL to be.
Let's say for instance, we've got my list and if we want to shorten this as well, I can call it L'il
or something like that.
So we've got my list and whatever the value of pro is and this is going to be the element that we're
looking at.
So within that object, within the list object.
So this is the list that's sitting within the cart and that's what we've got access to it.
So whatever, whenever we want to utilize that we can do is to L and name just to keep things a little
bit shorter and we'll try to do the same thing that we had last time where we've got the price and I'll
have a big X this time and we're going to multiply it by the quantity of the items and then equal that
to and I'm running out of space, but let's try to squeeze that one in.
So whatever the subtotal is and we'll do a line break there so we can separate them all instead of returning
total, we're going to just add total in at the end there.
So that can be whatever we want to call it.
For instance, we want to call it final total, final total.
And this is where we can output.
So now we've got a way to output and we should be running this output every time there's an update on
it.
Every time we add to the cart, we want to run the cart output and we can do that as we're clicking
the button and adding items.
So we're we've got the cart, Lyster, instead of the Lyster.
Let's the output.
So looks like we're ready to try it.
So refresh.
And now whenever we we can get the total, we can also click.
And the more stuff we add into the cart, the more it goes up.
So test and maybe this one is fifty five bucks.
And let's add in some real items.
And so if we have bread, we have test and we can see that the totals updating, our bread counters
updating.
So this is the price, this is the item, this is the price.
And then this is the quantity.
That's the subtotal that we're getting from the object.
And this is the final total will continue to increment as we select more items.
And we're very flexible in adding items whenever if we just want to get the total, we can press the
total button.
So there's a lot of functionality that's available to us and we could just simply have to add that into
the object.
And if we do have any changes, it's really easy to make these changes into the object.
So let's say again, for instance, we did want to have bolded we could build the text really easily
and we can update the format.
We can add in additional methods, all of this as needed.
So coming up next, we'll do a final code review, wrap up the section.