Within this lesson, we're going to be adding items into our items array that we established earlier.
So we've got a match in order to add items whenever we click the button.
It's going to run this function and that gives us the ability to run at item.
So going down into add item, let's create some code in order to run.
So we need to get temporary name of the item that we're adding and we can use the content that's contained
within item input, one, getting the value.
And if there's no value, then we can add in and just call it test one.
So that can be if there's nothing there and then temp value.
So this is the cost per item and using the item input value to or if there's nothing there, then we'll
just set it to one.
Let's create our item constructing function and we can call this item.
It's going to take in two parameters, name and cost, and this is what we're going to use in order
to construct the item.
So using this and setting it to name and then this cost, we're going to set it to whatever the cost
is that's being passed in.
And we can also add in a few methods if one or two.
So let's set one up with tax.
We've got an anonymous function and this function is going to return a calculation.
So taking this cost, multiplying it by one point one five.
So that's roughly around, I guess, what our tax rate is and to fixed so that we always return back
to decimal places, so it returns back as a number.
And also, let's add in one more where we've got maybe we want it to calculate shipping on that item.
So if we needed to get any of the shipping information on that item, we can do that as well, where
we can return back and using this cost again, let's multiply that by one point zero five and using
two fixed in order to make it look like a number.
So now every time, whenever we need to create an item, we can create that item.
So you're saying let's have a temp item holder for this and new item and we need to pass in those values.
So we've got the temp name and temp value that we're passing in.
So that's going to allow us to construct the item and then using that items array that we set up in
the earlier lesson, the previous lesson, we're going to simply push the item into that array.
So what this is going to do is this is going to give us an array of all of the items and we can console
log out all of the contents of items as well so that we've got a lot of items going on.
So let's test this and do one where we test.
And it may be a test, too, and this one can be 10.
So now we've got two items in there and you can see we've got cost the name and we can get the calculating
of the shipping methods.
So let's say, for instance, we've got items and we'll select the second one there and then we've got
access to all of that object information so we can get its name if we want.
We can get its cost if we need, as well as we can get some calculations.
So if we wanted to figure out what the shipping on it is, if we want to figure out with tax how much
it's going to be and we can use these again, constructing the object, depending on what the scenario
is, you may or may not need to do it this way.
And in this case, this is a great way to build up that array of all the items.
And then if you do need to reference these, you can reference them from the items as they're being
created.
But for the purposes of this lesson, we do want to output them on the page.
So let's complete that construction of it where we'll set up a div and this is going to be the device.
So it's visible on the page and using concrete elements.
So creating a do and let's add some inner HTML, some inner content into there.
So using the template literals, I'm going to wrap it in an H3 that stands out a little bit.
Then within here we're just going to put whatever the template, temporary name is of the element and
then we'll also put a price.
So that's the dollar sign for the value and then temp cost or temp value.
So that's the inner HTML of the div.
We also want to add in some styling to that as well.
So you don't have to do this.
You could do it with regular CSFs depending on, again, how you're applying this.
And of course this is a JavaScript course.
So I do want to really focus on doing everything as much as possible with JavaScript.
So updating their display properties and we'll set this one to inline block, also div and style.
And I believe the last one that we did, we also had it at one hundred pics.
So let's do the same thing.
And then lastly, let's also add our event listener.
So the event that we're listening for is a click and whenever the click gets whenever it gets clicked,
then let's create a function and we'll call it Cartney.
So we'll add it to the cart.
And of course, I do need to make this function.
CARTNEY And this is going to pass in the event object and I'll console log out that event object.
So this is.
Audit visibly on the page so that we can make use of the content and we're also going to add that in
within the d'Hiv and because this is an object we can pass in the name so we can have the temporary
name within the object if we need to use it, if we need to reference it in any way.
And also I'm going to add the value in case we want to get it from the element object.
You can store all of that information within the element.
So that's going to be visible on the page.
But this stuff is going to be kind of hidden behind the scenes within the object.
And then lastly, let's take our document body and append child.
And the child that we're pending is the div that we just created.
And then I take the input value and send it to blank.
So zero these out and then input item input to value and also set that to be blank.
So let's try that.
So now we can add in an item and have a cost to it and we can see it gets shown on the page when we
click it, we're picking up the event so everything looks good to go.
And we'll also set it up so that we can add in some default items whenever the page loads so that we
do have something as a default there.
So let's do that really quickly.
So using the window onload whenever the window loads, we're going to run the function and this function
is going to update that input one value to milk and item input to value.
So whatever the cost of the milk is, but we set up to five and then we're just going to run that function
at.
So that when we refresh the page.
So that means that gives us the milk button automatically.
And you can add a few other ones as well by default if you want to add this into your project.
So now you've got the ability to construct an item as well as adding items into the cart.
So we're going to do that in the upcoming lesson and then building out the visible elements and having
some to start out with.
So you could add as many as you want and they're all going to function the same way.