Transcripts
1. Introduction: All right, guys. Welcome to these course on how to build a shopping cart using vanilla JavaScript. So we have in here an example of the project that we're gonna build in this course. So this is an example of an e commerce website. As we can see, we have a couple of profits in here some great T shirts and Ray who? These and some black T shirts and black hoodies. When we over the mouse on one of them, we can see that we have these buttons that we can just click and arts to cart and we have in here on the top. Our card that we can see at the moment is completely empty. So let's just add a couple of products in there to see how our application works. So I'm gonna add two of these great T shirts, for example. So I'm going to click 12 and we can see that at the top in here. We got to on our card at the moment, and then I'm going to click three of this one's, so I'm gonna do 123 So now I know that I got in total five products in my cart. I'm going to click in these Now I can see this is my card page, which, as at the moment, to great T shirts if you guys remember, with the $15 each, we got a $30 total and then we added three of these black T shirts for $10 which gives a total as well of 30. So 30 plus 30 we got our basket total of $60. But what else can we do in here? Look, I can if I want to increase or decrease the quantities of these products that we have on the card. So, for example, I'm going to click in here toe, have one more. So let's see if I'm going to add one more. I'll probably add $15 more on top of these, so it's gonna be like 45 in here should be 75. Let's see if it works. I'm gonna click 45 because his three of them and I got 75 total. Obviously, I can just, like, reduce thes for simple, just for one. If I want to look now are just got 15 15 together with these 30 from these three ones. I got 45 and I can also, Like I said, go up and down with these. You guys really can try these out after there is a button in here that you can get rid of all the products from from these line of profits. So let's say I have four total brat black T shirts in here. I can get rid of all of them by just clicking these X. And look, I got just won t shirts of $15 with my total and in here on the top. Can you see I still have Onley warn. Okay. And I can go back between pages for this. If I can go to my home page, go back to the car and this is always in there. Alright, guys. So this is the project that we're gonna build is gonna be awesome for you because you're gonna learn how toe deal with a local storage of the of your browser. How to create these application how to use modular functions in javascript. We're going to use a lot of modular functions and yeah, I hope you were excited to start the score, so I'll see when the other side
2. Building the Frontend Interface: All right, guys, welcome back to another video today. We're gonna build the e commerce shopping cart with vanilla javascript. So the website is in here. As you can see, we have four products that if you're over it, you can see about anemia that say's after cart. So let's say, for example, I'm gonna have and two black who these. So I'm just going to double click 12 and at the top, we should seen here a card button that as, like to in that at the moment. So we got to products. I'm gonna have to warn of these gray hoodie as well. So when I click on it now, I have three. So if I reload the page, look, if I reload the page, it's still there. The number three. Why is that? Because we are gonna use something called the local storage. All the modern browsers. They have it. And this is awesome for front and obligations like this one that we're gonna build. So if I'm gonna click now in getting these cards, Okay, I'm gonna click in here, and now I can see that I have two of these black hoodies that we selected from before, we can see the individual price of it and the total price of two. So if each one is $20 the total is gonna be 40. And we also have one gray hoodie, which is $20. Okay. And altogether, the price should be $60. Maybe I'm going to do some more. So my they know if we need, But hopefully you guys will see better. So we can also just click on these bottles to change the quantity. Let's say I'm gonna add one of these gray. Who this. Okay, I'm going to click now. The total price, because he's too is 40. And now if you guys check in yet also the cart, I have four products in total and off course. The total price is also updated. I can also click in these delete button that will get rid of all of these products. So, for example, if I click on this, Okay, now I only have two black. Who these on the cart in here? I only have two, which is perfect. And now the total price is $40. And down here $40 as well. Why? Guys? So this is the project that we're gonna build. I hope you want excited for these. And the first thing that we're going to do is just, like, start building the HTML and CSS of this project. I'm not going to spend too much time on these HTML and CSS. I have the coach Justin here. I'm gonna use it, but I'm gonna explain off course, but I want to spend a bit more time in javascript because that's all this course is about. But as usual, if you guys have any questions, just let me know. In the comments down below, I answer to all of your questions. And also, I'm gonna put some links okay for some of these files that all of these files in the end, if you guys just want to use them is really up to you. If you don't want, you can just, like, follow along and should be easy. So let's get started. All right. So the first thing we need to do is just create our index dot html file. So that's what I'm gonna be doing. HTML and ah, I'm just gonna write down some simple template here. Html five. I'm just gonna close these I'm gonna put in here, like, on the top shopping court and inside. I'm just gonna put that h one saying these seas home page. I'm also going to create now a new file for the styles dot CSS Okay. And I'm gonna create another file, which is going to be for my cart dot html. So this is gonna be just like a page to go to the to the cart where we have all the products. So I'm just gonna copy everything that I have on my index dot html when a put these inside of mine cart dot html and that should be it for now. All right, Like I mentioned before, guys, I'm not going to spend too much time with HTML and CSS on the scores because I want to just give a bit more time just for javascript because this is a JavaScript course. Anyway, eso I'm just gonna paste some code in here that I have already from the project. You guys can always you have a link on the description if you want to get the files. Um, if you're getting these core so you should get the files if he's you guys just want, like to follow along and just pause the video and just copy it. Feel free as well s. So what I'm gonna do is, um I'm just going to start we the Heather. Okay, I'm just gonna copy this, that I have been here on the side. I'm gonna paste it. I'm just closed. These I'm gonna pace thes. So at the moment, I have ah, heaven elements. We the Deve with a class overlay. Enough with the H two title and with some kind of navigation bar. So if I just see, how does things look like it the moment it just looks like that. Okay. Is a normal is a normal, um, navigation, but of a website. Like I said, guys, I'm going to give you just a little bit of time if you want to. Just, like, copy what I have in here. So once you have these, we could actually just, like, start styling our website, So I'm just gonna put the link to my CSS, and I think I called it styles. Okay, little dot CSS in there. I'm just gonna paste some things that I usually put so I always put these or no, my websites toe just, like, reset all these kind of properties, then Obviously, we got in here a fun family roboto that we don't have at the moment. So we need to import it from Google. Okay, so if you go into Google funds, Okay, I'm going to click on Google phones, and I'm just using this one roboto. Okay, so you guys click in here on the bottom. You should see Let me just move these a bit to the side. You should see just like a link to import these. So that's what I'm going to be doing. I'm just going to copy corner copies and pasted Just, um, in here. I also need to put off course a link. I'm not sure if I put the Lincoln. Yeah, I put the link on the wrong I put on the car to dot html on the wrong place. I'm gonna take these off from the cart. No, actually, I need to leave it in here anyway, because we're gonna be using these for the cart s. So I'm just gonna put it in here, OK? Styles dot CS says Okay. So we got these done. Let me go back in here. Just save let you put some more styles. I'm gonna put the style for my hever. Okay? I'm gonna put the heather in year at the moment, as you guys can see, My heaven, it just has, like, a background image that is nicely styled with a height of 150 pixels. Then if you guys remember, I have in my Yeah, I think I bite pasted all of these stuff. I'm gonna copy all of these because this is gonna be exactly the same for my index. Okay, Was just a mistake. Guys. You can go copy the same code for both index and the car to dot html because it's gonna be the same thing. Look, I'm gonna click in here. Home card is still the same. Um, okay, there is one thing at the moment that we need is let's copies overlay thing. You see these dif overlay I'm gonna put in years, some CSS that is making it, um, a bit darker. That's what I wanted. Then I'm gonna put some styles for my nuff as well, so I'm gonna put in here. So at the moment my novice within here with the title and I got in here the menu, nav Lings. Then I'm gonna put some stylings okay for my nav links. So I'm gonna put these in here. I'm giving it a little bit of time. Like I said, if you want to just, like, pause the video and copy these styles at the moment we just got home about. And cart, if you has notice in here on mine Navigation. OK, I'm using something called iron icons. Okay, This is some kind of front icons that you can use that you can increase the size, change the caller and everything, and I really like to use them. I own icons, So I'm gonna put in here on Google iron icons that are completely free. Okay, Someone clicking here. And look, you got all these icons that you can use when you click on usage and you want to script in here that you need to put down on the body off the page. And then if you country continue to scroll down, there's gonna be another link in here that says installation. You should put it just before your style dot CSS. Okay, so, um, if everything is fine and we just refresh our page, it should be working. Let me just see if I'm missing something. I think this, uh maybe I'm only about Yeah. Okay, now I'm on the home and it's there. Ok, let's put a little bit more styles for the card. So I'm just gonna copy these. I'm gonna put, um down here. Look, now is nicely styled my cart. Like I said, it's in here all the styles, so I'm just indented these a little bit better, So everything is nicely organized. Uh, let me just copy all these curled into my cart because it's gonna be exactly the same index and card at the moment. They should be exactly the same. So if you go between home and cart, he's gonna be the same. Okay, so we got these for our heather. Now we can start building, for example, the products and now these products is just for the index dot html page. Okay, let me just see. Um I'm just going to copy these, okay? I have a container. So I'm gonna copy my container that I have in here, and I'm going to show you. So after the heather, You see, I'm just gonna give a little bit of space, okay? When outpaced these. And this is my Deve with a class of container with a couple of these images that if you guys don't remember, I have been here on the side of folder with these images, okay? And these images they have inside all these stuff that I'm going to use, So let me just increase. But I'm gonna put these in year. I'm gonna increase thes so you guys can see a little bit better. So you got the start off the container, and then you got a deal with a class image that this is gonna be each one off the images with the image inside with the title with the with the price. And then we got the asked to cart button that we don't see. I'm gonna get rid of these inputs because I think I was no even using them in the end. Okay. So you can get rid of these inputs. I was just trying to do something else. So if I refresh the page, look, you should see something like the's right now. Okay. I think I just put like, four products. You can put as many as you want. Let's go back to the styles that CSS Now let me see. Card A. I'm just gonna put my container, so I'm gonna put in here my container. Just get rid of this thing. I'm going to explain that after, So if you put this container now, you should see in here the projects. Then I'm just gonna put image. This is to style our images. Okay, so they look a little bit better like this. Then I'm gonna do at two cards because we have to cart button inside. What else then? Off course. I think I forgot. Um, no, I didn't fought to put I'm just gonna put these for when we hope over when we hope for the images, we can see the ARTO card button. There it is. Okay. Charities 30. Sterritt, ease. Okay. And if I goto cart, there is nothing. And if I go to home, I got all of these. All right, so I think that's it for these video guys. We set up our project. Our initial project. This is nothing related with javascript, but I think it's always good for you guys to see a little bit how we started the project, how we added all these different elements. And of course you can style it as you want. All right, so that's it for these video guys and also in the next one.
3. Adding Numbers to the Cart: right, guys, welcome back. So in these video we're going to do is click on these are two card buttons and we're gonna update thes button that we have in here. That's a scarred. So as many times as we click on the add to cart, we're gonna count how many products we are adding to the card. So first thing we're gonna do is going to our index dot html. Okay? And just after the script that we have down here, I'm gonna create another script. Okay, We the source off main dot Js. Okay, so I'm gonna add these in here on the side, so I'm just gonna do a right click new file, and I'm going to do a main dot Jess. And I'm just gonna put the console, the log of running. Okay, just make sure that this is working. So I'm gonna right click on my page. I'm going to do a inspect, okay? And I'm gonna look in here into the console, and I can see in here on the side running. Okay. If you guys can seen here, it's my consulate log. So it means that my main dot Js file is connected So this is perfect. Eso The first thing I wants to do is just going here at the top, and I'm gonna do a let and I'm gonna do cards. Equals two documents dot Queary selector all and what I want to select is my dot at to cart . Okay, I'm going to show you now. What's that in here on my index dot html? Look, we got these anchor elements that with a class of asked to cart, if you want to see it's this button. All right, so I want toe get them all with JavaScript. So I need to target them. That's why I'm using these. And then what I'm gonna do is I'm just gonna do an event listener. So whenever I click in one of them, I want to do something. So because we got loads of them when we grabbed these is going to be, like in a some kind of an array. We can just do a four loop for Let I equals 20 So we're gonna loop through all of them, and I'm gonna do I He's going to be a last. Then cards dot length, okay? And then we're gonna do a I plus. Plus. Okay, so this is just a simple loop that is going to run from zero toe cart that length. So how much is the card? Start length. We got 1234 So I is gonna be less than cuts that length there is gonna be running from zero on deal 30123 Okay, so if I do win here a course, hold that log, I'm gonna dio my loop. Okay? I'm going to save these. And look, I got my loop running on these four look four times. So what do I want to do in here? I want to grab my cards. Okay. And I'm just gonna put in here. I because my eye is gonna change on these loop is going to start from zero That is going for one and stuff so I can grab all my cards based on this. Um, because obviously, if you guys remember, you can have cards. Zero to grab this one in here, you can have cards. One cards. Want to grab this one there. And so one. That's why I'm using the loop. So I'm gonna do a adds event listener. And what event listener I want. I want to click. Okay, then I'm gonna put the function. So what I'm doing in here is whenever I click in one of these buttons, I want to do something. At the moment. I'm just gonna do a console dot lord off button, or I'm gonna do others, too. Cards. Okay, I'm going to just go in here. Look at this stuff on the side. My console. I'm going to click on these out to cart, and it says other two cars, I'm going to click again and look two times I'm gonna click again. 34 So all these buttons, now they are working. So, um, what do I want to do in here? Basically, I just did these kind of event. Listen it if I want to, but at the moment, I'm going to create a function called card numbers. So I know how many items I'm adding to the cart, so I'm going to do a function. I called the cart numbers. So maybe the first thing what I'm gonna do is just add some kind of value to the local storage. This is how we're gonna save all these profits that we are adding in here on the page. And even if you refresh, they're gonna be remembered. So whenever I click in here, So I'm just gonna do this car cards numbers. Okay, I'm gonna put this in here instead of this console log. And what I'm gonna do is I'm gonna do a local storage dot said item, and then I'm gonna put a cart numbers and then the next one, I'm just gonna put the one, for example, and I'm gonna show you in a second. So if I go in here, I refresh the page. I'm going to click now first, before I click, I'm going in here on the top. I'm going into applications. Okay. By the way, guys, I'm using the Google Chrome browser. I think is gonna be something similar. If you guys are using Mozilla Water Opara or whatever. You guys or safari, if you want to follow along exactly how I'm doing, just used them. The Google Chrome browser. So in here, Wait. Says application on the top. You are you guys going to local storage? And if you see in here, there is no keys and no values at the moment. Okay, so when I do local storage, not set item cart numbers one, this is We're gonna add something in there. So I'm gonna show you by clicking here on these. Look, I got a card numbers one, okay? And if I click on again is just gonna do re do the same thing over and over again. So for example, now I clicked once and it updated my cart numbers. My key card numbers and the value one. If I click on again, nothing is happening. So maybe when I click these I want to check if initially there is some kind of key value in there. So, for example, if I know that is in here one already I want that the next time that I'm going to click is going to increase these a little bit. So let's get these value the first time that we click on the button. Let's get these values. So I'm going to do flett product numbers is gonna be goes to local storage thought, and I'm gonna do I get item okay. And the item is called if you guys remember in here on the top cards, numbers Okay, so, um, I'm just gonna dio console dot log of these products in numbers. Okay, so look at these. I'm gonna let me see my console at the moment. That is nothing in here. I can just get rid that. Don't worry about these, um, error that it was in there. I'm just going to click in here and look, I got my product numbers okay from there. But if you guys go in here and you do a con, so dot log off type off product numbers. Okay, let me just take these out. I'm going to click on again. And it say that he's one that we are grabbing from our local storage. It comes as a string. Okay, so we need to do something toe convert these number from a string to a number. So for that, I can just do, um, product numbers is going to be equal to a parse int. Okay. Off the product numbers from before. Okay, Now, you final log again. The type off product numbers. Okay. Just gonna check my console, refresh the page, get rid of these when I click on it, and it says now it's a number because I used these parts into to convert the string into a number. Okay, so let's just get rid of these consul dot logs for now. Okay, So one thing I'm gonna do before I start going on with these is just starting here. Variable in the top called products. This is gonna be equals to an array. And these array is gonna have some objects inside with the name off, for example. Gray T shirts. Okay. And then he's gonna have a talk. Okay, This is a way that we're gonna use to grab the images after. Okay? Attack of Ray T shirt. And then he's gonna have a price 15 and then he's gonna have in cards off zero. So this is a way that we can just, like track how many times this item that this product is on the cart? Eso I'm just gonna go and do the same for the rest of the products. I'm just gonna copy these that they have on the side. When a copy these, I'm gonna put it in here. So this is all the products that I'm gonna be using. Okay. The great T shirt, the gray hoodie, the black T shirt and the black hoodie. Okay, as you can see all of them in the beginning, they have in cards. There is nothing on the card. Okay. Um okay, so in here, when I click in one of these things Ah, first of all, off course, I want to run these, um, card numbers. I want to check. First of all, if there is something in here on my on my local storage, Okay, so for that, I'm going to do any of statement in here, Okay? Because if I'm going to remove these look, if you guys just click on these clear all and just refresh the page if I tried to do a console dot log of these product numbers the first time that you come to the page and you just click on upto card. If you try to get these from the local storage and you try to do this parts into because it doesn't exist is going to give you, like, undefined or no. Let's just check. I'm gonna do on the console. I'm gonna click and is going to be, like, not a number. Ok? Eso let's do these. If statement so I'm going to do if Okay, if there are some product numbers, Okay. It means that we already clicked in there from before. We have been something to the card. I want to do a local storage dot set. Ah, numbers. Okay, so I'm just gonna cut thes I'm gonna put this one in year local storage. That set item for my card numbers to be whatever was there from before. Look, that's what we are doing in here. Okay? Plus one. Okay. And if there is no product okay in here with either if if there was products already there on our local storage, if that is none, Okay, What I'm gonna do is just set my local storage to set the item card numbers to be one. Okay, so this is what we're gonna check now. Let me just go toe application. I mean, just delete this stuff in your guys. Don't forget to do this, because then you will is not gonna work as intended. So I'm going to refresh the page. I'm going to click in here. So the first time we are going in here, Obviously we are trying to get something in there. You don't get nothing. So this is gonna be not a number. So when we try to do these, if product numbers exist, which is not the numbers it means is false, he means that these code is going to run. Okay, so local storage, we're going to set the item of card numbers. That's what we have in here on the top. And he's gonna set the value of one. The second time that I'm going to click one of these cards, We're going to get the product numbers from the local storage. We will get the number one as a string. Then we're going to convert these into a number. Now, I'm going to say if product numbers exists now is one so it exists and it's true. So what we will do is do a local storage. That set item our cart numbers is gonna be the product numbers, which we just got before with number one. So one plus one is gonna be what to let's try it. There you go. And so what if you keep clicking? Look, you got all the number of products that you are clicking on it. Now there's one more thing that we can do. Which is when we click in here on or nothing these to the local storage. I want that. If this is the first item, I can just wear documents. Let me just do a documents Docks, Query selector. Okay. And I want to select my cart span. Okay, let me just show you guys. What's the's or my navigation bar I have in here? My Where is it? Ally, With a class of cards inside, we have a span with the number zero. Okay, if you guys don't remember, it's this in here. Okay, look, these span with the number zero. That's what I'm grabbing in there. Okay, so let me go back. And I wanted to access the text text. Ah, content. Toby equals two eso. I want to be, For example, if he is the first time that we are doing is just gonna be a close to one. Okay? If not, what we will do is just set, um, the decks content to be product numbers, which we will grab from whatever is in here. Okay. Plus one. Okay, So we are grabbing all the products that we have already on our local storage, and we are adding one. So basically, we're doing the same thing as in here, but we are updating our cart. Okay? I mean, get rid of all of these local storage keys that we have refreshed the page. And now look, I'm going to click on after cards. Okay? So we got one. I'm going to click again. I got to and also in here on the top. I'm gonna clicking here three and so one. If I refresh the page look, now it's gone, OK? We still have our local storage values, but in here on the top, our card is empty, so we need to do something about it. So what I'm gonna do is just create the function, okay? Have function called on loads, cards, numbers. Okay. And this function is just gonna check the same thing like in here from before, we're going to create a variable called product numbers is gonna check the local storage toe, get a night, um, off cart numbers if it exists. So I'm gonna do if there are some product numbers from the local storage. Okay. What I want to do is just set my document that query selector card span, text content. Toby equals to the number of products that are on my local storage. Okay, now, these functioning here is never gonna run unless we call it. If you guys remember this card numbers function is attached toe a click event listener toe these buttons. But this function that we just created now is never gonna run until we call it. So I'm just going to call this function down here. So whenever we load the page for the first time, these is gonna run, and he's gonna check it. So if I refresh the page, Look, the cart is all the time. Three. So if I'm gonna out, for example, like one to we got five in here on the top, as you can see, if I refresh or if I go to the cart page and then I go back. Look, it's there. All right, guys. So that's it for these v view and all suing the next one
4. Adding Products to Local Storage: All right, guys, Welcome back. So in the last video, if you guys remember, we were just like clicking on these are two cards. And he was updating our cart buttoning here on the talk with how many items we have in the cart. But at the moment, we don't know exactly which items which products we have in our country. So this is what we're gonna learn in these video. So the first thing I want to do is if you guys remember when we need these four move Teoh at these event listener, click to these Afghans Buttons. We don't know at the moment in which kind of product we are clicking on, we just know that we can click, and this is gonna add something to the car. So let me just show you what I want to do when I call dysfunction card numbers. I want to pass inside of these cards members I want to pass. Yeah, products. OK, these one year products. So where is it products and I'm gonna put in here. I so as you guys remember, we're doing these four look which starts with the indexing here. Zero. And it was until three. So each one of these products is gonna have an index. So whenever I click on this and I call this function, I could just grab these in here ass a product, OK? And just in the beginning, I'm gonna show you. Okay? I'm just filled with corn Soul. Don't look. And I'm going to say the products click is I'm just gonna put years, uh, comma space and I'm gonna put together product. Okay, so I'm gonna right click on here on the page, inspect So I can open the developer tools. I'm going into my console and look what I'm gonna do if I'm going to click on this one. My great T shirt. Okay, look, the brother it clicked ISS and he's gonna show me in here. Name Great T shirts. Tired. Grey T shirt price 15 in card zero. OK, And if you remember, this is what is in here on the top. Okay, so let me just clear these Refresh the page. Imagine that. Now I'm gonna click, or this one the black hoodie. I'm gonna click on its I'm just refresh the page. Clear these now click on the black hoodie and look what it says. Name Black. Who? The target. Black. Who? The We got the price and in cards just like these. So we are on the right step. Now, toe out these to our local storage. If you guys remember on our local storage, the only thing that we have at the moment is just, um just refresh. I'm gonna click in these. We just haven't here at the moment. Just the card numbers. Okay, so what I will do is if I scroll down in here. So I'm passing these to the card numbers and down here after I do everything, just take this constable block with only need anymore. I'm going to call a function called sit IVs. Okay. And I'm also with a pass these products. Okay, So I'm passing the product in here, the one that I'm clicking on into my car numbers. I grab it in here on the top on these cards numbers, and then I'm passing it in here to these other function that it doesn't exist at the moment , but we will create is now. Okay, So set items. Let's create these function function sense items. Okay? And let's grab these products. Let's put it in here as well. And I'm just going to a parcel of Lord and I'm going to say even sign off set item's function, and I'm gonna do another consulate. Look, my project is, and I'm just gonna blips the front. That's okay. Just make sure that these functioning here is running. So I'm gonna clear these. I'm gonna click in here on us to Cartland, check my console and look inside of the item's function. My brother used a great dish in that I just clicked on. Okay, I refreshed these again when I click on these gray hoodie now, inside of the set item's function. My product is he wants the name. You want to tie that? The price and income Perfect. Okay, so what we want to do, first of all, is I'm gonna do, huh? Products dots in cards in cart. He's gonna be equals to one. Okay, So the first time that you were clicking here, you're it could do product dot in cart, because if you remember Ah, we have these in cards, options? Yeah, medical products in cart. And then I'm gonna do a local storage. Don't set item I think that set item that Yeah, God set item and what I'm going to call these is under the problem. Looks I think that's what I had from before. Yes. OK, so products in cards, and then I'm gonna put a comma and then the value that I want. Okay, so right now I'm just gonna put, uh, Maybe I'm going to start a new variable in the vehicle. Let cards. All right. This is gonna be equals. Two people saw an object, and I'm gonna put in here is attack. I'm gonna put the products dot type. Okay, I'm just gonna put these name and then inside of these, I'm gonna foot just the product itself, okay? Somewhere to save these, let me just push these First of all, in here on the top. And now I'm gonna dio I'm gonna pass this car items in here. Okay? So let me go in here. Let me you remove all the things inside. When you refresh the page, I'm going to click in one of these and look what happens. It says product in card and I got object. Object. Okay, So the problem is when we are creating these objects that I'm gonna pass into my local storage. We actually need to do something called Jason. Don't strange if I because we need to pass these not as a javascript object, but as adjacent object e to our local storage. So what we can do is Jason dot string if I Okay, and if I put this in here, Jason not string. If I and I'm gonna boat car items, I think that's if I'm not wrong. Let's get rid of this. That's refresh. I'm going to click on the 1st 1 and now it's fine. Okay, I'm just gonna push these in here. Look, this is what we have now inside of our A local solid on products to card. I have a great T shirt with the name of great T shirt to attack the price. And I got in count one. Okay, perfect. So we got the first part. But the thing is, if I want a quick now on the 2nd 1 for example, these grave Woody. Now you see that these gets over written, So let's get started with that part. Because we don't want to These get over written all the time So, for that is, whenever we click on the set items for the first time, we need to check if exists already some kind of car items in here already or not. Okay, so let's do these. So I'm gonna do you hear Let's cards items is gonna be eagles to local storage. Okay, let me just get through these. Let's because I already initialized it in here in the hall first. So local storage don't get item, okay? And the item that I want to get is these products in kinds. Okay. To check if exists. Already, something in our local storage so gets no draw. That's cards. Okay, so this is what my cart items is gonna be. Okay, and then I'm going to a car, so walk. And I'm going to say my cart items are, and I'm just gonna put in here cards items. Okay, so let's check these. I'm going to refresh the page. I'm going to go into my console. I'm going to click these grable, the for example, and look what we have to get on the top. My cart items are, and then we got grave moody, and we got name and if you check these. This is in a Jason for images and four month. Exactly. Because his old full of these quotes is not in a normal javascript object. So for that way, have to Who is got items equals two. Jason. Not hard, because we want to pass from Jason into a JavaScript object. Okay, um, so I'm gonna do in here is, um just the items. Okay, Now I'm going to click on these foodie again. And, Lou, what I got this time, Okay. I got my great movie with the name with the time of the price and in cart one, this is what is in there exactly at the moment now, which is perfect, which is perfect, so we can see what's in there. Well, let's just look weak checking here and first within each statement. If OK, guards, car items, he's difference, then. No. Okay. It means that he's already something now at a local storage in our cards. Okay, if we are trying to get something from our our local storage and we had a taking it these with adjacent is like a javascript object. And then we do a check If our items is different than no, it means something that already exists. So this is what we wants to do. We want to do cards, items, and then I'm gonna put these brackets to put my products. The type is gonna be equals to all. Sorry. I want to access the cards methods. Toby equals two or plus Waas equal one. So this is to increase one that is already in there, and I'm gonna show you now. Okay? This is almost, like cards items on. So, for example, if I'm gonna choose the 1st 1 the product attack if you guys remember, he's great T shirt. Okay, this is what's gonna happen. Where is it? Where is it? Is just this This is exactly the same length ease. Okay. And then we are getting these property called in card, and we are increasing it by one. Okay, I'm just every of this, so, uh, I'm just clear these refresh I'm going to click on the 1st 1 Look on these great d shit the first time. Look, we got one on the total card numbers and what we have inside, we have a non object with a key of great T shirts and inside of it, we have the name. The time the price. And we got in cart one. I'm gonna go in clean one more time. Look. Okay, so nothing happened. Let me see. Because with these, if statements and we need to put that else OK, these else is gonna be if we are clicking down on the first time. Okay? When you are clicking down the first time, you want to just set your product in cuts to be one. This is the first time that you are clicking. It means that your car items is no. There is nothing in there. Okay, so let me just take care of these. Refresh. I'm gonna quake in here. And we got a great T shirt with the name talk price in cutting. What? Because this was the first time that we clicked. I'm gonna go and I'm going to click on the next one. And if I'm gonna look open, I got impact to about two of these T shirts. And when I click one more time, look, I got three in card and I know that the total card numbers as well is three on the top OK, but there's a problem now with these because if I'm going to go in, click, for example on these black T shirt might say, Look, what's gonna happen? Nothing is other than here. Look, I'm gonna refresh the page when clicking here. Nothing is happening. Okay? Because, look, we are having all the time still these and great T shirt from before. So let's fix this, By the way, I'm just going to click in here on the console to let you guys show, look and court type error cannot re property of in cart of undefined. Okay, so the problem is when I'm trying to do these, if I try to do where cart items and then product attack dot in cart off something that has not been added before, like, for example, these if you check in here at the moment, we got these great issues because this was the first thing that we clicked on. Okay, you guys remember when we click these on the first time, we are updating our product in carts. Toby equals toe one. Okay, Whatever you click on, then you create these very milk Are items. Okay? Toby equals to whatever it is your product Time Name. Okay, So if you click, for example on the black T shirt for the first time when it just refreshed she was quick on the black T shirt for the first time. Look, is the product seen cards? You got this key black T shirt, and then you got everything inside with in car one the second time that you click. OK, he's gonna check easily. Can't items know if you remember the cart items is just trying to get back what we have in here. If it's not know we are doing half items and then imagine that I'm going to click on these gray hoodie because these great moody does not exist in hearing these objects, as you can see is going to give us that error. So we will check these. Now, I'm gonna do a comfortable look just to show you guys do a console dot Log off the car items brother to attack. Okay, so at the moment we have on our local storage just a black T shirt. So if I try to week on these gray hoodie, look on mangy s 66 which is these line it says that these undefined. Okay, So if this isn't defined, if I try to take on this one Israel, it says undefined. Okay, so we can't do anything because he's a different broad product than the 1st 1 that we clicked on. So we will do any of statement. I'm going here. If cards, iTunes, dots, products type is difference, then on the find. Okay. I want to update my car's items to be equals to a new object. Okay. And what I'm gonna do is I'm gonna grab whatever is on my car items from before, using the rest operator from jobs. Great. So don't our thoughts, cards, items, and then what I'm gonna put in is just my products those time with my product in there. Okay, so that should be it. And finally, then off course, I just update the in carts. Toby Bliss one. Okay, let me save these. It's refresh. I'm going to click, for example. This is the first time. So the first time that we click on a product is fine. So I'm gonna click these great T shirt. Look, I got the great T shirt with in cart of one. I'm gonna click one more time and I got incomes to. But now, if I try to go and click on a difference Products, for example, these gray hoodie Okay, um is no working. Let's see what's what's wrong on the console. It's still saying that on the 73 they use some kind of ever eso Let's just check my just clear these refresh and looking here. Sorry, I don't want this to be different than only fine. I wanted to be equals to one defined, like we were checking before. If when I click, one of these targets of these products is gonna tell me that is undefined. I just want to update my car items to be whatever it is on my local storage from before and then at these new products. Okay, so let's refresh. I'm gonna click these T shirts. Want to Let's check. We got stewing cards. I'm gonna click one more. So all three of them. Now I'm gonna click the great Moody, for example. Okay. Um oh, I didn't save my file. Sorry about that, guys. Okay, let's just go in here application. Let's get rid of these. Refresh. I'm gonna leave 123 I want three of these. I'm going to click on the Holy and look, I got the great Houdini as well. With one in card. I go in here and click. I got to in cons and if you I see Look, I got three in here from the great T shirt I got to from the gray hoodie. And I don't need a total items on the top that we just grabbed from before from the previous video five. Okay, I can't even have one more. Let's say the black tea ships that it is black T shirt, name, time price and in cart. All right, so I think that's it for these real And just see if I'm missing something else. No, I think that seats All right, guys, just as usually. If you have any questions, just let me know in the comments below. And that's it for you. Video guys. I'll see you in the next one
5. Calculate Total Cost in Cart: All right, guys, welcome back. So in this video, we are going to calculate the total cost of our products that we are adding to the cart. So I'm gonna create the function. Um, probably. Yeah, that can do it. Just down here. After all of these. Just organize these code a little bit better. Um, just so we don't have, like, a lot of different spaces everywhere. Okay, I think that's fine. So I'm gonna create the function here called Total Cost. Okay. And these function whenever I go and I do a look through my own my app to Carter Button's gonna pass this functioning here. Total cost. And I want to pass inside the values of these products. Okay, So I'm gonna do decks. I just like before. So when I click in one of these, I can get access to their properties that we have in here. So it's gonna be products. I Okay, so I'm gonna grab these value. We'll grab these volume in year. We the a parameter off product. You can call it whatever you want, because this is the perimeter that you are just grabbing it. So I'm just gonna dio console don't Lord off the products Fries is and then I'm gonna put the call. Not gonna put products. Dots, fries. Okay, let's test these out. I'm going to my console. I'm going to click, for example, these black hoodie, which is $25 with a click, and he's going to say the product prices 20. Okay, because I didn't update these in here correctly. So I got 25. I got 10. So 25 10 and then I got 20 and then I got 50. Ok, sorry about that, guys. I didn't have the same prices, like the ones in year on the on the html page. So let me just go delete old local storage. Refresh the page so we don't have nothing on guard or anything. I'm gonna click on these black hoodie. Okay, so we got these black hoodie in our local storage. We got one product in card, which is fine. We got the card numbers one, and I'm just gonna go into my counsel, and it say's the product price East 25. Perfect. Because we clicked in these hoody. I'm gonna click on these great T shirt now. So should tell me the product. Prices 50. Okay. And eighties. Okay, so we are grabbing the stuff first. What I want to do is I'm gonna do a local storage. Don't set item. Okay. This Yeah, set item. And the one the item that I want to set it's gonna be called a total cost. And what I want to put inside is my product price. Okay, my product price. So let's go into application. Delete all the local storage so we can restart. I'm going to click on these great T shirt and look, now we got the total cost off. 15. So if I'm going to click once again on it, Look, we got just worn in cards, okay? I didn't click. I guess so. I got a twin cards of these great T shirt. The total overall card numbers is still too. But our total cost is not being updated because when we click the first time, we are setting the first value. But if you click the second time, you need to check if there is something on the local storage that exists already or not. So that's what we're gonna do. I'm just prevent these consulate law and I'm going to create the new variable in here. I'm gonna call it leads. Card cost. He's gonna be equals two local storage thought gets item. And what item do I want to get? I want to grab this one that it's called the total cost. Okay, so I'm gonna dio karl soule dot lock off my cart. Their cost is, and then I'm just gonna put these carved costs that we are grabbing from the local storage . Okay, let's look into this console. I'm gonna clicking here on these great moody, for example, and it's gonna tell me my card cost is 15. Okay? And if I'm gonna do a course, the lock off, I'm just gonna do what type off current cost. This is just to show you what kind of data type is it? So I'm gonna click in here in this great moody, and he's gonna tell me my cart cost is 20 and it's a string. So whenever we get something back from the local storage, it comes as a string because we want the number. I'm gonna update my car cost. Okay, Let me just go in here. When I played my cards cost to be equals two A parse it off the card cost. So we are converting from a strength into a number. So I'm going to try once again. Now I want to the type off the data type of thes variable is one of your number, so we can actually use the now toe calculate the total cost of our cart. Okay, so the next thing is I'm going to check if my total cost is no or not. Because, for example, the first time that I click on it, I want to just do this, OK, But if my cat cost is not in all, it means that exists that already something in my local storage. I want to do something different. So my carped cost is difference, then? No, it means that the exists. I'm gonna do something else. I'm gonna put these on my local storage. Okay, let's save these. What? I want to put the inside of year. I want to set my local storage, not set item of these total cost. And this is gonna be whatever is in there from before from the cart cost plus these new product price that we're clicking on Okay, So whose car cost plus price. Okay, um, let's try these off. No, clear the local storage. Refresh the page. So if I click once on my great T shirt, we got some kind of airing here. We got not a number. Let's see what's wrong in here. Well, I think the problem might be because we only want to convert our cart cost. When are cast cut costs is actually different than no. Maybe this is what's giving us a problem. So let's just clear the local storage refresh. I'm gonna click on my great e shift one. Look, I got $15. I'm going to click again now. I got the total off 30 and I got the total products in here to let's check also our products in cards. I got a great issue. If I click on it, I got the name attack a price and how many cut to. I'm gonna do exactly the same thing now for the hoodie. Maybe just like to as well one two. So the total price is 2020. So is 40 plus 15 15 30 40 in 30 is the total cost 70 which is perfect and I got to Gray. Who? These in cards. I got two great T shirts in cart and the totaling here on the top four and my card numbers for so all of these now is working fine. Alright, guys. So we have our total costs. I'm just gonna do clear these one more time and just click. For example, One great T shirt. I'm gonna click one gray hoodie and, for example, worn black T shirt. Okay, so we got 15 plus 2035 plus then 45. How much is our total cost? 45. How many items we should have on the card? Three Look. Card numbers. Three. How much is in here on the top? Three. Okay, if I click in here products in car, I have the great T shirt. I got the gray hoodie and the black T shirt. Okay, All of them in here. All right, guys, that take for these video, and I'll see you in the next one.
6. Creating the Basket Page with All products: right, guys, welcome back in this video, we're going to start doing our count page when we can see all our products that we have to cut. So if you guys remember we had in here are the top, um, button that takes us to the cart page at the moment. Nothing happens in here. If you even look look on the cards in here, nothing happens. Okay, so this is what we're gonna do at the moment. We added here still our local storage with the things that we added from before. If you guys remember, we are just in the last video a a great T shirt, gray hoodie, a black T shirt, all these things. And once we go to our cart on, nothing is in there. Okay, let's let's sort these out. So the first thing is, we need toe obviously loads our script, okay? Because our script is not loading at the moment. So if I put these in now, we are loading at least our number of cards of products in cart. So this is now updated in here on the top. Lunch is closed. He's one for a second. Let's start putting on some kind of HTML elements of styling. So you guys can see what will happen. So the first thing I want to do is just create a thief with a class of products. Contain that. Okay, then inside of these were created thief with a class of product I had, uh Then I'm gonna have on h five with claws off products title, Okay? And I'm just gonna put these product. I'm gonna put another H five to the class of price, and I think that's it. And I'm gonna put a price. Okay? We'll put it out of h five. Forgot to dot for the class, Theseus one is gonna be with a class of quantity quantity. You want some tea? And finally, I'm gonna put one through the H five with a class of total okay, and is gonna say so it'll So it's OK after these leave with the class of brother candidate . I'm gonna put a deal with the class of just products. So this is where we will put all our products that they are on the local storage. I'm just gonna leave it empty because we are going to populate these with javascript. Refresh the page. You guys shoot CDs at the moment, just this brother throw the price total. So maybe we can start adding some CSS. Okay, so I'm just gonna put these in here just gonna put the division. So I know that now. This is what is going to stop mine cards page, and I'm going to do, um, first of all, where do with Container Pro? That's, um where is it? My container products. If I remember, this should be called how we can call it products container. This is fine. So I'm gonna call these products container, okay? And what I want to do with this one ISS were put a months with off marks with off 650 pixels. I'm gonna put the justify contents to be space sounds, and I'm gonna put a margin zero also, so he gets centered on the page. And finally, let's just see, um, margins are also and I'm gonna put the wrong Jim 50 diesels for the top 50 pixels. OK, so as you guys can see we got now these a little bit centered on the page. Coming. Going to inspect. Look, this is my private school tainer. So everything is a little bit more centered on the page, as you guys will see in a second. Then what? What else do I want to do? I also want to put these products container. I think if I'm not wrong, is on my containing just looking here products containing so we're gonna apply these same stylings on all these things. The next thing that I want to do is just put some styling for my product. Header someone put draw decks and there. Okay, he's gonna be with the wave off 100%. Gonna be with Max with off 650 pixels with the spotlight off Flex Flex. Okay, now I want people to justify content. I don't think I even need to put this flag start. I'm gonna put border there. Bottom off. Four pixels, slow leads, lights. Great. Okay. As you as you guys can see is looking a little bit better. I'm gonna put your son margin margin zero also. Okay. Which was my product. Heather, is this Yeah. So this is fine. So he's, like, nicely centered on the page. Now that I want these, I want to drop my products its title with a week off 45%. Look, this is my product. Okay? Then I'm gonna check my price to be with with off, um, 15%. I guess I'm also gonna put some border water exactly the same. Like, from before. And I'm gonna put the thesis flake off flecks on, justify content? No, A line heightens. One of you guys will see in a second. Why? So these things for the price, I think that should be fine. Yeah, because after, I'm gonna do something else in there Eso I got these. We got these for big cells. I don't think I need to put these border both. Um, actually, um, we'll see. We'll see. Let's let's just leave these for now. And after we will, we will just get rid of these. I'm just gonna copy This is gonna be the exactly same thing. So I don't want to put the video too long just because of these, you guys can always falls and just copy these styles that I have. Okay, so we're for my total and for my products. Okay. When a refresh quantity, I think is missing something for my, um, basket basket. I got my products image, my products. This is gonna be for after this is gonna be for my products. I think that's it. Yeah. Waas Once we go back, my quantity I think I'm missing my quantity. That was the thing after the price. Okay, I think these are you expecting my price? Yeah, I think this is fine for now. Okay, Right. So we got these parts, and obviously we don't have nothing else. I just want to now go into my main dot Js. So we got all these styling I want to create now, another function that is gonna check if there's something in my local storage to check if there s an products at the moment, That is three of them in here. If you guys remember, we got that. Just push this. We got some product in card. Gray T shirt, one gray. Who? The Juan. We got a black T shirt. One total cost 45 got the count. Numbers three. Okay, So, um, let's go and start putting these with our job script, so I'm gonna create the function called these play cards, okay. And I want this function to run whenever we love the page. So whenever we load the page for the first time, I want these functions to run straight away. That's why I'm going to call it in here. And what these function is gonna do is I'm gonna do it. Let's carb items equals. So the local storage daunts gets item. And what's the item that I want to get? If you guys remember, we got these products in card. Okay, So products carts, then obviously finding to do card item equals to Jason dots. Because when you grab some objects from the local storage, they come is Jason With all these strings around, we want to convert from Jason into JavaScript objects. That's why I'm using these, Jason, not pars. I'm gonna put these in here and now. I'm just wanted a comfortable look. Just make sure that this is working. I'm gonna pass in here. This card, okay? Going to save these? I'm gonna check. My console card item is not defined online. 98 cart items. Okay, That's what I wanted to come. I Teoh. Okay. Contact is what they find when, Okay, there was some marries in here. I think it's kind of items. So if you guys check, Look, when we love the page on my console is saying, Look, I got all these things coming from my local storage, which is really what we want. We want to check what kind of products we have when our local storage. Right. So really, the first thing what I'm gonna do is just do a check if card items. Okay, So if I just put something like this, card items is going to check if it exists or not, if he's gonna be no or and they find this is not gonna run, okay, I want to check these if card items. And I also want to check if these these container these products container because on our home page, because we have sharing these JavaScript final without a home page and with this card. So I just want this to run. If these products don't contain an element is on the page. So I know that dysfunction is only gonna run for thesis page. So what I'm gonna do is just do my let's products container. He's gonna be equals. Two documents, dogs, query, selector off. Who had remember these products. Uh, container. Okay. So if the's element exists on the page, I want these two things to run. I'm gonna put these hands. Just make sure that this is working over the web. A closer look, Lord. And I'm going to say I'm running. It's just a test. I'm gonna go into my console in here On the top, I say running. So it means that we are on the cart page with the product not containing element exists. And we also have something on our car items in the local storage. Okay, that's what we got me. This if statement condition. So now, Really? What I want to do is let me just separated this council law. I'm gonna do my products containing okay, Don't Skinner html. Okay. I want initially when we load the page to be empty. If there's something that already ok, and then what I'm gonna do is I'm gonna look through. If you guys remember from this consulate law where we were grabbing all our stuff with these cars items I want to look through all these. Let me just doing here another consulate clock so you guys can see close the lock off the cart items. Okay, look, this is an object with a key of gray T shirt, gray hoodie, black T shirt and inside there is a nominal object, of course, but I want to look through all of these. So I'm gonna do well objects dot values from my cart items. Okay? And then so I want to check the values of my carp items. I don't want to check these keys. I just want to check the the values inside. So I'm gonna look first through these objects than through this one than through this one and so on. I'm gonna do a mop. And in here, I'm just going to call these an item, for example. Okay. And now he is what I'm gonna adds. I'm gonna do a product container. Thought in html, I'm gonna do a plus equal plus equal. So I know that the first time he's going to run first time. What? We have nothing. So the next time is gonna add something in there, he's gonna odd, because if you have multiple products you don't want to override, that's why you need to put the plus equals. OK, so I'm going to use some back ticks. Okay, because I'm not familiar with these tactics is just the way so we can inject Cem variables inside with the streaks. And in here, let me see. I'm just gonna put a thief, okay? With that class of products, Okay. And in here, I want to go. If you guys remember these, are you my cards? Okay, I cuts. I want to put a close bata this one down here if you guys will check. I'm not sure if you ask any because of my image that you guys will see me. I'm gonna push in here. You can always copy these. I like an element. Okay. I'm gonna paste it just under it. Okay? I let me see somebody's iron icon and then after desire Nikon, I'm gonna put an image. So is I. M g. We this force off, okay. And this is the source. What I'm gonna put is, um, don't slash and I'm gonna put images, dogs, a dollar sign, and now I'm gonna grab the item thoughts. I think he's tired. Don't j pay and you find not wrong. I think that seats and then I'm just gonna put just clothes, the's. I would also put the Spahn okay. The Koran class at the moment. I'm just gonna put the all right dog's name. I think that's it. Just close these. Let's just refresh the page and let's go into the car. Look, this is what we have at the moment, OK? Coming up just with this. So let's style gray T shirt. Let's some problem in here with my span. So what was it? Maybe this Okay, this is fine. We got our I got our, uh, closing button because we will close thes after we got the name, we got the image, and that's it. Let's put some stylings in this. Let me see. Find missing something. I'm gonna put my, uh, styles just in here after my products container. Okay. I'm gonna put these, uh, are you Nikon? So I could I'm gonna put these styles, okay? Just increase their phone size products containing I can. I think everything is fine if I'm not wrong. I see what might be wrong in our product container. I want to just crying here. These products Look, this is what was the problem. Okay, we've got these products that should be when we want to put If you guys remember in our cart this is the thief where we're gonna put all of these. So now is looking better. Okay, s so this is fine. Let's on the rest of the stuff. So I'm just gonna go in here into my dot map. Let me just see. What else do I want to put in there? I want to put another gift. Okay. With the claws off Price. Okay. So I'm gonna just cause Steve now, what I want to put in here is just that I actually can just put these in one line. I want to put a year. Just the item Dogs Price. Okay, so I got the thing toe, take out these things from the this product from the cart. I got the name, I got the price. Now let's do another one for the quantity. So I'm gonna do now, Deif Okay. With Kloss off quantity, class of quantity, and then I'm gonna close the thief, okay? And what I wants to put inside is I'm gonna put actually some iron icons for increase and decrease. So if I'm just gonna go into these icons um You guys see these things? I'm just gonna put something like these. I'm just gonna copy some things that I have in here when a police I and I could. Okay, these goes inside. Then after, I'm just gonna put what I'm gonna put the span and we'll put the span weeds. My item dot in cart. So frightened part eso got these. And what else? I just need to put another one is going to be this one. The arrow to the right. So I'm just gonna copy as well. I'm gonna put it year after the spine check. Look, this is looking much better, okay? This is looking much better mixing something on my styles on my price. I need to put these one as well. Okay. Yeah, because was missing these from here. Finally, we just need to put something on the total. Okay, so I'm gonna put remain dot Js in here. Just put another thief. Okay? So calls the view. I wouldn't do these with a class off total. And now inside, I'm just gonna put a dollar sign these to put my item thoughts in cards times my height and thoughts price. So for example, in here we just have 15. So it's gonna be 15 times one is gonna be the total. So if you have, like, two or three products thes number is gonna multiply by that, and it's gonna give you, like, a total. Okay. Eso This is fine. I want to are just like an extra dollar sign as a strength. And then it Coleman 00 so we can have it like thes is dollars. I'm going to the same thing for the price up here. I'm gonna have another dollar side like thes. So we got these 2010. That's fine. And finally, what I want to do is just after we do these. If statement, let me just see if this is after. Yeah, after my loop, I just wanted to do again my product container dot inner html He's gonna equal to plus equal okay, and what I want to ask. So I'm gonna put some more tactics. I need to put these. That's just semi. Colon is just a good practice to go to put a if okay, and I will put the class off. Um, basket. So? So container report a NH four that class off baskets. So it's all so I told. Okay, inside. I'm just gonna poured, um, Baskets total. Let's school these age four hands. I'm gonna put warm or h four. Okay, this time with a class off baskets, I want to close these h four and inside. I just want with $1 signs so we can see the dollar sign on the page. Then I would have put door sign curly braces so I can put my cart. Okay, If you guys remember from the local storage for going toe application our total cost, I need to grab it in here. So I'm gonna do the same thing. Like from before. What can't cost when a copy these from before. I'm gonna put it in here. Let card cost. And down here, I'm just gonna put cards. Plus Okay, so this is fine. The only thing that we are missing now if I'm not wrong, is just add a little bit of styling because he's missing for them. So for the basket total container, we're gonna dance these. Okay, then for the basket title, I'm gonna put the week off 30% and my baskets total. I'm just gonna put the week of 10%. Okay? Like that. And as we can see Look, obviously, we still don't have these things working. This is what we're gonna do next. But we got all the products that we are adding and we want to the totals. So let's just get read of all of these local storage. As you guys can see, we don't have nothing in here at the moment. And so I'm gonna go into home. I'm gonna add, for example, maybe like two black. Who? These 12? I'm gonna out maybe three, um, 33 of these black T shirts. 123 So we got to two black hoodies and we got three black T shirts with a total off $50 for this 1 $30 for these four, and we got this total. Alright, guys, that's it for these video guys. Now, the only thing that we're missing now is just like when we click in here. We can remove all of these brothers even if there is 123 or whatever. And then just I click on these arrows to make sure that we can increase or decrease the quantities. Alright, guys, that's it for this video. I'll see you in the next one
7. Removing Products from Cart Page: All right, guys, welcome back. So in this video, we are going toe added the functionality to remove these items with this button that we have in here. If we click on it, even though there might be like two or three of these black hoodies or even if you're gonna remove this black T shirt in here, we can remove them all at once by just clicking these button. So for that, I'm just going to create down here after my display card function. Just gonna do a bit of space, and I'm going to create a function called Deletes the leads, buttons. Okay, something. And now, really, what I want to do is just like when I click in one of these buttons, I just want to test to make sure that there is a console, that log or something to make sure that this is working. So first of all, let's target all of these buttons on the page, So I'm just going to create, um, variable called delete buttons as well. It would be the same name. Okay? He's going to be equal to documents dot queary selector all you know, because there is gonna be multiple of these elements on the page. I mean, just pushed these a bit more so we can see enough that I can just resize it. Ah, and these items, If you guys go in here when you click on this, we can actually go on a product. And then I in Aiken. Okay. So I can do products, and then I am Icahn. That's the element. Okay, that should be good. Now, I'm going to set up a four loop in here. So, four, let's. Hi equals 20 I'm gonna do I less than delete bottoms dot length. So as many buttons is we have, we're gonna do a four looked through all of them, then I'm going to do a I plus plus. Okay, so now I can actually loop through all of these buttons, OK? Doing the the lead buttons I dot arts event listener and the event listener that I want to have in here is just a click. So I'm gonna pass a function or needs. And right now, just to test it out, Of course. I want to do a console that locke off clicked. Okay, So the pages refreshed. Let's go in here, let me open my console. I'm just get rid of these. I'm gonna click in these button and nothing happened. Um, okay. Obviously nothing happened because we created this function, but we actually never call it, so we need to call it somewhere in order for these Teoh to be able to run. Of course. So let's do that. So I want to call this function, Delete buttons to apply these event listeners, click one ever with this. Play the cart. Okay, So before on our previous videos, we set up our display card function, which display all of these items in here. So once everything is displayed on the page just on the end of these display cards, I'm just going to call the delete buttons function. Okay, Now, our card is everything is displayed in the end, we call the delete buttons function and the delete buttons function. Just set up an event listener ofc leak that whenever we click on these buttons, it just as a consul dot log of clicked. So that's exactly what I'm gonna do. I'm going to click in here and it saves clicked on the top when you click on these one look , and it comes two times as clicked. So now these buttons are ROK are with a function that we can do something with it. So probably the first thing that wants to do now is whenever I click on these button, I want to grab these, um, name off the product itself. Okay, so if you guys go back in here into the HTML, you can see these. This is our eye in Aiken, for example, where we are actually clicking with the button. Ah. Then if you guys go up to the parent, you could actually go inside of the parent, get the decks content, which should give you at the name of the product. So let's try these out. So I'm going to do in here the leads buttons. I dogs parent element. So we are in here on these iron Aiken. I want to go up one level to the product, then. Okay, I'm gonna do a dot text condiment. Okay, But obviously, I need to put these inside of ah, variable. So I'm just going to call this one in here. Let's product name, for example, products name. So I'm just initializing the variable up here and now I'm gonna put product name equals to the delete button. Okay? The wounded. I'm actually clicking. So imagine, for example, if I'm clicking on this one, I'm going to the parent element product. I'm going to get the text content of it. We should be black hoodie. So this is gonna apply the same for all the other products that you might have in here because, um, it's just gonna be the same template that we put for all the different products in here. So let's just do a console that look off these product name right now. Okay? Let me save these. Let me go into the console. I got one. Ah, consulate logging here from before from 102 Um, which is this one? Let me just comment these one outs, because I don't think we need these for now. Okay, let me refresh the page. Let me click in here and look what I get. I get black Hoody, OK, But the problem is that because we're grabbing all these stuff from inside all the text content is also bringing a lot of different white spaces that we don't want. So probably What we need to do is whenever we grabbed these text content, I want to do a dot dream these dot Treem basically removes all the white spaces before and after and the names that we have in there. So let's try it out when a click. And now I got black. Who the If I try this one and when a click and he's going to give me block T shirt Perfect . But I want as well now to, um put all these attacks that we have all in lower case because I'm gonna show you after what I'm gonna do. So I'm going to do to transform these all in lower case. Let me just We're all see so we can just wrap our code so it doesn't go out of the screen. So I got a product name equals to the delete button. Which one I'm clicking on at the moment. I'm going to the parent element, grabbing the text content, streaming it so he removes all the spaces from before and after. And now I'm going to do another one, which is to lower case. I think you need to put like that so to no not too local. Too lower to lower case. Okay, let's trite. I'm going to click on this one, and look, now, I got black hoodie, for example, and it's all in lower case. That is no capitals. Nothing. Okay, after we have these, I also want to just remove the space in here in between. So I want the world to be just one, because I'm going to show you what I'm gonna do with that. So for that, I can just go in here and we're dot replace. Okay, I'm gonna do a bit of rag X. I don't know if you have guys ever heard about these, so I can just put in here two of these fourth slashes, and I'm gonna put the G. Okay, so these means that is going to look for any match for some Ah, like space, like thes one space globally. And I'm just gonna replace thes weeds, an empty one. So is basically removing that space from before. I'm just increasing here so you guys can see it better. So it should be like thes daughter replace. We want. We're looking for a space globally everywhere and just replacing it with the empty space. Basically like removing it, Like I said. Okay, let me room refresh the page. Clear these. I'm going to click in here and look what I got now. Black hoodie. And if I click this one, I got black T shirt. So why was I having all the trouble to get these these names? Because if you guys remember up here, Okay, when we create our our variable products, we have the name. We have the attack. And now with the stock, if you guys check is equal to these name that we just craft so we can actually grab these products all information to do something with it. Okay, so let's start doing that. So I'm going now down here. Okay. Ah, to the delete buttons. I'm just going to start the new variable called latte product numbers, and he's gonna be equals two local storage dot Get item. Okay. And the item that I want to get is if you guys go back to the application, I want to grab these card numbers. So I want to know how many number of products we have in our cart, so I'm gonna put in here cards numbers. Okay. Ah. And now, whenever I click in one of these buttons, I just want to know, for example, I'm gonna do a consul dot log, um, of how many products we have. So I'm going to do in here? We have. I'm gonna put a plus, and then I'm gonna put another plus and then I'm gonna put the space products in a cart. Okay, so I'm going to refresh my application going into the console. I'm going to click in here, okay? And he tells me we have five products in cart is just telling me how many products do we have and off course, if you're going to the application, we got five products in cart and you can see it in here as well. We got two of black hoodies and we got three of the black T shirts. Okay, so why was I grabbing these? I'm going to show you. Now. Let me just get rid of these, consul dot Log now. Great. Some space. I want to set up a new local storage in here dot Set IDM for the card numbers. So I'm gonna do card numbers. Toby equals to what? To the products numbers. Okay, so if you guys remember, initially we are just grabbing the the initial product values that we have in here on our local storage. And then whenever I click on one of these delete buttons, I want first of all to know which one is the product name, which we just grabbed. And now I'm updating the local storage card numbers. This one in here that tells me the total products on the page, and I want to grab these total product numbers and then my nurse, the total products that we have in here in these row. Okay, so how can we do that? I'm going to go in here on the top and, well, let cards items he's gonna be equals two local storage thought gets IDM products in cart. Okay, so if you guys remember products e in cart, um, where is it? Where is it? I can just go in here and check the products in cart. We have the black hoodie and we got the black T shirt. And then it tells me that the black hoodie, for example, he gives me the name. It gives me the talk, gives me the price and in cart the same in here for the price and in cart. Okay, Um, I'm not sure. Why am I on the Maybe I have some error, I think in year on my console. Yeah. Where is it? Online. 151 Ah, because I still didn't finish the's. That's fine. Okay, We still didn't finish these anyway, so I got this cart items. So, just as usual, I'm gonna do a consul. That log of these cards items. Okay, so, um, let me just comment this for now. I'm going to save these, and as you guys can see, when we load the page and the delete buttons get cold, we can see these, um, council not log that we have in here from the cart items. Obviously, everything that is coming from the local storage, like I covered before it comes with all these strings because is in adjacent format. So we need to convert these from adjacent formats from all the strings into actual JavaScript object. So that's what we're gonna do now. I need to do cards. Items is going to be equals to Jason dots, pars, and I want to parse what these cart items. Okay, so now when I do these, look on the page. Look at here Now is a normal javascript object. All right. Okay. So look at these. I got these names in here. Black hoodie. I got these naming here Block T shirt, which is the same like when I click in one of these buttons. Look, black hoodie black T shirt so I can actually grab these object from the local storage doing these? Look, I'm gonna do a console that Locke in here as well off. Actually, I need to do it inside off. I need to do it inside of year of when I click the button. So cart items and then inside, I'm gonna put the product name. So these is going to give me either access to these object or access to these object. So I could do, for example, let's say, what do we want to grab? We want to grab the name, the tag, the price or the in cart. I'm just gonna put ah, first of all the name. Okay, so I'm gonna put dot name, and then I'm gonna put the plus to give some space and then another plus and I'm going to do CART items, product name, and then I'm just gonna put in here, for example, in cart. How many there are in card? Okay, So if I click in here, is gonna tell me the name and then how many there are in cart? Let's try it. Look. Black T shirt. Three in cards. Okay, if I click, these one black hoodie now gives me the name Black hoodie and two in card. So basically, now that we know how to grab the values that we want, I could just set up. Let me just get rid of these. Consul, those logs, I can just do a local storage dot set item card numbers, Toby, The total numbers that was in there before, which is five minus. Okay, these products, Okay, card items, product name in cart. So it should just get rid of these one from the total one on the page. But this is just one part of the problem, because we will update on Lee the the cart numbers and the card numbers. Okay, is just gonna update this part in here on the top and the total card numbers we also need to update the total cost. All right, so we will do a local storage dot set item, and I want to set up the total cost to be equals two our card costs that exists already in here on the local storage. So I'm going to go in here on the top and just do let cards. Cost equals two local storage dot gets item. And what is the name? Total cost. Now, I can use in here my card costs. So this is the total that we have at the moment on our local storage miners. The price off these two items that I have in here. So I will do. I'm gonna put some parentheses in year. I'm gonna put cards, items, products, name, dots price. Okay, so we got to the price of it for one, and then I'm going to multiply these by the quantity that we have. How can we get the quantity we already seen before? That we can access through these in cart. Good. So these now should take care of our total cost. But finally, we needs to remove whenever I click in these, and I want to remove it I want to remove it as well. From our local storage from these products in cart. I want to get a re read of that in there. So for that, I can just do If I can go down here, I can just do the lids card items, products name. So these will delete what I have in here that I don't need any more. And finally, I just have to update these products in cart on my local storage. Like this local storage dot set item. What item? I want the products in cards. Toby equals to Jason dots. Strange If I remember guys that whenever we want toe update some kind of objects on the local storage, they need to be on adjacent format. Soto convert from our regular object into Jason format. You just do Jason dot string If I and then I just passing here the card items. Okay, let's just close these Finally. I just want to call that this plate cards again and the on loads function on loads card numbers that they will take care of our page to just reload with the exact products that we have on the local storage. So Let's try these out. I'm going to just refresh the page. I want you guys to play close attention to what we have in here, because after we will try with other things anyway, so we have on the top five brothers in card. We know that our total cost is 80. Okay, so I'm going to remove these two black hoodies. So two of them. So we should have finally three in total. When I remove these and because I'm removing these two black who these they cost $50 the total should be, what, 30? Because there is only, like, the black T shirts in there. So let's try these and see if he's working. I'm going to click on it. Look, I have three brothers in cart here. It is the three products. I only see these three products. I have the total in here, and that's it. If I refresh the page, if I'm going to delete this one, it's all gone. Okay? So, basically, you can even go to the back to the home page out more stuff. Ah, and this is gonna work. So let me just show you quickly. If I go to my home page I I at, for example, a great T shirt to gray. Who these. So I got three total on the cart. If I click on these. So I have three on the card. If I remove Ah, all of these two gray who? This that they cost 40. I should have a total of, what, $15.1 product. So let's try it. So $15 1 product, one product on the top. It's working as intended. Alright, guys, there's only one video left now that we will look into how we can just click the quantity buttons to change, increase the quantities and decrease it as you want. All right, so I'll soon the next video.
8. Increasing or Decreasing product quantity in Cart Page: All right, guys, welcome back to the final part of building a shopping cart with vanilla javascript. So the last video we just managed Teoh, if you remember, like, art something to the cards, okay? And then we could just, like, remove the things like this. But now, in these video, we're just gonna be able to click in here on these quantities and just increase them or decrease them. All right, So if you guys remember up here when we did our this play cards, we set these buttons in here. These spans. Okay, let me just crawl these. So these puns in here, they have a class of decrees or increase, which are these buttons in here? These icons. So the first thing I'm gonna do down here, so I don't want to make these video too long, so I'm just gonna get started with this. I'm gonna create a function cold. Manage, Kwan Teoh T. Okay, this should be fine. So I'm going to create this function. And the first thing that I want to do is I want to grab all of these buttons, all of these buttons, that they will decrease the quantities and also I want to grab all these buttons that they will grab the increase of the quantities. So let's start in here first. Let's the crees buttons is going to be equals. Two documents, dots, query selector. All okay. And what is the class that they have? If you guys remember, let me just scroll down. Up here is decrease. Okay, so we got Let me just get rid of the space decrease. So that's what I'm gonna put down here. Where is it? Led to decrease buttons equal to query selector all. Ah, decrease. So I'm gonna grab all these buttons that they will decrease, and I'm one of the same thing for the buttons that they increase. Okay, so I'm gonna put increase increases buttons, and it's gonna be equal to document that query selector all and I think is increase. Okay, let me see if that's what I put the up here. This class of these buttons is increased, so we congrats them like that. Okay, Now, I'm actually going to go in here and just looked through all of these buttons and Adam, an event listener. So when we click on them, we can actually do something Let's do our four look just as usual. I'm gonna do a four. Look, Let I equals 20 I needs to be less than decrees Hopes. So I need to copy is decreased bottles dot length because you guys remember we are grabbing loads of them. So it was like an array. We can actually see. How many do we have in here? And then I'm just gonna put I plus plus, So we're gonna increase by one every time that we do the loop. Okay, Now, I'm selecting these decreased buttons, and I'm gonna put in here I so we can just look through all of them. So the first time that is going to be I's gonna be zero. So we're going to grab these. Ah, decrease button. The next time is gonna be this one and so on. So I'm gonna do a thoughts, arts, even the listener. What event listener do I want to pass in? Here is just a click. I just want to click on it. So let's put it like now I'm just gonna put the normal function and insight. I just do I just want to do right now. A console that law of decrees. Buttle. Just make sure that this is working, okay? Now, obviously, this is not going to do anything until we call these function called manage quantity. Until we call it this is never gonna add these event listeners clicks to anything. So the best place to call this function would be probably when we do our display cart. So whenever we show all these things on the page, I want to kick in these function. So we will. Aren't the event listeners to these decrease buttons? So let me just open in here. The inspector. I'm gonna open the console. Okay? Let me just refresh the page. Let me just open these a little bit more. Refresh when it clicking here, a look. Decrease button. I'm gonna click in this one decrease button. So this is working. I can do exactly the same thing. Now, I'm gonna do another four loop, Okay? This time is going to be for the increased buttons. Okay, so I'm gonna just replace these. It is going to be exactly the same thing. I'm just couldn't put in here. Increased bottle. Okay. Increased button. I'm going to refresh the page clearly It's Consul. I'm gonna click thes increased buttons and look, it's working. Okay, so now that this is done, we will have to actually start grabbing the things from the local storage like we did from before and actually start manipulating the data. So let's do these now. First, I'm gonna grab all the cart items that I have on my local storage. So if you remember application, where is it? My local storage. Let me just open these local storage. And I got in here on the top. Let me just put this up. We got some card numbers, total items and everything, so I want to grab my cart items. So it's like the products in cart, this one. So let's just grab it. Now. I'm going to go in here and do let's card items is gonna be equals. Two local storage dot gets item. And the item that I want to grab is these products in card. So I know. What's the products that I have in card right now? Let me just increased these a bit more so we can see it better. Okay, So what was it? Products products in? Ah, card. I think That's the name. Let me just over these now. Increase. Yeah, Exactly. Okay. Products in cart. Okay, let me just put down year. And obviously, now that I just grab these products in cart, I need to do adjacent, not parse, okay? Because they are coming as as Ah, Jason object. So I need to convert them into javascript object. So I'm gonna do cards. Items equals to, um Jason dot pars. Okay. And I want to parse these cards items. I think we did this before in a couple of videos ago. Um and that's it. Because if you guys just try to do a console, that log of these cards, items look close a little log of these cart items. Okay, Just before we did the parts. Look, that's still going here into the console. Let's refresh. Look, do you see this is coming all with these string five things. This is like in adjacent format, so we really need to parse it into regular javascript objects. You see, after I did this now I do my consult of log. If I refresh the page where we refresh the Beijing here now I have some good javascript objects as you ask. NC. Okay, now that we got these, I actually need to know Whenever I click in one of these buttons, I want to know the current quantity that we have in here. Okay, so that's what we're gonna do now First, of course. Let me just one year before I click just these decrees button I'm just gonna do in here. Um, actually, no, I don't need these. Let me just do these in here. I'm gonna do where current quantity. He's gonna be equals two. And now I'm going to do a document, not queary selector. Oh, sorry. I don't need to do these. Let me just get rid of this. I can just do this one, okay? This is the button. For example, if I'm clicking in this one, I can just grab these. Actually, these button where I'm clicking and then just two adults, parent elements, parent element. So let me just show you in here on the screen. Um, where do I have? So these is thes iron Aiken. Okay, so I'm clicking. Let's say, for example, this one I'm clicking in here. I want to grab the parent element, which is this one thes dif. So that's what I'm doing with these dot parent elements. Then I can just do a Dodds Queary selector. Okay. And what's the query selector that I want to do? I want to grab these pan. So I'm just gonna do in here span, and then I just want to grab the text content, okay? And now I should get the value of whatever is in here right now. Okay, remember, remember, guys that before we grabbed these value from what was on the on the local storage. But now when we click in here, we don't have access to the local storage straight away, so we need to grab whatever the value is in here. So let me just doing here a consul, not log of these to make sure that this is working. By the way, I started these variable in here current quantity, but I never initialize it, so I need to initialize it in here on the top. So let's current quantity equals 20 for example, when when you get started. So let's current quantity. Just put it in here and now I'm just gonna do a console. Don't log of these current quantity. So whenever I click on the button, I will know on the console. Okay. So let me refresh the page. I'm unclear these if I click in here, I should see a one. It say stakes content is not a function. Let me see what I have wrong in here. Oh, I think I know what might be. I put text content is a function. This is not a function is just like that. Let's try again. OK, it's clear these Let's click in here and I got the one. I click him here Now I got the one as well. Okay, so I always got to these value of these quantity when I'm trying to click down so I can actually do the same thing in here for the increase of the quantity. So I can just, like, duplicate this code, basically, So let's just do that. Let's copy this Now. I'm gonna do these in here this time. Obviously, we're gonna do the increased buttons. I was gonna be the same thing because both of them, they have the same parent element. And then we are grabbing the same query selector span and and that's it OK, now that we go to these, the next thing would be were actually grab the name of this product whenever we are clicking in one of these buttons. Okay, So whenever I click in here, I want to traverse the dawn. Okay? I want to move up and try to grab these name that we have in here. Okay, so this is what we're gonna do now. I'm going to say current products, Okay? Current for objects. It's gonna be equals two. Don't forget to initialize this current product current products, He's gonna be equals to an empty string right now. Okay, Now, don't miss something up. Maybe I just missed something in here because we didn't finish. So current product equals two e crees bottom. I saw our current button. Then I need to go into the parent elements. Okay, So let me just show you whenever I click these buttons, for example, where is this button is gonna be this one. I want to grab the parent. That's what we just did right now. Then I want to traverse to the previous element to the previous sibling elements. So let's do dots. Previous elements, sibling look, is even coming in here on visual studio code. So now I did these once we are in here in these live with a class of price. Now, I want to go back one more time to these products okay to these products. So let's dio previous ceiling elements one more time. Dots. Okay, so now I mean here in these product dif Now I want to go inside of these product thief and look for Let me see as I got an image. I got this pan. Okay, I got Oops. I got this spanning here. So I'm gonna do, um, dots, Queary selector. I want to grab the span element, and I want to grab the text content. Okay, so now that I have these, let me just show you doing a consulate of log off the current product. Okay? I'm just doing these When I click these little button, I'm just refresh the page going into the console. It's clear all of these I'm gonna click in here. And I grabbed gray hoodie and I grabbed the quantity from before. I'm gonna click on the black T shirt. I got this one and I got these black t shirt right now. What I also wants to do is actually because I have these name, I want to convert these name in a way similar to what we have in here on the top, just like this stack. OK, so what can I do with these? I can first of all, just covert all these names that we got in here to lower case I can remove these space that I have in between the words and then even dream some spaces on the sides if there is any, So I will have attack named exactly, just like this ones. Because if I have the stock names after, I can just, like, manipulate any data that I have on my, um, on my local storage. So that's what we're gonna do. So in here, just like what we were doing now. And so where was it? Um, manage quantity. We were checking in here the current product After I grabbed this text content. I'm also gonna do ah to lower case. So knots too lower case and I think is like these If I'm not wrong, OK, let's just try it. Let me see the console. I mean clicking here. No, Look, Now, gray hoodie is whole all lower case, and these black T shirt is the same. Okay, The next thing would be to remove these space in here, in between the words. So let's do this now. Just going here after the two lower case, I'm gonna do not replace, so don't replace, okay? And we're gonna do some kind of reggae X. I don't know if you guys have heard about these, so Oops. I don't know why. This is just like jumping all the time. I'm gonna look everywhere for a space. Can you see I'm I'm just putting two times these four slash and I'm gonna put these g two means it is gonna look globally on that text. And then the second thing is, we're just going to replace it with what? I'm just going to replace it with an empty string. So it means that is going to remove that space. So, like I said, we're going to use these daughter replace that he's looking for empty space. So whatever you put in between these four slash is is what you are looking for. And then it means globally to look everywhere. on the on the text content in there and then just replace it with the empty string. Okay, let's see if this is working. Refresh. I'm gonna click in here. Let me just clicking here. Look, Gray hoodie now is completely done and the same in here in this one. Okay, Black T shirt is all gone, but sometimes there's some kind of empty spaces before and after the words that we're not sure if they come up or not. So just to be safe, we can just to adopt stream that gets rid of these spaces before enough that our words. So let's do that. So dot dream, okay, And that should be it for now. So if you remember before in the beginning of these video, we just grab all our cart items that we have, I'm just refresh the page for you guys to see. So, look, this is the current item that I have on my local storage using these cart items. I can actually just go down here after I select my current product. I can do cart items, and now I can select the current products because we just grabbed its name. Okay, I'm gonna put it in here. And now I can just say dot in cards is gonna be equals to whatever was in there from before . Mine is one. Okay, so let me just show you. Because if you guys remember, look, you have these properties of in card. Okay? So I'm checking my cart items. I'm selecting the one with the names. So, for example, this is the name that we just grabbed. I'm accessing the dot in cart, and then I'm just, um, accessing the value that was in there and remove one. So that's what I do when I click in here. Okay, so let's try it. I'm gonna refresh. I'm gonna click in here. L'M just see what happens. I m so something didn't actually war correctly. Let me see. Ah, OK, so this is fine. Look, now my in car t zero because I actually need to update thes now, so I need to call the display card just after I do. That s o just after these. Okay. I need to call the display card, so our page is gonna be rear ender after, so look, let me refresh. Okay? Look, if I'm going to click in here. Okay, so I got these. Now, let me see. Okay? Something is not working exactly as I was suspecting. So I'm gonna let me just see. What do I have wrong in here? Off course. I never actually updated my local storage. Yeah. So after I updated these, um, these object in near this copy of the local storage. I didn't copy in here. I updated these, um, in cards that we have in there, By the way, we can even just, like, short and these up, just doing like, thes like we did from before. Now, I need to go into my local storage. Okay. I'm gonna do a local storage dot set fighter. Okay. And what I committees is the products products in cards. And what do I want to pass in? I want to pass in a Jason. Don't string. If I If you guys remember, we need to make it in in Jason format off course. And what's that? Things that I want to send inside is these cars items that I just updated. And after I did that, I'm going to call the display cards that we created before so we can actually see on the page? Um, I would updated the card, so let's refresh the page now. Should be working. Fine. Okay. If I click in here one. Okay, we gods, I just see a gray hoodie in cart. It's still not exact limits. Let me just see one more time. Sorry about these guys. Let me just see if this is working. I guess I know what might be wrong in year. Look, the first thing would be these mine is one. OK, so we just need to do minus equals, so we just update dysfunction. And also, I'm setting my products in cart that Mrs in here a capital C. Now, these should be the problem. So I'm gonna just refresh the page. I'm gonna click in here and look, now, we just updated the quantity of these to be zero. Okay? Which is basically, like, is not in here, so we actually don't want this. We want to decrease the quantity toe a minimum of one, because if we have zero weaken, just, like, go in here and just delete the product out, Okay, So I'm gonna do in here then. If statement, I'm going to say if Okay, if cart items current product in cards okay, is gonna be greater than one. Okay, if it's greater than then one what's on the cart of these? I can actually just run these stuff in here. Because if it is not greater than one, if he's just like one, for example, I don't want to do anything at all. Okay, so let me just go in here. I'm going to click and look, nothing happens. Okay? Let's go to the home page. I'm gonna add some of these great T shirts. Maybe like 312 to 3. Okay. Now. Ah, if I go in here, I'm just gonna click this one. Did I? How many that I'm gonna add? One more. Not sure. What exactly? Let me just I think it was from before. Let me just clear everything. Refresh going in here. 123 Okay, Now look at these. If I go and here in a press this one, it's ah, go into two. So 30 I'm gonna click one more. It goes into 15. And if I try again, it doesn't do anything else. Okay, so these partying here is all set Now, There is a problem. If you guys looking here, I actually, when I decreased this quantity, my cards in here on the top, my number of products on the card, they're still three. And my basket totally still 45. So we need to also update these. So I'm gonna call my card numbers function that we have appear somewhere. Where is it? Total costs at items, card numbers. Okay, So I'm gonna call these cards numbers just after these cards numbers, and I want to pass in here my current product. Okay. And then the second thing that I want to pass is if I'm just doing increase or decrease function. Okay, so if I'm decreasing the elements on the card or increasing, so I'm just going to say the Curries. Okay, so let's go to these card numbers appear card numbers. Where is it? Um, a bit more card numbers at the moment. We're only taking a product. Now, let's also take an action. Okay, so these action is gonna be the decrease or increase. Okay, so let's just re factor these a little bit. Let me just put in here just as usual. I'm gonna grab my let cards. Items equals two local. Ah, storage daughter Get item. Okay. Products in God's. And now what I need to do. I need to go over it off course. Thes these from Jason object into a JavaScript object. So just like I did down here. I need to do cart items equals to Jason. Dots parse. Okay. And I want to parse thes card items. Okay, Now, I'm gonna do anyth statement. Just re factor these a little bit. I'm going to say if okay, if my action is gonna be equals two decrease. You know, that's the action that we just passed down there. What I want to do is I want to set my local storage thought set item cards, cards, numbers to be the product numbers that we grabbed from before. Okay, so this is the total product numbers that we had there from before. Let's look in here. Um, so is this one card numbers, if you remember. Okay, so we grabbed it in here as these variable. So I'm just gonna say is thes product numbers that was there from before, and I'm just going to remove one also, I need toe update off course these text in here. So what we did now was just updating these local storage card numbers, like the total numbers in cards. But we also need to update thes number in here on our cards on our page, basically in here on the top. So what I will do is I'm just going to go into get into my and not local storage, but documents, not query selector. Okay? And I want to select my card. Okay, if you guys remember this one in here as a class of card, and I want to grab the span inside and the text content of it to be what to be product numbers. So whatever these on our card numbers that we grabbed in here from before, mine is one, and that should be it for these decrease. Okay, so let me just refresh. Let's try these again. Um, obviously, let me just clear all of these stuff from the local storage. It's just clear everything. Refresh the page. Going to home. I'm gonna 123 of this. Now I'm gonna click one to Okay. So, um, I forgot toe, We still at this kind of if statements in here let me just get rid of these and let's just re factor. So this is what we do when we run this card numbers. This is what we do when we actually click one of these buttons. But we're also want to do one else. Okay, if if there are some product numbers. Okay. It means that is like the first time that we load the page. If there are some kind of things in here, I want to set my local storage, Not set item to be. Okay. That cart numbers to be What's to be the products? The product numbers plus one product numbers plus one. Okay. Sorry. Not brother numbers. I won't save action equals to increase. Okay, Because we're gonna increase these after, Okay, in Caries. Okay. And so we're going to do these plus one, and then we obviously update these texts, Toby plus one as well. And after, if we are not clicking any of these buttons and we're just loading the page for the first time, what I want to do is just setting the local storage thought sets item. What's the item? The card numbers to be, um, just one. That's what we have in that on the beginning. Okay. And also just set the query selected of the text content. Toby equals to one. Okay, hopefully, Now, this is all good, and I'm not missing anything, So let me just get rid of this code that we have in here from before, After we just set the products like we had from before, and I think that's it. Okay. I'm just, um clear this refresh. Go to the home page. I'm gonna have 123 Okay, um, something missing in here. Cart numbers. Okay. These might be sometimes when I'm just clear. These again. Refresh. Okay. 123 Okay. When I go in here, I got three. I still there's something else in here. I'm missing. Let me just see quickly. I don't want this is really what I want to say. I don't want to put these action of increase. I want to put if if there are some actually product numbers. Okay. When we click on it like toe arts, when we are in here on the page and we clicked tow ARDS toe card and we run this card numbers. I want to see if there are some card numbers in here. I just want to increase the quantity in there. Um, because we don't even need anything for the increase, which I'm going to show you in a second. And so this is fine. Let's just refresh thes. I'm gonna click. 12345 This is fine. Now I'm going to the cart page, and I'm gonna click 123 And look, these value in here is all goods. Now, we just need to update these value in here off the 100. So let's go down here, okay? On our manage quantity. So when I'm going into my manage quantity, Um, just after I call these card numbers, I can also check in here the total cost. So that's what we gonna do now. Phone will do something very similar. So I'm gonna call my total cost. I'm gonna pass the cart items product decrease as well. Okay, so now I'm going into my total cost. Let me just go in here on the top. What is my total cost function? Just this one in here. I need to pass in action as well, because it's going to be the decrees or not. And I'm just gonna do Anethe statement in here. So if okay, my action, you're gonna be equals two decrease. Okay, so let me just put these one in here now as an else. If so, I'm gonna put in here. Now what? I'm going to set up my cart cost when we grabbed these from the local storage. Remember that this comes at a zoo adjacent object full of these strings. So I need to convert these into actual number by using a parse into so cards cost. Okay. And now I need to set my local storage als, uh, local storage dot Said I term. And the item that I want to set if you guys remember, I'm just checking here is the total cost. Total cost and is going to be equals to what? To whatever He's there on the card cost. Let's say our hundreds and I'm gonna just take off what? My current product that I'm passing in here dot price because if you guys remember each one of these products that were passing, they have a price, a key value. So I can just doing here card costs, whatever was there from before. In here on the top mine is the product that we are passing. Okay, Something to do products God's price. Okay, so let me just clear all of these stuff. Let's go to the home page. I'm going to add 123 Okay, let's go to the cards. Let's check these. Look, I'm gonna click once. So 33 60 I'm reading, like, once. And look 2 to 40 11 2020. And if I click more is not working. Perfect. Now, the only thing that we are missing is clicking in here in these increase button. So let's go down here. It's gonna be very, very similar now, so I can basically just copy all of these coats. Okay, I'm going to copy these. Just paste it down here, and what I'm gonna do is eso We already got these currents quantity so we can just get rid of these now. The current product is going to be increased buttons. I okay. This is gonna be the same thing, okay? Grabbing the name. Okay, then. I don't need to do these if statements now because whenever you click to increase the quantity you don't need like any limits. So it's gonna be a current cart items current product dot in cart. Now, this time is gonna be plus equals one to increase. Now, I want to run these function card numbers. I just want toe pass this time. Okay, Uh, current product. Okay, So if I'm going in here on the where is its card numbers? So I'm going to say if action equals to decrease. Okay, um, this is not going to run then is gonna check if there are some products already in the database in the local storage, which there is. If there is already something in there, I'm just gonna run these that it will increase by one. So I don't need to do these. Actually, action equals to increase. You know, you could do if you want to, but is just fine. Now, what else do we have? We have these for the card numbers to be correct. We got this one for the total, Costas. Well, which we don't need to pass these actions because let me just show you total costs as well . So total cost, we can pass a product in in action. I didn't pass now in action to increase. Because look at these. If action equals to decrease, we are not doing these at the moment. Okay? Now, I'm also checking these thesis from another video from before I'm checking. If my card cost is different than no, Yes is different than no, because there is already products in there and we can see that our car total cost our card costs or whatever is already with some value so is different than No. So what are we doing in there? Grabbing whatever is in there and then just to a local storage that sets item of the total cost in there, plus the product price that we are just clicking in here now. So that should be all goods. And finally, what am I doing? Just clicking in here, off course, setting these into the local storage to be updated and after just like running the display card. So everything on our page is updated, so let's run this, Okay. I'm gonna go in here. I'm gonna click once. Look, increased 40. I'm going to click again. 60. So got three. Let me go into the home page. I'm going at 1 to 2 of these black T shirts. So look at these. I got two black T shirts and three of these. Okay, so got 60 2080 Okay. And 3 to 5. I mean, just I'd like four more or 3123 So five times 10 is 50 60 plus 5100 and 10 and five and eight is eight products. All right, guys, I know these really was quite big and is, like, the last of the series, but I hope you really enjoy this kind of project. It is always good. So for you to practice and learn something news. Um, but yeah, just as usual. Guys, thank you so much for watching. I hope you enjoy it. If you have any comments or anything, just put them down below In here. I answer to all of your questions, and I'm also gonna put the link. I think the link should be in here already with the files from these projects. Because if you guys and missed something, you can always watch it again. But there will be some links in here is just optional. If you want to download the the file. So you have everything working fine. And you can compare with your own code as well. Alright, guys, that's it for this video. Thank you so much for watching. And I'll see you in the next video.
Telmo Sampaio
