Hey, welcome back.
This is the final section wrap up, I'm going to do a quick code review and we'll talk a little bit
about objects and object oriented programming.
So first thing that we did when we came in, we developed and we created a bunch of JavaScript objects
because we wanted a visual application and we didn't have anything within our HTML.
And also we want to practice JavaScript.
Why not?
Right.
So we created a bunch of these and this was all of the visuals here that we see on the page.
Also added in the event listeners.
And then we also constructed an object that we could use in order to add items into our items array
because by starting and default, we don't have anything listed.
So we needed a way to have some of these items.
And we also have a way to add in items manually here by pressing the button.
And that adds that into the items array.
So each one of these items we can get the cost, the name, the shipping, how much it is with the tax.
So all of this was from an object.
And the nice thing about using objects in this type of format is that they're all going to have the
same construction.
So in case we want to update the shipping, we don't have to worry about where the object is being created.
All we have to do is each one of these items objects.
As they get created, we can add in shipping, we can add in tax and any other methods that we need
in order to make some calculations on this object.
And it all fits together because this is information that we might want or need or might want to use
in our application for this particular item so we can get the name, we can get the cost, and then
we also get information associated with it that can get calculated out.
So using that, we constructed a bunch of items and we also have a visual representation of the items
that we're adding.
So whenever we're adding an item to the page, what we're doing is we're getting all this information,
we're constructing the object here, a temp item, and then we're pushing it into that items array.
And then we're also constructing it visually or creating a div outputting, creating the HTML, making
some styling and adding an event listener.
So whenever it gets clicked, then we can use the name and value that we picked up from the input and
we can send that over to the cart in order to add it in.
So CART as well as an object that we constructed so we can create multiple carts and they're all going
to have the same functionality, but they can all work independently so we can add items into multiple
carts if needed.
And then we've got that output as well that we can calculate and we can visually see the output.
And that's whenever we make any selection of the items, we're going to see that that output gets visually
represented on the page.
So this is all coming from the object that we're constructing.
We also added, of course, onto the page.
So it's visible and clear out the inputs and then going into the cart object.
So this is one of the most important parts of this lesson or the previous lessons is creating the cart.
So within the cart itself, we've got our own object list.
So the my list is where all the objects are going to sit.
We've got a couple methods here.
So one method outputs the list into the console so we can always see whatever the contents of cart is.
So if we take a cart and if we want to list it out, we can always do Lyster and we can see whatever
is currently being contained within the cart.
We can also get the total cost and we added in a button that can do the same thing, that essentially
just runs this method.
So what we do is we loop through all of the current items within the cart, the mildest object, and
we do the subtotal.
And as we can see within the list itself, we've got the name price quantity and we're doing the subtotal
here.
And the subtotal is taking the quantity and multiplying it by the price.
And it's producing a value and that's where the subtotal comes in.
So at any point, if we need the subtotal for that particular item within the cart, we can always reference
that.
And so what we're doing is we're taking the subtotal, we're adding it to the total, outputting it
for the user.
So the same thing for the total as well.
And then there's the output part here.
So this is just putting it visually.
So that's the only real difference between the two that we're out putting it more visually for the user.
We've got the Adir and this is where we're using objects and JavaScript once again.
And instead of using the dot notation, we're using the bracket notation because this is dynamic.
So we're taking the item, we're turning it into lowercase.
And this is dependent on all the items only being one word.
We don't want to have spaces in the items.
Then you'd have to clean that up a little bit more.
And so we're using these by default and that gives us the ability to check, to see that we only have
it unique.
So we only have one milk in there, one test in there.
If we try to add another one, we're going to see that it's already existing and all we have to.
Do is update the quantity so we don't have to update any of these and we don't have to create a new
one.
That's the nice thing about objects.
And you can use them in a number of different ways to really fine tune and do some amazing functionality
as needed.
So all of this is what we've gone through in the earlier lessons.
And I hope you did have an opportunity to try this code out.
If you have any questions or comments I'm always happy to help with in the Q&A section, providing clarity
and also adding additional content if needed or if you want to just let me know what you're working
on or if you have got suggestions for course improvements.
I'm always happy to hear from you.
Thanks again for taking the course and I'll see you next time.