Great job on making it this far into the course, so you knew this was coming that we're going to take
that shopping cart that we constructed earlier and using just regular objects and we're going to use
our new object oriented approach in order to recreate that shopping cart and have the same functionality
and maybe a little bit more.
So create the elements to input.
And we're going to also have the option to input and add items, as you can see here.
And the example, we've got input fields here.
So input item, name, cost, add item and then also output cart so we can list out all of the cart
information.
And this will also happen automatically as we add new items.
So adding in the same event listeners as we did in the earlier project, creating objects for the items.
So each one of these items, as we add them in, they're going to be brand new items that are going
to be objects.
So we're going to use our constructor in order to create these adding in shipping and tax.
So we saw that how subtotal work.
We're also going to add in shipping tax, whatever we want within the item, and we can make it really
flexible.
So creating that cart object.
So this is the same cart object that we saw earlier, while not the same little bit different, a little
bit better, depending on how you look at it, creating an adder method.
So the ability to add items into the cart.
So whenever we click again, we add that item into the cart and then we see the total being output here.
So the subtotal total and so on.
So we're creating all those cart output items and then set up some default items here so that we don't
start with just an empty store.
We're going to have some default items to start with.
So all of that is going to be presented in the upcoming set of lessons where we're going to be building
this project from scratch.
You can go ahead and you can pause the video and try this.
And then as we work through the different lessons, you can add in the additional parts to it as well.
So go ahead, pause the video, try it out.
I'll walk you through the solution coming up.
So, first of all, let's set up all of our visuals and creating our output area, using the document
great elements.
And the element that we're creating is going to be a diff then document body pend child, and then let's
spend that newly created diff.
So this is where we can add our output.
We're also going to need another output area.
So call this one, call it output one.
And this is where our list is going to be listed out and this one as well as another diff and document.
And right now it's going to be all empty because we are creating these as kind of placeholders so that
we can add content into them later on.
We need a few different areas as well, where we need some input areas.
So we need an item input.
So item input, one where we've got the name of the item.
So using document, create elements and we're creating an input.
Let's add some different properties to there.
So the input, one setting of attribute and the attribute that we can set is type and it can be type
of text item input and another attribute that we want want to set to it.
So this is just going to be the placeholder so that we know what we're expecting, what type of input
we're expecting.
And this is item name.
So we're not out any labels or any additional content and we can add this to the output.
So we can we could also call this container as well.
So append child and adding in the item input.
And let's do that one more time for another input, because for each one of these items, we're going
to also need a value, a number value.
So I put two and of type text.
This one can be number and input two and we'll have a placeholder as well.
So just put cost and then appending the child of input to.
So it gives us are two inputs.
We also need a way to kind of trigger that, adding that object.
So let's create one more and this one can be item, button and same format where we're creating an element.
And in this case, let's create a button element.
And I copy this because it's very similar to what we just did with inputs where we've got the item button
and we can't have any spaces in there.
So I always watch the spaces.
The spaces are one of the most common things that throw errors.
So instead of setting attributes, this one is just going to have text content, text content, and
it will just say add.
And then we're also adding an event listener to this one.
So that listener and that we're listening for is a click.
And if it gets clicked, then we'll add item and we'll take care of that function afterwards.
And of course, we're throwing an error because we don't have that function in place yet.
So let's create that.
And so now we're not throwing any errors.
Everything looks good.
So now we've got a way to kind of to add items in as well.
And we need to set up a few concepts.
So we've got all of our items.
We're going to create a whole list of that within the array as well as our cart.
And then our cart is actually going to be an object that we're going to construct.
So it's going to be using the cart constructor.
So let's set up that as a placeholder and we'll walk you through how to do that afterwards.
So again, this is going to be a function and notice that this one is upper case.
This one is going to be a function card.
So it's going to make them different.
Now we've got the all the placeholders, everything is in place and we're ready to set up the adding
of items.
So that's coming up next.