Hey, great job making it this far.
Now we need to add in an event listener, so whenever the user clicks one of those objects that we just
created on the page, then it gets added into a cart.
So that also means that we need to create that cart and updating the quantities we need to check to
see what the quantity is.
So there's quite a few things that we're going to do in this lesson.
So let's add that in.
So first of all, let's create a cart.
We can just create a blank cart object and then we can use this in order to contain our cart information.
So this is where we're going to deposit all of the items that are going into the cart as objects within
this cart.
And we also need a way, of course, to make that deposit, and that's adding an event listener.
So to all of the device that we just create, adding an event listener, the event that we're listening
for is going to be a click and we can have the function here or we could send it to a function.
So just do it as an anonymous function for now.
And I want to select all of those names of those items within the elements, so we've got the item,
element, item and change those to lowercase.
So I just give it a temporary variable here called Nemer, getting the element and item and using JavaScript
to lowercase in order to transform that content into a lowercase format.
And we're going to use that, of course, within our cart in order to add those in.
So console log that out.
And this is going to be a kind of a really neat thing that you can do with objects where you can make
sure that you're adding in only unique items.
So whenever I click, you see that we're getting that item being shown there.
I'm also going to comment this one out as we don't need it anymore.
So now whenever I click, we get that value being added in and being, well, not added in, but it's
just being represented there when we click it.
We can use the item names, milk, apple, butter and add that into the cart.
So taking the cart and using the bracket notation and using Nemer, we're going to add that in to the
cart and we're going to add it in as an object as well, because, of course, we do want to practice
working with objects.
So we've got the name.
So element item that's the name of the objects.
The price of these is going to be element cost.
And of course, they're all going to be the same, are going to show you a really neat trick with quantity.
So quantity will start out as one.
And we can also add in methods as well.
So subtotal or we can do a function and maybe we want to take the return, taking whatever the prices
and then multiplying it by the quantity.
So I think we're ready to try that.
So whenever we're adding these, I can say we've added a bunch of stuff.
We can take a cart and you can see it's been added into the cart as those objects.
And of course, the quantities are always still going to be one right now.
So it doesn't matter how many I add in.
And this is where the trick comes in.
And actually, it's not really a trick.
It's not a magic trick.
It's just the way that JavaScript works and the way that objects worked.
So this is a great example of why objects are amazing.
So we're going to add in a condition here and checking to see if this cart namur exists.
And if it doesn't exist, then we create it.
And if it does exist, then all we have to do is update the quantity.
And that's the nice thing about it.
So if it already exists, then we can take the cart nemer and all we have to do is update that quantity.
So let's update our quantity and add one to it.
So now if we've got bread and we click bread a bunch of times and butter a bunch of times and we output
what's contained within our cart, we only still have bread, we only still have butter.
But when we open up the quantity we see we've got quantity of six.
So if I was to do cart bread and remember, we created that subtotal method, which is pretty cool.
If we do that method, it's going to be a cost of twelve because we know that the bread itself has a
price of two and a quantity of six.
So two times six is twelve.
And that's where we can really start using these objects in a really nice, amazing way in order to
represent those objects and the values they're contained within the objects.
And this provides us so much flexibility when we're using and creating with these.
So there's one other thing that we do want to do, and that's output those values.
So we don't always have to use the console.
And in case we've got someone that's not a programmer, not familiar with the console, they want to
use our amazing application.
Let's output that and output that into the visible area.
So that is all still yet to come.
Go ahead and add the ability to check, to make sure that we've got the quantity and updating those
quantities, checking to see if the already exists, if the name exists and then updating the quantity.
If it doesn't and if it already if it doesn't exist, then create that first initial object.
So go ahead, try that out.
And coming up, we're going to do the finalizing of the solution.
We're going to list out the content on the page and that's going to be using list and looping through
all of the objects that we've got contained within the cart and then just visually outputting them.
So that's all still yet to come in the next lesson.