Name: 初心者のためのJavaScriptショッピングカートのチュートリアル (JavaScript Shopping Cart Tutorial for Beginners)
Uploaded: 2021-01-14T10:24:34.000Z
Duration: 43 min 55 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

現在進行形

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.

to 不定詞

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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

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

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

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.

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

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

字幕リスト動画再生

初心者のためのJavaScriptショッピングカートのチュートリアル (JavaScript Shopping Cart Tutorial for Beginners)

essentially

negative

completely

script