Do you like shopping?
This is going to be the shopping cart challenge, it's going to simulate adding content into a shopping
cart and more about objects.
We're going to have a bunch of items that are available for sale within an object.
And it's going to be an array of an object with an array inside of it.
So multiple objects are all going to be contained within there.
We're going to output it on the page.
So what I want you to do for this challenge is to create an array with some of the typical things that
you'd find when you're going shopping so you can have milk, apple, bread, butter, whatever comes
to mind added in create those objects.
The need to have a name, they need to have a price, then go to JavaScript and use the JavaScript code
to loop through that object and output it on the page as div.
So using create elements in order to create those elements and then add an event listener to all of
those divs so that you have the ability to click them and call to a function and then updating and calling
to that function is going to add it into another array and then using that array.
So it's going to be your shopping cart and create a method that can contain that new object and then
also calculates the subtotal.
So, no, that was quite a bit to ask.
And we are going to work through this piece by piece so you can pause the video after each step and
try that for yourself.
So the first step is to create an array, contains all the items as objects that you want to sell within
your store.
So open up the editor.
It's first creating our object of items.
You can call it items.
And this is going to be an array that's going to contain a bunch of objects inside of it.
So send each one.
We just comma separate them.
And arrays can contain objects and strings and numbers as well as other arrays as well.
So for each one of these, we need an item name so we can give it a name and this one will be milk.
So we have something to display.
You can also put a cost if you want as well.
So the cost is no.
So just do it with a number there and then I can also add in Idiz.
So they're probably not going to be necessary, but you can add in yds as well.
So that's the structure of each one of the items that we're going to be containing within that array.
And next, we've got an apple, so I'm not sure how much an apple is.
Maybe one dollar.
Try to keep it simple, give it another different type of ID.
Next, we've got some bread that we're adding some bread and maybe the bread is two bucks and it's item
number two.
And you could add as many items as you feel necessary or as you want.
So the butter maybe is three and that's item number three.
So that's it.
So I think that's pretty good.
Let's refresh make sure we've got the items there that we can see and we can output so we can put them
into the console.
So now we can use JavaScript in order to create these items and put them on the page using the crate
element where we've got all of the items that are contained within this array and then using for each
we're going to iterate through that array.
So using the functions, anonymous function where you take that element information.
And what this will do is this will contain within l each one of the items.
So you can see it being output there within the console.
So that means that we can do something with that and I'm going to create a div and the div is document
create element so that we have something visible for the user and the element that is being created
as a div populate some information into this device.
So taking the div and using inner HTML, let's add some content, some of the element content within
it so we can do an H3.
So the name is going to be fairly big, the curly brackets there and elements and each one of these
has an item and then close off that H3 and then there's the cost amount.
So that's the dollar sign within the string and then the other ones, the dollar sign within to get
the element cost and then using the document body append child, we're going to pen those divs as they
get created.
So on the page and you can see milk, apple, bread, butter.
So they all got appended to the page.
Also, let's apply a little bit of styling.
And of course, this is JavaScript.
So we're going to do it within just using JavaScript.
So we're going to try to shy away from using any one of each HTML or CSR as much as possible.
So setting some border colors so that we can distinguish between them and then also going to set the
style of display property and set that to inline block.
So we've got them all aligned.
You can also add in a width as well if you want.
And of course if you want, you can make it look, I'm sure, way nicer than what I'm doing.
So this was just for.
Sake that we've got all of that being displayed out on the page, so that was the second part of the
challenge.
So go ahead, construct this.
So coming up next, we're going to continue to build out on this challenge, making these clickable
and then adding them into our cart.
So all of that is still yet to come.
All the exciting stuff is yet to come.