Welcome to my video on how to code a shopping cart using only Vanilla Java script on the right Here we have the final project of what we're going to code in this video.

We have these items that we have a button to add them to our cart.

And down here we have our card.

So if we click after card, it'll add an item to our cart and update the total price.

Increasing this quantity will also increase the price decrease in it would decrease the price and removing it.

While I was to remove the item from the cart, we try to add an item to the cart multiple times.

It'll tell us that we've already I did this item to our cart so we can't do it again.

And then if we click purchase down here, you'll tell us Thank you for the purchase and then remove all the items from our cart simulating a purchase.

So if you guys were just doing it on this video, all of the code for creating this styles for this page as well as the HTML could be found in videos link in the description or in the info cards in the corner.

So let's get started with actually coding up what we have here by opening up our store dot html page over here with life's river to see what we have started to get working with.

So very you see, we have the shopping cart items as well as we have some items.

Just template it into our shop for now.

But none of these buttons actually do anything, and change in these quantities doesn't update our total down here.

So we need to get started coding this with Java script.

In order to do this, we need to create a new file in our project and we'll just call it store dot Js, which stands for a job, a skirt file.

So the dot Js extension tells us that this is going to be a file with job description and then in order to include that file instead of our store dot html, we need to go into her head and include a script tag here and give it a source Attributes and this source attribute works exactly the same as a trough attributes for path or euro.

We add to it.

So we just say the path to are stored in the Js file here.

And then we end this tag and we do need an Indian tag in our grip tag, unlike the link tag, which is self closing.

And that's because you can actually put JavaScript inside of the script tags.

But it's always suggested to use a job's gonna file, as opposed to Java script inside of a script tag similar to using a style element as opposed to an external CSS style sheet.

Now, if we say that our styles from our jobs care from our store Digest is now being loaded into our page, but it's not actually doing anything because there's file's empty.

In order to see these changes, we can use council dot log, which will write anything that we put inside of here into the consul of our Web browser.

So if we just put here, save that and then over on our browser, if we right click and click on expect we can now view the council.

So in here you see it.

We wrote here to the council, which means that we're actually running all of the Java script inside of our store dodgy s.

We can change this to here to save it.

And now you see Here, too is out.

Put it to the council.

Now, before we get started, I do want to make a note that in our store dot html, we're loading our script tag inside of the head over html.

And this means that our script tag will load before all over content inside of her body.

In general, things inside of the head will load in the background while the body of your pages being voted.

But script tags are different and that while the script tag is being loaded, nothing else on the page can continue voting.

In order to get around this and make our script hag load in the background, we need to add the A sink attribute here, which tells our browser in order to download this store dot jazz page in the background and continue downloading the actual body of our HTML page at the same time.

Now let's jump into our store dot Js page and start coding up the actual interactivity for our website.

So inside here, the very first thing that we're going to want to do is make these remove buttons here, actually remove our item from our cart.

So the first thing we do is we need to select these, remove buttons and then add an event to them to say when this is clicked, do something so inside of our store dot html.

If we scroll down to the section for our cart right here, you see that we have this button danger class applied to all of our buttons.

So we want to select all of the buttons in our document that have this button danger class.

In order to do that, we're going to use the document object, which is an object that JavaScript gives to your page that essentially says this document object is everything inside of your HTML.

It has a bunch of methods on it for querying the different objects on your page as well as adding new objects to your page.

So we use this document object we're going to call the method on it, which will allow us to query elements based on class is sweet.

And I say give elements by class name and all we do inside of here is we passed the class name we want to query for.

So in our case, this is but in danger.

And this method right here is going to return all of the different elements on our page that have the class but danger.

We're just going to say that to a variable, and we'll say that these are the remove cart item buttons.

So now this variable remove cart item buttons, stores all the different buttons with this exact class on it.

In order to see that weaken, log this variable right here to the council.

And if you say that we see that we now have inside of this array to different buttons and if I highlight over them, you see that they get highlighted inside of the actual browser.

You see, the top one is highlighted and the bottom one is highlighted here, which is perfect.

That's exactly what we want.

So now we need to do is we need to add the exact event listeners to these in order to do something when we click on them.

To do this, we need to loop through these different objects.

So we're going to use a four loop will say, fourth variable hi equals zero.

So starting at zero, while I was going to be less than the length of the number of buttons we have.

So while I is less than the length the buttons we have and it will add one toe I every single time instead of our Luke.

So essentially all this code is saying is looped through all of the different buttons inside of our cart.

We'll create a variable here that will be the actual button.

So what's called well, said it equal to whichever element in the loop that we're in, because I will constantly be having one added to it each time we go through this already.

So we're going to select the other element of this array.

Set it to this button element here.

So now we can use button.

And since this button corresponds to one of our remove buttons over on the right here, all we have to do is say, button dot ad event listener, and this is how we add a listener to tell us when we click on a button, do something.

So in our case, we're going to listen for the click event, and when the click event happens, we want to run some code, so we'll create a function for that.

And for now, we're just gonna walk to the council.

I wouldn't say clicked, and if we save that, ever go click.

Now we click on a button.

You'll see that in the consulate logs that we clicked, and every time we click on it, it'll clog that and do for both our buttons.

That's perfect.

That's exactly what we want.

Now we need to do is make us this function well, actually, remove the cart item from our cart.

In order to do that, we need to take our function here.

And this event listener always returns an event object inside of the function that it calls.

And this event object has a property on it called Target, so we can say event dot target.

And this target is essentially whatever button we clicked on.

So we'll just use our variable here, and we'll say Button clicked is going to equal that.

So the button that we click is this event dot target, and what we want to do is we want to get the cart row that buttons inside.

So if we go to our store here we have our button object here.

The parent of it is this object.

And then the parent of that object is the entire row, which is what we want to remove from our cart.

So inside of here, we're going to use button clicked.

And we want to get the parent element, which is going to be this div right here.

That cart quantity did.

And then we want to get the parent of that in order to get the entire cart row.

So we stayed up parent element again.

And this is going to be the cart road that we want to completely remove.

So we'll just use the remove function.

I would go if we save that.

Now we click on this removed, but it will completely remove that item from the cart.

And there you go.

You see, it's completely remove that item from the cart.

If you click this one, it'll do the same thing.

But you noticed our total here is not actually mean updated.

So we didn't take write some code in order to update the total of our cart every time we remove an item from it in order to update the total of our cart.

Let's create a brand new function down here.

I was just going to call it update cart total.

Here we go.

And we can just call this function inside of our event.

Listener for a button, we could stay update carp total.

And now this will run all the code inside of this function when it's called.

So what we want to do in this update cart total function as you want to go through every single row in our card, we want to find the price and we want to multiply that by the quantity and then add that together for every single one of our rose and display it down here and our total.

The first thing that we want to do is we want to get all of our cart rose.

And if we look over in our store dot html, you'll see that all of our cart rose are inside of this cart items and they all have this cart road class.

So what we can do here is we can say we want to get our cart item container.

This will be equal to document get element by class, man like I said We want to get the elements that have the class name of cart item carte items.

Sorry, because that right here is what wraps all the rose inside of our cart.

But we on Lee want to get the very 1st 1 of this cart items because this get elements by class name returns, an array of elements and we only want one.

So orders going to select the very first element inside of that already as our cart item container and then inside of that cart item container.

We wanted to use the same method of getting the elements by class, man.

And we want to get all the different cart wrote elements.

So the elements that have the class cart row that are inside of this cart item container using this get elements by classmate method on an actual object will only get the elements inside of that object that have this different class.

Then we could just set that to a variable.

Would just say that this is our cart rose and now all we need to do is loop over all of these different cart rose very similarly to how we looked over all the buttons up here, so I'll just copy this code.

Hey, sit down here and change this to be cart roast.

Since we want to loop over our cart, Rose and then we'll just say credited a variable here.

That'll be our cart row, and we'll set that equal to whichever item we are inside of this array.

So what ever grow that we're currently on inside of this arrays what this cart row item will be And then all we need to do is get the price and the quantity for the row of this cart.

So if we go back to our story HTML, you can see that our kart price is inside of this object with the class of carte price.

So what we're going to do as we're going to create another very well, we'll call this one the price element and we'll set that equal to the cart row and we're going to get element by class name again.

And we want to use car price here in order to get that element that contains the car price.

And we just want the very 1st 1 again, just like we used with the cart items and now we need to the very next thing with the quantity and a quantity in here is this input element with the class of cart quantity input.

So we're going to do the very same thing to get a quantity of a mint.

We're gonna get it from the cart row, where the element has the class name of cart quantity, input.

And again, we only want the very 1st 1 So we'll just use that.

And now we have our price element and our quantity element.

And if we log these out to the council so we have price elements and a quantity element, if we save that and now when we removing elements, it will tell us Oh, here's our span for our price right here.

And here's the input.

And if we hover over them, you see that is returned all of the different price elements and quantity elements inside of the row, which is exactly what we want.

Now all we need to do is get the actual information from these elements because currently we have the element and not the information inside of it.

So we want to do is we want to get the price from the price elements that will say Price and we're going to set that equal to the price element.

And what we're gonna do is get the inner text from that element.

The text will just get whatever text is inside of that element so we can do here as we'll do another log to see what this is actually returning.

And when we click this remove button, you'll see that's returning this 9 99 which is the text inside of this price column, which is exactly what we want.

But you'll notice this 9 99 has a dollar sign in the beginning, and we want this to be a number without the dollar sign.

So what we need to do is we need to just do replace on this.

We want to replace all of the dollar signs inside of this string, and we were in place him with absolutely nothing.