初學者的JavaScript購物車教程 (JavaScript Shopping Cart Tutorial for Beginners)

字幕列表影片播放

Hello, everybody.
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.
So those were just completely remove the dollar sign from our string.
And then, since we want this to be a number and not a string, we need to use the parse float method, which will turn any string in tow afloat, which is essentially a number with decimal points after it.
There we go.
Now if we say that and do this remove again Obviously we now have 9 99 as a number without the dollar sign, which is exactly what we need in order to do math on this number.
The last step is to get the quantity from our quantity.
Elements were going to say quantity equals the quantity element and we want to get the value of the quantity on it.
Since this is an input element right here, you need to get the value property of it and not the in their text.
Because inputs do not have a text inside them, they have a value.
So we want to get the value here, which is going to correspond with this quantity number.
And now we can just say price times quantity we can bog.
That's now if we click remove here used to be at 1998 which is this price times this quantity and that's perfect.
Now the very last thing we have to do is set this value to whatever we get for the price and quantity.
And since this is inside of a loop we need a total all of these together.
So before I leave, let's create a variable will call a total and we're going to set this to zero to start with and then we want to add So total is going to equal total plus the price times the quantity and it will do that every time it goes through loop.
It'll add the previous total to the price times quantity of that row to give us the new total.
And then after our loop at the very end here, we want to actually get the element with the car total price.
So if we go over our story here, you'll see that we have this card total price class, which is where this price comes from.
So we'll just do document, die, get elements by a class name.
Give it that class car total price again.
We only want the very 1st 1 and then we want to do is we want to set the inter text of this element.
So we do in a text, we're going to set it equal to the total.
And now if we save that and we click remove, you said our total is updated to the actual quantity times price of everything inside of here.
But you'll notice there's no dollar sign.
So what we can do in here is we can use the dollar sign and then combine that with our total.
And now, if we save that and remove, you, see that now are total updates and is displayed correctly with the dollar sign in front of it.
Now, before we go further with actually creating the rest of our buttons, I do wanna make note of one thing that is particular which of a script that we need to make sure of before we actually start trying to access the different elements on our page.
We need to make sure that our page is done loading.
If you remember when we added this script tag, we added this a sink method here, which tells it that it will load in the background while the body of our element is loading.
But if the body of our page loads after the Java script, loads are JavaScript will run here, but there's nobody for it to run off of, which means it won't be able to find any of these different elements since they haven't been generated yet.
So in order to check to see if the pages done loading, we need to go to the very top of our jobs.
Get file here, and we need to add an if statement to check to see if the document and we're gonna check the ready state to see if it is still loading.
So if the document is still loading, which is what this statement saying we want to do is we want to add an event listener who are document very similarly to how we added an event listener tore button.
And we want to listen for the event dumb content loaded.
And you have to make sure that you have the capitalization correct for all of these different letters in order for this to work, and this event will fire as soon as the pages downloading so inside of here we just want to run a function.
And what does call that function ready?
And then if our page is already loaded, so if the pages loading, it'll run the code in here.
But if it's not loading, so if it's already done loading, we just want to run that ready function, no matter what, and then we can create that function.
We'll call it ready.
Here and inside of this function will do all the code for hooking up our buttons right here.
And that way, our code for hooking up the buttons will automatically work even if the page isn't already loaded because it will just wait for this event of the dom content loaded before it actually calls the ready function.
So now we know everything inside of here.
The pages already loaded.
When the code gets to this point, another thing we can do is we can clean up our code a little bit by creating a function, and we'll just call this function here will call it remove CART item, and this function will take all of the code, that is, instead of our event listener here for removing a cart button.
We'll add the event object in here and inside of our click right here.
We'll just put remove cart item.
So now, instead of having all the code for our function inside of the event, listener here were able to move it out here, so it's easy to tell what's going on in our code and easier to read.
And if we reload the page, you'll see that everything still works as before.
The next thing that we can work on is making it so that when we change the value inside of the quantity here that it will actually update our total.
Because, as you see, if I increase this number are total stays the same, and we can also input numbers bolos below zero, which we do not want to be able to do because we don't want someone to order negative 14 T shirts.
So what we're gonna do is we're gonna do something very similar to what we do with our card buttons here, but we're going to do it for a quantity input.
So let's go back to our store dot html page scroll down to our cart.
You see, we have this card quantity in book class on her input, which we can use to select a new element.
So we'll create another variable will call it our quantity inputs, and we'll set it equal to the document, get elements by class, man for that class, man, and then we'll just loop over them again.
Just like we did it with the remove car buttons.
So I'll copy that and use quantity input instead of our removal buttons.
And then he here, we'll set a variable input equal to whichever iteration of the loop that were on.
We'll get that element from the array.
So now this is going to be each one of our input that we're gonna have for quantity inputs right here and now all we need to do is take that input.
We need to add an event listener and inside of here we want to add the event listener change in order to listen to any time the input changes its value.
And then we're going to call a function, and we just call it a quantity changed.
Here we go.
And now what's create that function down here?
So we have a function quantity changed, and it will take that event variable that we talked about earlier.
And there we go.
Now we can actually coat up what we want to do when our quantity has changed.
So the first thing we need to do is get that quantity element.
So what is going to get that input here?
We're gonna set up to event dot target since we know that the target of our event is going to be the actual input element that we need, and then we want to check to see if the value inside of this input is a valid value.
So the first thing we want to check for is we're gonna check for if it's actually number, because if the person deletes it and clicks off, this is no longer number, so we can use the function is N A N, which dance for is not a number, and we can pass in our input that value in here, and this will check to see if our input is a number or if it's not a number, and we also want to make sure that our number is not a negative number.
We want to make sure that it is one or higher, because we always want people to order at least one of something.
You can't order a zero or negative one of anything so we can check to see if it's not a number or if the input value is less than or equal to zero, which means that they did put zero negative one negative to anything less than one inside of here we want to do is we want to set our quantity, our input value.
We want to set a toe one, since one is the lowest possible number we want somebody to be able to purchase an item of and that all we need to do after that is update the total inside of our cart.
Since we already created this function, we don't actually need to do anything other than call it.
And now when we say that if we implement this value to two, for example, you see that our total increases we implemented to three you noticed our total increases again 45 and so on.
But you'll also notice that our price here gets a little bit messed up.
It has a ton of nines at the end here, and we don't actually want that.
This is because in computers they can't do division or multiplication or addition with floating point numbers.
So numbers with decimal points 100% accurately.
So sometimes they get rounding errors where you'll get a bunch of nines or a bunch of zeros and a one saying that it didn't quite round out.
Exactly.
Right.
So we want to dio inside of her update car.
Total function is we always went around to two decimal places.
So in order to do this, we're gonna take our total variable here.
We're gonna set it equal to our total variable again.
But we want to round.
It will use the math, that round function, which will round to the nearest hole number.
But since we want around to two decimal places will first multiply our total by 100 which will move our two numbers after a desperate place in front of the decimal place around it.
And then we will divide by 100 and this will essentially round our total to the nearest to desperate places.
And if we say that now only increment this total are quantity, you'll notice our total never actually goes beyond two decimal places.
Even if there's a little bit of a rounding error, you'll also notice that if I try to lower this number below one and click off, it'll always change back to one.
For example, by do negative one here, it'll be back to one.
If I put in zero back to one.
And even if I completely delete it and cook off, it'll change back to one.
This is exactly what we want.
This means that our users will never be able to order less than one oven item that's in the car.
And if they want to remove it from the cart, all they have to do is click the remove button and we'll be removed for them.
Now, the next button that we have to hook up is this ad the cart button that all of our different carte items have.
The first thing we need to do in order to accomplish this is the very same thing that we needed to do for a quantity input and a remove cart item button.
We need to go up.
We need to find where this button is.
So right here we have shocked item.
Button is a class.
We apply it to all of our different add to cart buttons.
So down here we're gonna create a variable which is our add to cart buttons.
We're going to set that variable equal to the documents, get elements for the class name of the shop item button and then we're going to do another loop over these objects, so we'll just copy this.
Look from up here.
Replaced quantity in post with the add to cart buttons.
Since we want to look over these buttons for adding to CART, we're going to get the actual button.
So we'll say the button is equal to add to cart buttons with the right elements, since that'll be whichever element of the four loop that were on.
And then the last thing we need to do is we need to add the actual event to the button.
So it's a button, that ad event listener we want to do click again, since we want to do something when we click on the button, and then we need to give it a function name and we're just going to create a function called Add to Cart clicked and never go.
Now let's create that function down here function add to cart clicked.
It'll take that event parameter, and then we can do again create this actual buttons so we'll say the button here is going to be equal to even top target, and this is our add to cart button now, so now, if we scroll down to a cart, we can see that there is a few elements we need to add to our cart.
We need to add the image.
We need a name of the item, the price of the item and then the quantity input as well as the removal button.
This quantity input is always going to be one.
And this remove button is always going to be just to remove button.
So really, all we need to do is get the price name an image from our actual item.
So if we go back to HTML here and we find a shop item, we can see their ad.
The cart button is inside this details, dude, and then our actual shop item is the div right above it.
So what we need to do in order to get our sharp item?
Because we say shop item, we're gonna set that to our button and we're gonna get the parent of the button and the parent of the buttons parent.
And that will be this shop item different here.
And from here we can query the items inside the shop item did to get this shop item title, for example.
So if we go back here, we can say that the title is going to equal to the shop item.
We're going to get the elements by classroom with class, name of shop, item title, and again, we just want the very 1st 1 and we want the text inside of that.
So we use in our text.
And if we do counsel that log here of the title, save that and we click.
Add to cart.
You'll see we get coffee cup for the coffee cup, get T shirt with a T shirt button and so on for all of our different buttons.
So now what we want to do is we want to get the price.
Next.
If we look here, we have the shop item price class which we can query on so we can say that the price is going to be equal to shop item.
Get elements by class for the shop item price class again, get the first element and get the text inside of it.
Now if we logged the price and the title this you have a coffee cup 6 99 T shirt, 1999.
And so on.
Now.
The very last thing we need to do is we need to get our image element and all we want to do is get the source of our image.
So instead of our store here, we see that image has the class shop item image.
So if we do the very same thing again, we can say that the image source he's going to be equal to shop item, get the elements with the class name, shop item image, get the very 1st 1 and instead of the text inside of this image, since images don't have text, we want to get the source attributes.
This attribute is going to be the source that we apply to our different image.
So now if we print this out here, we say image source.
Click add to cart button.
You'll see that we get the euro that goes towards the source of our image, which is exactly what we want.
And it's going to be different for all of our current images, as you can see, So now we're going to do is we need to actually add a row toe our cart down here and this is going to be the most complex part of what we're going to do, So I'm going to create a separate method to do this.
I will call this the ad item to CART method and we're gonna pass in the title.
The price and the image source into this function most was create this function down here, had item to card and it's going to take the parameters title price, an image source just like that.
And now we need to do is we need to create a row for our CART item in order to create this cart row what is created variable called card, bro.
And we need to set it to a new elements.
Were gonna use document doc create element, which allows us to create an element of any type that we want.
So, for example, we just want to create a div.
So if we run this document dot create omen, it's going to create a brand new day if it's not gonna add it to our age, Timo yet.
But we have a diff that we can now later add to our html and we want to add it to our cart items as you can see here we scroll down, we have carte items, which is where all of our cart rose are going to be.
So we want to add that to our cart items.
We're gonna find the cart items, which is going to be equal to the document.
We're going to get elements by class name for carte items, and we're just gonna get the very 1st 1 and then we're just going to use the upend method for this card items we say penned, which is going to add this cart row to the very end of our cart items so we can just say cart row here and now this upend method will upend our car drove to the end of our car items, which is exactly what we want.
Issues going to add an empty did, though, for now.
So if we click this add to cart button, we're adding empty days which have nothing in them.
But if we wanted to add something, Andy's did just to see what it looks like, we can say cart row dot in her text equals title.
And now when we click this add to cart button, you'll see we added coffee Cup here if we click the T shirt one, we added a road T shirt and so on.
And now all we need to do is do the actual styling, add image and add the price, et cetera.
So we get our cart row looking exactly like our other cart rose.
And the easiest way for us to do that is to just take the HTML directly from our store page here.
So we'll just copy everything that's inside of our cart room.
We're going to actually use that html to generate a cart.
So we'll just say that our Carter road contents very both We're going to set it equal to a string.
But we're going to use back ticks around this string instead of a quotation marks so we can use our string on multiple different lines.
So now we paste this in here, fix our space in real quick.
There we go.
You'll see that we have all of the different html that we need to create our CART contents.
So now, instead of setting the title here, we're gonna do is we want to set the cart row that inner HTML.
We're gonna set it to our CART road contents and the reason we use under aged female because we're actually using HTML tags inside of this instead of just text.
And now we save this click.
Add to cart.
You see that we added a new item to our cart, which is perfect, but you'll notice that it's actually not style just like this.
And that's because we need to add the class of cart room to our car row here so we can just say cart row dot class list dot ad and would just add the class of courtroom.
Save that.
And now when we click, add to cart you in those to add something to the card, but you'll notice it always adds the T shirt item.
That's because we're not using the variables we pass into this function.
Since we used tactics here, we can actually just put variables directly into our code.
So, for example, our image Roro.
If we put a dollar sign and then a curly bracket, anything inside of that is going to be a variable that will evaluate.
So we'll say image source.
So now it'll take our image to respirable and put it right here inside of this HTML.
We could do the same thing for the title down here.
So we'll say title.
And then lastly, we could do the same thing for a price right here and now.
If we saved that, we could add to cart.
You'll see that it now ads all these elements correctly to the cart like we want to look.
Look at the card again.
You'll notice that actually add two coffee cups to our cart, which we don't want to do.
So we're gonna do is we want to make a check to check to see if we already have the coffee cup inside of our cart before adding it to our cart.
In order to do that, we're going to get all the names of our cart items from our cart.
Soldiers stay carte items, names.
We're gonna set that equal to court items dot Get elements by class, man.
And if we check to see what our class name is in here, we'll notice that it is CART item title.
Right here will be the name of our CART item so we can just get by a car item title and then we can move through all these different card items will say, Well, I starts at zero.
I is less than carte items like we add one toe every time we go to the loop.
And then we could just say that our cart item names.
So check if cart item names We want to get the eight element for whatever it oration.
Ron, we want to check the inner text because the Inter text will either be t shirt in this example.
Album three depends on whatever rover on we want to check.
Is the text inside of that cart row equal to the title that we passed in right here?
And if it's equal to the title, that means that we've already added that item toe our cart.
So we wanted just alert the user with the alert function and they weren't function will pop up a pop up for the user, telling them that something has happened and they can click okay to dismiss the pop up.
So we'll just say that this item is already added.
That card There we go and then we also want to return from our function.
Since we no longer want to execute the code below this poor Luke and calling return will immediately exit you out of the function and stop executing anything below it.
So calling return here will bring us back to where we call that I'd item to cart function.
So now if we save that we had a coffee cup, you'll see it adds it perfectly down here.
If we try to add another coffee cup, we're gonna get a message saying that the item has already been added the cart and you notice that does not add another one to the cart, which is perfect.
You will notice, however, that our total down here is not being updated.
So in our add to cart, click a button offense right here.
What has put our update car Total function right there.
And now when we had a coffee cup, you notice that our total update correspondingly with our coffee cup.
One thing that you will realize, though, is if we go to use the remove button on our newly added item, you know, just remove button does not work and you'll think, why does that not work?
We added all of our event listener up here when our document loaded But we only added these event listeners as soon as our document loaded and this remove button was not here when the document moated.
This was added after we loaded the document.
So we need to add an event listener to this removed.
But so inside of our function here.
After we add our contents to the document, we're going to select them.
We'll say, CART row.
We're going to get the elements by class named and we're going to do for the button danger, which is a remove button.
We want to get the very 1st 1 and we'll add an event listener here for quick, just like we did above when the document was loaded and we'll use our function for removing a cart item.
Now if you say that if we have this coffee cup and then we click, they removed.
But you're not noticed that remove button works.
We need to do the same thing for our quantity since, as you can see, our quantity input does not work doesn't update the total soldiers do the exact same thing with the cart.
Row will get elements by classman, and in this case, it's the cart quantity include get the very 1st 1 here have the event listener.
And this time the event listeners a change event listener.
Instead of the click, I would have used our quantity changed function.
And now when we added something to the card thes two lines will be run which add our event listeners to our new quantity, input and our new removing put.
So now when we update our constitution, put our total update and remove button will not remove the item from our cart.
This is exactly what we need.
But what we should do is remove these elements from our HTML.
Since we don't want our cart already have items in it.
As soon as the page loads, we're going to our story here and remove all of our cart rose inside of our car items.
Now, if we save that, you see that our cart is completely empty.
Oh, we should update our price here as well to start at $0 and now you'll see that our card is completely empty when I page loads and we can add items to our card increase.
The quantity of those items may be at a different item to the card and you see that this adds up perfectly total right here is perfect.
You can move things as we need Thio room back to zero.
Whatever we need.
Not a very last thing we have to do is to make the purchase button actually remove all of the items from our cart.
So let's start to do that now, inside of our ready function here, we're going to do the exact same thing we've done for all of our the buttons.
And we're going to add an event listener.
So let's check what class we need to query on.
We want to look for this button purchase class, and that is the class that we applied tar button.
So in here, we're going to do documents, don't get elements by class name.
We're going to use that class name of button purchase.
There's only one button for purchasing on our entire pages.
We just want to get the 1st 1 and we're gonna add the event listener to this.
It's going to be a click event listener, and we're going to make a function and we'll just call it Purchase clicked just like that.
And down here, you can add that function Purchase clicked.
Here we go and all we want to do inside of this function is alert the user that they have purchased these items.
So creating alert and inside of this alert, we'll just say thank you for your purchase.
This was just notified under they have purchased these items and then we will go down here and we will delete all of the items inside of our cart.
So, in order to do this, what we want to do is we want to select the container our card games in which is this cart items class right here.
We know that all of our cards rose.
We're going to be added to this, so we'll say carte items as a variable is gonna be equal to the document.
We're gonna get all the elements by classroom of carte items.
We know there's only one, so we're just going to get the 1st 1 and then we're gonna want a loop over all the Children inside of the car.
So if we add a bunch of things in the car, you see that we're gonna have multiple cart rose in here, so we want to check for all the Children inside of this cart items, so we'll say, while which is similar to a four loop.
But we'll continue to execute as long as whatever is inside the parentheses here is true.
So we'll say while our CART items has Children, so has child note, which essentially means is there any Children inside of this car?
Adam, if that is true, we're going to take the CART item.
We're going to remove the child.
And what is going to remove whatever the very first child inside of her carte items is, we can use the first child property to get that.
So this wild loop will continually loop through all of the I rose in our cart items and remove them from our cart items until our car items is completely empty.
So let's just this out.
What's add some things to our cart here will increase the quantity here, so we have $67 worth of purchases to make click purchase.
But it'll say thank you for your purchase and we'll click.
Okay, you'll see everything.
Our cart is removed, but our total still hasn't been updated.
So again, we're just going to call our update car.
Total function at the end of here.
And now we add some things to our card.
Look at our total 26 98 purchase after work.
Look.
Okay, Our total goes back to zero and that's all the resident creating the jobs.
Good for this page.
It may seem like a lot of code.
We have a lot of lines in here, but a lot of this is just doing the same thing over and over again.
As you can see, we have get elements by class name being called all the time.
To get the elements that we want to apply our events to as well was to get the elements that we want to get a text from in order to create our rose or remove.
I rest.
Really, The main takeaways from here is up here.
We have the code that is going to check to make sure that our document is loaded before we try to access the different parts of it.
This is incredibly important toe have in every single bit of Java script that you work on.
Then next we said of all of our event listener for all of the items that are already loaded into our document at the very beginning of our document load.
Then we have our different events that are going to do different things, such as at elements to the cart, remove elements from a cart, update the quantity and so on.
And then, lastly, when we add new elements to our document, we need to make sure the hook up all of our event listeners to those documents elements because they weren't around when we set up our initial events of here and are ready function because they were added after this ready function was called.
This is a very important step toe.
Add these event listeners that is commonly for gotten one creating new elements and JavaScript other.
And that though there really isn't much complicated code in this project and really not much Java scoop specific code, all we're really doing is getting the different elements and then paste in those elements inside of our cart and then removing them with this purchase button or to remove button.
So now if I make this a little bit larger here, remove this consul down here, you can see we can add a different items to our card.
Change our quantity as high as we want.
We try to make it a negative number that would change it back to one.
Maybe we don't want a coffee cup.
Remove it and then we're done Purchaser items and there we go.
This is everything that we need in order to create the fully functioning card on our band website.
So thank you guys very much for watching this video.
I hope you guys learned something about the job.
A script that you need to use in order to create this card from just plain vanilla javascript.
If you guys want to see the code that I have for either the actual band Web pages or the card itself, go over to my get hub, which is link in the description below.
For all of the code that we worked on in this lesson, thank you guys very much for sitting through this extremely long video on javascript.
If you guys enjoy it, please don't forget to leave me like ants prescribe.
If you want to see somewhere content and let me know down in the comments below what you want me to cover more and death related to Java script in the future?
Thank you guys very much.