Build a Shopping Cart with JavaScript – Project Tutorial

In this course you will improve your JavaScript skills by building a shopping cart in JavaScript with no frameworks, joi teaches this course, Joy works at Free Code Camp, and he is excellent at breaking down concepts for beginners, be sure to leave a comment with something you learned in this course. Hey guys, j here. Today we're going to learn how to make a shopping cart just using vanilla JavaScript. So guys, this is a project that we're going to make today. As you can see that this is a clothing store. And we have in row 12 items to sell. Every product card will have an image, a title, some dummy description, price, and these options. So what are these options? These options will help you to specify how much quantity Do you want of this specific product, let's say that you want 15 pieces of this specific product. So you're gonna increase the quantity here by this look at this, I'm making it 15. Or let's say that I want to decrease the quantity, I can decrease the quantity here like this. Okay, so guys, whatever product you select, you can always see the numbers updating here itself. Let me show you a sample. Okay, let's say that I want to increase the quantity of this t shirt by six. Okay, and I want to increase the quantity of the suit by seven, then you can see that this number is updating itself automatically. And do you see these numbers here? 4567? What are these? These are your selections, these are your data. Even if you refresh the page, this data will not get erased. How is this possible? In JavaScript, there's a feature called local storage, throw that feature, you can save all of your data inside the browser. By that even if you refresh the page, the data will never get erased. So we're going to learn how to implement local storage inside our project. And guys look at this, if I click on this basket here, then you can see all of your selected products that you selected from the shop page. So here we are going to get the thumbnail of the product that we selected, we can get the quantity button here, the unit price is here. Along with that we have this number. So what is this actually, so how is this calculated, this is calculated by multiplying the unit price by the total quantity, which is five times 100 is 500. Just like that, all the cards will do all of its calculations. And once all of these things are done, you can see the total bill here like this, let's say that you want to increase the office shirt by 10, you can increase it here like that. And you can see that this number updates itself. And this tool will also update this itself, you can also decrease it like this, there we go. And let's say that you don't want this thing entirely. So what you can do is you can just click on this cross, and it's gonna remove itself automatically like that. So it's gonna work just like that. The source code of today's project is in my GitHub repository link will be provided in the description down below. So once you enter the link, you can see that we have three branches in total. Okay, if I click on here, then you can see that we have the main branch product images and the starter files. So what we're going to do is we're going to download the starter files and start our project. The finalized project will be here on the main and what are these product images? Let me show you. If I click on here, then you can find the all the 12 images here. Let me show you. Do you see this one here? We have all the product images here. And if I go back on the data Jas. So what is this data? Yes, it carries all the data of our product cards. Let me show you a sample. Okay. So if I go back to the store, do you see this data here? Yeah, all of this data are actually stored inside this data. Yes, guys, don't worry, because along the video, I'm going to teach you how to utilize these resources. So let's start our main tutorial. Alright guys, before starting a tutorial, first of all, we need to set up our environment. To do that, you're gonna right click, create a new folder, okay. And then you can name it anything you wish, but for this tutorial, I'm going to name it shopping cart, okay, shopping minus cart, something like this, okay, and then we're going to right click open with VS code, okay, if you don't have this option, don't worry, just come over to the search bar. And then you just hit VS code manually. So once it opens, you're going to come to File Open folder like this, okay, then come over to your desktop, and then search for the folder that you created, which is this one shopping cart open. Okay, and then you can see your project folder, we're getting open in VS code. The source code of this project is in my GitHub repository, I'm going to provide the link of this repository in the description down below. So once you click on the link, you're going to come over here and you're going to find all the files and folders. Like look at this. We have the images folder here you see we did this one. For that you just click on the code, then download zip is gonna get downloaded in a zip format. Then you're gonna open the zip like this, then come over to your desktop, and then extract the file like this look. Okay, then we're gonna open this folder and vs images here. We're going to drag it outside. Okay, next up, let's close this one and then we get the images inside our source folder like this. By the way, guys, this folder carries all the solutions, okay, I don't need it. But if you want to keep it If you want to check it out here, no problem. So I'm going to delete that. Alright guys, let's go back to our VS code here and you're going to see this images folder you see, I'm going to open up this one. Initially, you're going to get four images. Don't worry guys, I'm going to add more images to this folder. But for now, we're just gonna work with four images. Let's open up this okay? And then you're gonna find pictures of shirts, T shirts, formal shirts, etc. Okay, you also get a suit here. By the way, guys, you might have a question like, where did I get these images from? Okay, I got it from two websites. First one is unsplash.com. And another one is called pixels.com. Okay, so you can go to any website, and then you right here shirt, okay, enter, then you're going to find images of shirts, formal shirts, casual shirts, pants, shoes, etc. If you scroll down, then do you see this image here? I took it from where unsplash.com. So you can find that that same image on the folder, you see. So I really hope you understood how I got these images from and you can also use the same resources to do your own personal projects. Okay. Okay, guys, let's come back to VS code. And now we're going to create three files. Okay. So first one will be index html, okay, index dot HTML, then style of CSS. And finally, main.js. Okay. There we go. All right. Okay, guys, let's come back to our index html and make boilerplate code to do that you're going to hit exclamatory sign, then you're going to find this option. If you don't find the option, then do this. You hit control space together, and then you're going to find Emmet here. So if you click on this one, the boilerplate code will automatically generated this is called Emmet plugin of vs. Code. Okay. And on the title we can right here clothing store, okay, since this is a clothing store website, okay, something like this. There we go. One second. Okay, perfect. Now, do you see the style css? I'm going to link it here like this? Look, Li N K. Listen, if you don't find this option, okay, do this. Okay, you're going to hit control space together like this. And then you're going to find Emmet abbreviation, you just click on this one. There, we can see that the code got automatically written. So you don't have to write style css manually in the href. Do these guys, you just hit Ctrl Space together? Can you see this path here? All of them are automatically shown up here. You just click on style css, there you go. I saved your time. Okay, using Emmet. So now you're going to come here, do you see these two tags here ending tags, you just come here and write SC. Again, if you don't find the option like this, you just hit control space to get there. And then you're going to select this option. Okay? And on the source, you're going to come here and then write control space. Okay, and then select this one. Do you see this main? Yes. Click on it like this. There we go. Save it. Next up, come over to the body and let's write some sample text. Okay, so let's write hello, world, something like this. There we go. Alright, guys, now we're going to use a plug in called live server. If you don't have it, just come over here. And then right here, live server, something like this. Let me zoom in. Okay, so do you see this one here, live server made my home Ritwik. They just come over here and install the thing. Once you install a live server, then you're going to come back to your HTML, okay? And then you're going to right click here and then you're going to find option called Open with live server. Okay. By the way, there is also an alternative. Can you see this one here? On this ribbon, this blue color ribbon, you also get the option here it is called go live. If you click on this one, then that project will get opened in your web browser something like this. Do you see this Hello World here. Let me zoom in. In order to zoom in, you just hit Ctrl. And then you scroll your mouse wheel like this. Can you see this one? You can just zoom in and zoom out like this. There we go. Okay, guys, can you see this gap here? Okay, do you ever default styles of your browser, so we need to remove those default styles of the browser? In order to do that. Let's go back to your CSS. Okay, so you're gonna write a star, curly bracket, okay, m zero tab. There we go. Here's what just Emmet. Then you're gonna hit P zero tab. There we go. You see. Next time you're going to write in a box sizing border box, something like this. Save it. Let's look at the result. Can you see that the gaps are gone. Okay. And do you see this font here we are pleased the font family. In order to replace the font family just come over here and then right body. Okay, curly bracket. Now FF tab. Now you're going to remove this save and write S S. If you don't see the option, then do this. You're going to hit Control Space sans save, enter. Done. Okay, save it. So now let's look at the result. Can you see that the font family of our fonts changed. Alright guys, so far, so good. We're done setting up our VS Code project folder. Now we're going to start coding. So the very first thing that we're going to build is this navbar Do you see this navbar here Let's build it up first of all, okay to do that, let's come back to our VS code here. Okay guys come over to your index html and then scroll down to your body section here. Let's remove the Hello World, we don't need it. We're going to also use Emmet here to write HTML markup quickly follow along with me, okay, we're gonna hit dot nav bar tab. If you don't find the option, same solution, just hit control space together, then you're going to find the option. Okay, then hit tab. There we go. That's how we're going to save time using which plugin the plugins name is called Emmet. Okay, you can see that Emmet automatically wrote me a div with the class name navbar. Brilliant. Okay, guys, let's come inside the nav bar. And now we're going to hit h2 Tap. There we go. So this will carry our brand logo name. You can write anything you wish, but I'm gonna write here clothing store. Okay. Clothing Store. There we go. Done. So this is the result. So far, we only have our brand logo name here. Okay, guys, let's come back to the Finalize project. Do you see this shopping cart icon here, we're going to make this one at the same time. Do you see this dark background color, we're going to apply this dark background color to our nav bar as well. So let's come back to our VS code here. Okay. And below the h2 tag, we're going to make another div with the class name card. Look at this dot card, tap. There we go. Now inside here, we're going to have icon and after the icon, we're going to have another div with the class name card amount. Look at this dot card. Mo. Okay, something like this. There we go. And now inside here, we're going to write zero. Okay, so why did they actually write the zero? Let me actually show you. So if you compare the thing with the file as project, do you see this one here? We have a number here. This is 47. Initially, there's going to be zero. That's why I wrote the zero. And for the icon, where will I get the icon from? I'm going to use a website called icons dot get bootstrap.com. Okay, so if you come over here, then if you scroll up, you're going to find a tons of icons here. So for our project, we're going to right here cart like this. And now if you scroll down, you're going to find a lot of options. Do you see this one here? We have a lot of options. So let's pick any one of them. But before picking any one of them, just scroll down. And you're going to find the CDN. Can I see the CDN here, just copy the CDN. Okay, now let's come back to our index html, and then you just paste it inside the headlight this save it done. Now we can freely use a CDN for icons, let's scroll up. So I'm going to use I don't know, but let me just pick this one. Or let's pick this one. Okay. Now you're going to scroll down and you're going to find this called Icon font. Just copy the thing. Let's go back to our VS code. And now do you see this one? Before the cart amount? This one, okay, just paste the thing here. Save it done. Let's look at the result. Okay, so you have let me just zoom in a little bit. Do you see this one here. This is the brand logo name. This is our shopping cart icon. And this is our zero here. Alright, so now we're going to style the thing. And for the color, guys for the background color. Do you see this dark background color? Where did they get the color from? Let me show you. I got it from coolers.co. This is one here coolers.co. I got it from here. So how you're going to use the thing you just come over to explore trending palettes like this. Okay, next up, I just want you to search and then I just picked on the black like this. Then if you scroll down, then you're going to find tons of color palettes I use this color can see this one here to one to five to nine I use this one. So I'm just gonna copy up this one. And then let's go back to our VS code. Guys, we're done writing the HTML markup for our navbar component. Okay, so just copy up the class name. And let's go back to our style css and at the bottom here, you just write dot faced curly rec. Okay, so why did it write the dot? Because if you come back to HTML, do you see this one here? This is the class, okay? If the thing is a class, then you go write a dot. But it's an ID as an example, let me just write your ID. Okay, nav bar. So if the thing is an id like this, then you have to select the thing by writing a hashtag hashtag nav bar, then curly bracket. So I really hope you understood the difference between selecting a ID and class inside your CSS. Okay, let's remove that one. Let's come back to ourselves. CSS remove this one. So we're gonna keep a dot navbar. Okay, next time we're gonna write a background color. Okay, easily write this BGC tab. There we go. Do you see that hashtag FFF. Let's remove that and paste the color that we copied. So I'm going to make it 212. Okay, 529529 Save it. Let's look at the result. So if we go back here, you see everything is complete dark, we can't see anything. So in order to see something, let's go back here and change the font color. Okay, so to do that, you just right here color, sorry, color, like this. And then right here, White. Done. Let's look at the results. You see, we have the results so far. All right, guess let's go back here and apply some padding. Okay? So P tab, so you're gonna right here 25 pixel, and then 60 pixel. So why they give two values here? Let me explain the 25 pixel, you see, this is the value for the top and bottom. And the 60 pixels is the value for the left and right. So padding top and bottom will be how much 25 pixels and padding left and right will be 60 pixels. Okay, let me show you the result. If you come back here to do you see this value here, this is how much is 60 pixels here, this is 25 pixel here, 25 pixels here, and there will be 60 pixels here as well. So I really hope you understood how I applied the padding. Okay? All right, guys, our shopping cart icon looks like this. But we want it to look like this. Can you see this one here? So let's go and style this thing. Okay, so let's go back to our VS code, by the way, guys, is also a very good thing to write comments. So in order to write nice comments on our code, let me show you a new thing. Okay, you just come to the extensions. And right here better comment. Okay, better comment, like this. And now you're going to find this Kanji this one here better comment written by Aaron Boone. Just click on this one and then install the thing. So let me show you the cool feature using this extension. Okay. So you can just write beautiful, colorful comments, let me show you. So if you right, slash star star, enter, okay, star and then star star slash, if you come here, and if you right here exclamatory sign, then you can see that your comment is now red color. Do you see that? So I'm just gonna use the plugin. I also recommend you use the same plugin, which is called Better comment written by Aaron ponte. Okay. So once you install a thing, you just come over here and let me show it to you. Again, you just see right here, slash star star, okay, enter star and then star star slash again. Okay? So if you hit exclamatory sign like this is going to be in red color. And if you hit question mark like this, then it's going to be in blue color. Can you see that? So you have a lot of options. So I'm gonna use the red color, okay, something like this. And then here, I'm gonna write changing default styles of the browser, okay? Something like this. All right. And now I'm going to scroll down here in this section, I'm going to make another comment. So let me just copy, copy this thing from there and then put it here. And then here, I'm going to write nav bar style, sir here, nav bar styles are here, something like this. There we go. Okay. Alright, guys, our task right now is to make the Shopping Cart icon with a number indicator. Okay, but look at our results. So far. We have the icon and the number here, we want this thing to be on the very right side, how do we do it? We do it by using a property called Flexbox. Okay, so let's go back to our HTML, which actually here Okay, so here's the rule, the very first rule of using Flexbox is you have to use Flexbox inside the parent selector. In our cases, look at this one. Can you see this one here? This is the main parent, okay. And this one will be the children. This is also another children. So how many children do you have? You have two children inside this parent? Okay, so let's target this one inside CSS. It is already targeted here. So just come here and write d f, tab. Okay, display flex. Next up. If you save it, then you can see some result. Look at this. Can you see this one here? Previously, this thing was here, okay, now it's on the right side. That's because the moment you enable display flex, there is a default property called Flex direction. Okay, so the default value of this property is called row. That's why you saw this one. Okay. Can you see that? But if you if you come here, and then if you write a column, like this, save it now look at the result can see that this was the previous behavior, but we want it to be in a in a format of row, okay? That's the result so far. Okay, guys, I'm gonna keep it here. And I'm gonna code below. Okay, there's another property called justify content. Okay. So in order to put this thing and this thing apart from each other, we're going to use that justify content property. Follow along with me, JC JC stands for justify content. SB means space between tab. Okay, save it. There we go. Can see that. Now, this is here and our icon is on the very right side. So far, so good. Okay. Now we're going to style our icon here. So let's get started. First of all, let's go to our HTML Okay, to inspect the structure. Look at this. Okay, guys, this is our cart here. And inside this cart, we have two children. Okay, this is the icon and this one is the cart amount, which indicates how many things you have on your basket. It is zero at the moment. Okay, so we're going to style this. So let's just copy this one. Come over to style css and at the bottom here, dot paste curly bracket. Okay, now we're gonna style this element. First things first, let's set the background color to white. Okay, VGC tap Done. Okay, and then we're gonna set the color Have to black. Something like this look not black actually, did you remember that we use this color from coolers. Dotco. We're going to use this color. Okay, done. Okay, done. Now let's save this thing and then let's look at the results. Okay, so guys look at this the results so far, let me zoom in a little bit, okay, so that you can see it better. There we go. Now listen, guys, the next thing that we're going to do is we're going to increase the font size so that so that it looks bigger, even without zooming in like this. And then we're going to apply some padding and border radius. Let's go. So let's go back to our VS code, okay, and then let's give a padding of five pixels, okay, V five pixel, tap, done. Okay, and then increase the font size to 30 pixels, font minus size, how much 30 pixels done. Let's look at the result. Okay, there we go. It became bigger. Let me just zoom out like this. Up to 100%. There we go. It looks much better. Okay, so now we're going to also apply some border radius so that we can make this juicy these corners here. We want to make this corners rounded. Okay, let's apply some border Yes. Like this. Look. Border Radius, border minus radius. Okay, how much for pixel? There we go. Save it. Let's look at the result. Yeah, there we go. We have this result so far. All right, guys, do you see this zero here? I want to hang this here. Just like our finalists project. Look at this. Can you see this 47 Here, this is actually hanging at the top right corner. Okay, we're going to do the exact same styles on this element as well. Okay, so let's get started. So first of all, let's go back to our, what's it called index html. Okay. And then we have to target that element. Do you see this cart amount here? So what is this, this is a class. So we're going to copy this thing since it's a class. So you're going to scroll down and then you go right here dot paste, okay, curly bracket, oh, sorry, curly bracket. And the very first thing that we're going to do is we're going to increase the font size, okay, font minus size. Once again, font size, we're gonna set it to how much 16 pixels. You can use any value like here, but I'm going to put it to 16 pixels. Next up, set the background color to red, okay, BGC, tab, then you're right here, red, okay, and then set the color to white like this white. Here is it okay, save it. Let's look at the results so far. Okay, there we go. You see, we have the zero here. We're just white in color, and it has a background color of red. Alright, now we need to hang this on the top right corner. In order to do that, we're going to use a property called position absolute to do this. So I'm going to come here and then I'm alright us abs. Okay, tab. So position absolute. Let's look at the result. So we're going to see this results so far. Now we need to hang this on the top right corner. In order to do that, look at this. You just come back here and then right top, okay, zero. And then you're right here, right? Oh, sorry, not inherit is going to be zero as well say weightless logo result. Okay, now you can notice something odd thing is, can you see this zero here is not on the very top right corner. The main reason for that is wherever you apply this position absolute Hmm. By default, by default, this body will have a property call look at this position relative, something like this. That's why it behaves like this. But we don't want this thing to behave like this. We want the zero to be where we want the zero to be exactly here. Okay, just like our this one, just like the finalized project. In order to solve this, look at this, you just come back to a VS code versus property position relative, you just cut it. Okay. Now scroll down. Do you see this card here? You just paste it here like this look. Okay, now save it. Let's look at the result. Here is it? There we go. Can you see that now it is working perfectly fine. So guys, I really hope you understood how the position relative and the position absolute properties work. If you don't get it don't worry, I have an entire dedicated video can see this on here. Learn CSS position property with examples, you can just view this video it is just only almost 60 minutes long. Okay? Alright guys, now look at this component here. Okay, this zero is actually inside. We want it to be a little bit outside at the same time, we're going to apply some border radius and padding as well. So let's get started. Okay, okay, guys. So let's go back to our VS code, and I'm going to make it a little bit smaller. Okay. And then I'm going to keep it here. I will do all the styles here on the cart, MO. Okay. Okay, guys, what do I want, I want the zero to be a little bit up and then on the right side, in order to do that, I'm going to come here on the top property, remove the zero and then right minus 15 pixels, like this, save it, then you can see the zero going a little bit up. Okay? In the same way, if you put here positive value like this, save it, then I see then the zero will go down. Okay, so I want this thing to be in negative validated, save it. Now you can see the zero popping up at the same time. This is right. Okay, I'm going to adjust this as well to minus 10 pixels. Let's save it there. Look at the result. There we go. Can you see that? It is now shifting to the right side. Next up guys. Let's apply some border radius and padding as well. So p three px tap. Ok. Now guys, you can see that the zero component became a little bit bigger at the same time. I'm going to apply a border Yes. Okay. Border sorry, border radius, how much three pixel. Okay, save it. There we go, we have the results. So for now, guys, let's compare this with our finalized project. Look at this, okay can see that it is totally identical. Alright guys, we have successfully built up our navbar component. Now the next thing that we're going to build is this cards. Can you see these cards here, we're going to build this cards to hold our image, the title, description, price, and these buttons, which will help us to increase the quantity and decrease the quantity as well. So let's get started. Okay, guys, you might have a question like, how did I make this card layout here is very simple. I use CSS Grid property, and then I made four columns here, okay, in order to replicate the same thing. What we're gonna do right now is we're going to make a div and then we're going to put all the cards inside there. Let me show you how I did the thing. So you're gonna go back to your VS code inside HTML, okay. Do you see this nav bar, it's complete, we're gonna fold it how to fold, put your mouse here. Okay, then you're gonna see a small Chevron here, just click on it. And there you can see that your code is folded. Perfect. Now listen, we're going to make a div with a class name shop like this loop.sh Opie at the same time, we're going to give her ID as well. Hashtag shop tab. The main reason for putting both the class and the ID is that we're going to target this inside CSS, and we're going to target this ID inside JavaScript. Okay, so far. So, so far, so good guys. Save the thing. Now listen, inside here. One second. Let's just look at the fine, less project. Okay. Where is it is here. So guys, how many cards can you see here? 1234. Right. So now look at this. Let's just come back here. And then let's make four div with a class names. Item. Look at this dot item, star for tab. There we go. Okay, now let's go back there. And let's see, what do we have? First of all, we have image. And then do you see all the informations on this card, we're going to make just one div and we're going to put all the new information inside there. So I'm going to name this one image and this one will be called details. Okay, let me show you how you are going to do the thing. So for now, I will not touch these three, I will just work with this one. Okay, let's just first of all, perfect only one div. Okay, and then you can just perfect the other things by just copy pasting the thing. Let me show you what I mean by that. Okay, guys, inside here, I'm going to write img tab. Okay, this will hold my image. Don't, right, okay, just do just put your cursor inside the source and then hit control space, you're going to see these images, Enter. And then we're going to select the image number one like this, okay, save the thing. Let's look at the result. Okay? Okay, guys, if you look at the result, you can see that the image is huge. Okay, we cannot work with this image. In order to make it smaller, just follow along with me, okay, just come over here on your index html, okay, this image here, just right here with Okay, equal to double quote, just put 200 Okay, like this. Don't put pixels, just 200 as it is okay, it's still gonna work like a pixel. Don't worry, just say the thing. Let's look at the result. You see, the image becomes smaller. Perfect. Next up, we're going to pull the details. Can you see this details here. So let's go and put those details by coming to the HTML and below the image. We're going to make another div with a class name dot details. Look at this dot details. Tab. There we go. You see, okay, guys, inside this details, we're going to have the title tag, the description, let me show you what we're going to have. First of all, we're going to have the title tag, the description, the price and the buttons. Okay, let's make those things. Let's just come over here and here. Inside here, you're going to write h3 Tap. Okay, we're gonna hit casual shirt like this. There we go. Now below this one, we're going to make a p tag, okay, P tab, then you're gonna write Lorem, seven, or you can just specify any word you like. Okay, then you're gonna hit Tab like this. There we go. Okay, now, guys, below this one, we're going to have two things together. Okay, let me just show you one thing, one second. So this is price and the buttons, we're going to have a one div, and inside that div, we're going to have both the price and the buttons. Let me show you what I mean by that. Okay, so you just come over here and below the p tag, look at this. We're going to right here, dot price minus quantity, okay? Something like this. There we go. Now, inside here, look at this h2 tab. Here, we're going to have the price Okay, dollar sign. 45. Okay, save it. Let's look at the result. So you're gonna see that $45 here now guys listening the buttons, okay? So in order to make the buttons, look at this, below the price, guys, you're gonna make a deal with a cluster of buttons. [e-mail] tt o NS tap. Okay, now guys, inside here, we're going to use Bootstrap icons. In order to use Bootstrap icons. You just come over here and then you're gonna right here icons dot get bootstrap.com Okay, this website so guys, we're gonna use icons from this website. Okay, now we're going to scroll down, you're gonna see a small search bar here. Just come here and then right plus, okay, now if we scroll down, then you're gonna see this plus another thing that you're gonna see is plus LG, which is a large size. Okay, guys eat If you didn't include the CDN link, just copy that link, okay, then come over to your HTML inside the head tag, okay, just come here. And if you didn't paste it before, just paste the thing like this. Okay, and then save it done. Now we can freely use Bootstrap icons into our project. Okay, let's come back here and with large, you see this one here, I'm going to open it in a new tab, and then I'm going to copy the thing. Okay, let's go back to our VS code, scroll down and this is buttons here, inside here. I'm going to pay something like this, save it. Okay, let's go back. And now I'm going to get minus okay, like this M I N U S, okay, now you're gonna see two dash is a small one, I am in the standard one, and this is the large one. Okay? So I'm going to get this one like this. Okay, let's copy the thing. Let's go back. There we go. Now, before the plus I'm going to put the minus Okay, there we go. Done. Now, guys, between these two icons, you're going to have a div with a class name and quantity. Let me show you dot u, a n, t i t, y tab. Okay, now you're going to play zero here, okay, was the reason for putting a zero between these two icons? The main reason is look is look at this. This is a plus icon, right? Every time you click on the plus, this number will increment at the same time, if you use I mean, if you click on the minus this number will decrease. And let me show you a sample from the finalized project. Okay, look at this one. Do you see this one, this is the plus icon is the quantity here and this is the minus every time you click on this one, the quantity increases and it shows up here. Every time you click on this one, the quantity decreases and it shows the result here. So guys, I really hope that you understood why I wrote this lines. Okay. Alright guys with this, our markup is complete. Let's save the thing and let's look at the result. Okay, now this is the result. So far, it looks like this. But don't worry, guys, we're going to add style so that it looks like this. Okay, the very first thing that I'm going to use is display grid. And then we're going to make four columns. How many columns are here, Count with me? 1234. Okay, so let's go and make four columns. So in order to make that, so if you recall our Flexbox if you want to use Flexbox, you got to apply that on a parent. In our case, look, who is the parent, if I fold this one like this, look at this. Okay, who is the parent of all items? The shop is the parent of all the items right now I'm going to apply my display grid where inside the shop, okay, this is class here, just copy the thing. Hi, then come over to your style css, then scroll down. Oh, by the way, guys, I made a small mistake. Do you see this one here? I wrote the font size two times. Okay. Just remove one from here. Like save it. Okay, now I'm gonna scroll down and make a comment. Alright guys, before coding, first of all listening a comment here. Okay? I mean, a better comment with some colors. Okay, in order to make it just right slash star star, enter. Start, okay. exclamatory sign for red color. Or you can use question mark for blue color. I'm gonna use red color. Okay. exclamatory sign then star star slash done. So here you're gonna write a comment shop items. Styles are here. Okay, shop. Items. Styles are here. There we go, John. Okay. Now I'm going to hit dot paste, curly bracket. Now inside here, I'm going to use the very first line is display grid. Look at this. BG tap. Okay, save it. Let's look. Let's look at the result. You're not gonna see any changes that let's see, you see, we don't have any changes. Now we're going to add more lines to it so that we can see that changes. So guys come over here and then right GTC tab. Okay, now guys, one second. Let's go back to the finalized product. So how many columns can you see here for right? And I specify 202 and three pixels of width for each and every one of these columns. I mean, each and every one of these cards. We're going to do the same thing. Look at this. So you're going to come here and then you got grid template columns. Repeat. Okay, so how many columns do we need for you, right four, comma. So how much we should each of these columns I'm in card should be 223 pixels. So you're gonna write it two to three. PX, done. Okay? Save the thing. And now let's look at the result. So if you come over here, can you see that text? We're just outside now This inside, okay? It's like an invisible wall here. Okay, let me show you live one second. So I'm just gonna keep it here. And now look at this. I'm going to make a comment like this. I'm gonna save it. Now. Can you see this text actually outside? Now if you put it here like this, save it now. There we go. Now it feels like there's an invisible wall. Actually, that space is getting divided. Okay. Alright guys, so far so good. Next step what we're going to do is use this border here black color border. We're going to utilize that black color border in our car. Okay, so let's go and make that Okay, so now let's come back to your index html. So we are done setting up the shop. Now this item here just copy the item okay, like this. Let's come back to your style css scroll down and below the shop Okay, dot paste. Now clearly record you're gonna write here border. border to px one second to px solid. You're gonna write your hashtag. Do you remember the color that we use from coolers? Dotco. Use this color. Okay, save the thing. Let's look at the result. Now. Can you see this thing? We have four cards here, okay, card number 1234. Okay, even though they don't have data, but still they're showing up here. The main reason for that is if you come over here on the HTML, do you see how many days do we have here? Four days. That's why four cards got generated here. Okay, so if you remove anything from here like this, save the thing. Now look at that. You see, the cards are gone. But don't worry, guys, we're going to generate more cards. Okay, first of all, let's perfect only one card. And then we can just copy paste the other cards. Don't worry, guys. All right, guys. Can you see the image, it looks smaller compared to the cart border. Okay, so let's fix that. In order to fix that just come over to your index html. And then you're going to open up the item. Do you see this width here? Just if less 220 pixel like this, save it. Now let's look at the result. There we go. It looks perfect. Now kinases edges, it looks sharp. We're going to make border radius. Okay. So in our route that come back to your style css and on it, we're going to right here, border radius four pixel. Okay, border does it okay border Yes, four pixels. Save the thing. Let's look at the result. There we go. You see now it's rounded. Our guests Look at this. Can you see this nav bar and this car? They don't have there is no gap between them. Let's put some gap. Okay. Let's come back to your style css and this is nav bar, just right here. MB tap and then 30 pixel legs. Okay, save the thing. There we go. Done. Okay. Now, guys, we're going to generate three more cards so that it looks like this. Okay, so let's go back to your index html here. Now just close the chevron like this, copy the thing, and then you paste it here, then you close the Chevron, then do the same thing two more times, okay, like this. All right, then save the thing. Let's load the result. Okay. Now look at these guys, the details doesn't look perfect, but don't worry, we're going to style them. Okay. Now, how many cards? Do we have four cards, there is no gap in between them. And it is not on the center, just like this one. In order to make those things. What we're going to do is we're going to go back to our style css on the shop. Where's the shop? Here? Is it okay? This is a short we're gonna write a gap 30 pixel legs look, yeah, 30 pixel, say the thing, there we go can see that we have a gap in between all the cards. At the same time, we want them to be on the exact center. In order. In order to do that, just come back here and just write it there's a property called justify content, JC and we want the thing to be sent right. So right JCC, tap Done. Save it. There we go. So we have all the cards on the exact center. Brilliant. Okay, guys. Now let's compare the thing with our final project. Look at this. Can you see this one here? We have a little bit of padding here. Can you see this one here? But we don't have padding on our project. Okay, at the same time, do you see this gap here? Yeah, they have a gap. But we don't have any gap between the title tag and the paragraph tag at the same time, this price as well. So let's make those changes. So in order to make the changes, come back to your style css, and then just come back to our index html. Okay. Open up any one of them. I'm gonna open the first one. Okay. Now, do you see this details here? Copy the details. Hmm. Come back to your style css at the bottom. Okay. Write dot paste, curly bracket. Okay, the very first thing that we're going to do is we're gonna right display flex tab. There we go. Say the thing. Now, can you see this one here? It looks odd. It looks like a format of row. Can you see that? But we don't want that. Because look at the finalized project. It is in a format of column. Can you see that? But it is actually row. So in order to fix that, I mean, why does it happen? That's because there's a property called Flex direction. Once again, flex minus direction, okay, the default value of this one is row, every time you write this reflex, this thing automatically gets triggered. Okay? In order to stop that, just write display, flex direction, and then set it to column like this. Okay, save the thing. There we go. Perfect. Now, guys, next time, let's apply some padding. Okay, be 10 pixel, tap Done. There we go. You see, this looks much better than before. And now can you see this tag uses description and the price. Let's put gap in between them in order to put the gap between them. Just come here and then right there is a political gap property. Okay, gap 10. Pixel safe. There we go. You see, now we have gap. Alright guys. Now let's compare the thing with our final project. There we go. You see, the price is here. And all the buttons are here. But look at our one. This is not perfect, right? So let's fix that. In order to fix that. Let's go back to our HTML. Okay. Now, where is the price and the buttons? Look at this. This is my buttons here. And this is my price. Who is the parent? Okay, here's a question for you. Who is the parent of this price tag and this buttons. It's very easy guys. This one can see this price quantity. This is the parent of both these two tags. Okay, so now what I'm going to do is I'm going to copy this thing like this Let us come back to our style css at the bottom, okay, dot paste, curly bracket. Okay. Okay guys, once this is done inside here we're going to write display of specs look at this DF tab. Okay? If you save the thing now the button was actually here now it behaves like a format of row. Okay, why did it happen? If you recall that I say that there is a property called Flex direction. And every time you write this one, the default property becomes flex direction row something like this look, flex one second flex direction row, okay, say the thing you will need you will see no changes because this is the default property already. But if you want to change it just right column like this, save it, you're gonna see different results. Okay, so for this tutorial, I'm going to use row like this say the thing there we go. Okay, guys, next up, I want them to be apart from each other. Okay, in order to do that, just come here and then right JC SB tap, okay, justify content space between, say the thing. There we go. We have the results so far. All right. Now, guys, we're gonna style this icons. In order to do that. Let's come back to our HTML. Okay, can you see these buttons here? Yeah, this is the main parent right now. And these are all the children's Okay? How many children's that just does the button have three children's. Okay, so now let's copy this one. Let's come back here. And now scroll down. Dot paste. Okay, curly bracket. Now guys, if you guess that I'm going to use display flex, you are correct. I'm going to use display flex. Now look at this. In which format is it in in the format of column? Okay, we want them to be in a row just like this one. Look at this. It is a row format. Okay? In order to do that, just come back here and then write df tab. Okay, what's the default property of flex direction here? Row? Okay, save the thing. There we go. You see. Now even if you don't write the display, sorry, the flex direction here. No problem. Okay. But if you wish, then you can right here no problem. Okay. So right, let's right here, flex direction like this. Put it to row. Okay, there we go. Done. Now, guys, we need a little bit of gap in order to put some gap just right here gap. eight pixels. Okay, save the thing. There we go. We got some gap. Okay. Now, if you want to set some font size, optionally, you can do that as well. So let's say that font size like this, let's say 16 pixels. Okay, there we go save the thing. Okay, you will see no changes because guys, this is the default already already. Okay? If you let's say right here, 26 pixel like this, save the thing is gonna go bigger, you see, but for this tutorial, I'm gonna keep it six look big 16 pixels if you want to make it bigger, sure. Best of luck. Okay, now guys, can you see this plus and a minus? If you notice this thing inside the Finalize project, you can see that this is green color. And this is red color. Okay, so in order to do the exact same thing, just come over to your index html, okay. Do you see this B dash minus LG? This is a minus, okay, copy that thing. Come over to your style css and at the bottom, just dot paste. Okay, this is what here's the minus right curly bracket, then right here color. Or sorry? Color. Then you can write your red. Okay, see the thing? There we go. Now your minus icon is now red color. Let's make it green. Okay, in order to do the thing, same process, just come back to your HTML, copy this thing. Okay. Let's come back to your style css and the bottom right dot paste. Okay, curly bracket. Now you're gonna write your color. What was the color? Green? Green. There we go. Done. Okay, let's look at the result. Brilliant. Okay, guys, let's draw an imaginary line. Okay, on the x axis here, okay, if you draw an imaginary line on the exact center here like this, look at this, then you can realize that this this is bottom here and use this price here. They're not aligned on the exact center. Okay, let me show you a sample. Okay, if you see this line here, inside the price quantity selector, just comment a thing. Okay, save the thing. Now. There we go. Can you see this thing here? They are not aligned on the exact center. Now in order to save in order to solve this thing. Just come here and then right AIC tap. Okay, align items center. This thing works on the x axis and this one works on the Y axis. Okay, save the thing. There we go. Problem solved. Okay. Now you're gonna get this code back like this. Okay, save the thing. There you go. Perfect. Okay, guys, let's come back to the file and let's project and then right click inspect, okay. If you make the things smaller, let me show you if you make this thing smaller, how many columns can you see four, right? If we make a small like this, there we go. Now it becomes two columns. Okay, if we make it even further, then it's going to become one column like this. There we go. Now this is called a responsive website. Okay. In order to duplicate the exact same result, what we're going to do is you're going to come back to your style css, okay, one second. Where is the shop? Okay, this shop here below the shop, we're going to make two media queries. Okay, look at this, add the RED media. And then you got right here max minus weight, okay. So we're going to right here first breakpoint will be 1000 pixels. Okay. Then you got color black. Get your gadget dot sharp, curly racket, okay, inside here, just copy the thing. Okay? Paste the thing here, okay? Now what do I want? The moment, the moment the screen hits 1000 pixel, I want the thing to be how many columns, just two columns, okay? Just specify to here, done. Save the thing. Okay, now let's come back here on our result, right click inspect, Okay, now let's make it smaller like this. There we go. The moment you what is the width right now? 1040. Okay, the moment you hit below 1000 Look at this. Now it becomes two columns from four columns. Okay, now let's make it even smaller is not going to work because we didn't specify the media query. Let's do that as well. Just copy the entire thing. Okay? Paste it here and here, specify 500 pixels like this. Okay? And now here, you're gonna write one. Now guys, save the thing. Let's look at the result. Okay, make it below 500 pixels, okay? I mean, through looking here, okay, something like this. Look, there we go. It works perfectly fine. Okay. All right, guys. So far, so good. We have successfully completed the HTML and the CSS for now we're going to start the JavaScript part. Okay. But before that, guys, look at this one. Can you see these cards here? These cards have different data, look at the image. Okay, they are different, though the tax there are different, the price is different as well. Okay, so how did I make these cards? I just did this. Look at this. So how did we do it? Look at this, inside this div with the class name shop, we just perfected one card, and then we copied and then paste the thing. Now, if you want to replace the data, let's say that you want to replace the image, then you have to replace this tag. Let me show you a sample. Okay. So how do you replace the thing like this look? So first of all, you remove the image from here, and then Ctrl Space, you're going to select Image number two, then you're going to replace it with what official office shirt. Save the thing. Let's look at the result. And wait a second. Let me just also clear this one and run right 100. Okay, save the thing. Let's look at the result, guys. There we go. Can you see that? Now the data changed. Now, how many cards do you have? You have? How many cards? Let's see, for cards. Let's say that we have 100 cards? Does that mean that you're going to manually do all the things? No, guys, obviously no, don't do it. At the same time, look at this. Most of the data here, most of the markup are just copy paste, which means most of the things are repeating itself again and again and again and again and again, right? Don't do this thing, guys. Don't copy and paste the thing here. In order to solve this issue, we're going to use JavaScript. Okay, so let's start the JavaScript. Make sure guys, you wrote this line at the bottom, okay, otherwise JavaScript will not work. Okay, the very first thing that we're gonna do is we're gonna copy the ID Do you see it here? So my main intention was I'm not target this inside style css, and then I'm gonna target this inside ID. I mean, sorry, inside the JavaScript. Okay. So let's copy this one. Let's go back to all main GS. And how do you actually target an ID inside main js? Look at this. First of all, you're gonna write a variable, okay? Let anything you can write anything here. So I'm gonna write here, let shop like this. Look, let's shop a call to you just write your document. Oh, sorry, document. Okay, then what is this, look at this, it is an ID, right? So you're gonna write here, dot get element by ID, then you're gonna write your bracket, single quote or double quote, okay, and then you're gonna pay the thing to get Look at this. There we go. So now we have successfully targeted our shop. And we have also saved that inside a variable. Okay? Now, if you want to test the thing, how the thing actually works, just save it, okay. And then at the bottom, we got right here, console log, okay, console dot log, and then you just write your shop, like save the thing. Let's look at the result. Okay, so now this is the result, you hit F 12, or just right click, click on the Inspect, okay, now you're gonna go to this console, here, you see this. So this entire HTML element came inside the console. If you open up this one there, we can see this one here. Now, if you select on this one, you can see that this thing is highlighted. If you see that in this one, the thing gets highlighted. Okay, so we what did we do, we got the entire markup inside the console. Okay, we didn't want to do that. So what my main focus is that I'm going to make a function here, okay? And then I'm going to make the function in a way that it prints me all the cards automatically. Alright, in order to do that, look at this guy. Look at this guy. So what I'm going to do is I'm going to make a function like this, let generate shop Okay, generate shop. Okay, it's going to be an ESX error function. So you have right here equal to sign, this will be your bracket equal to angle bracket, curly bracket, this is called es six arrow function. And now guys, let me show you the regular function. The regular functions looks like this function, okay. ABCD bracket curly bracket. This is called a regular function. This is called es six arrow function. Okay, we're going to use this one. Alright guys, now I'm going to remove the thing. Okay, now, guys, so how do we stop the repetition? Actually, first of all follow along with me Do you see these things? Just how many things are here, four items are here, right? Let's just remove three of them like this. Let's just keep one piece, okay, let's just come back here and use this function here. Let's trigger the function, like copy the thing, and then paste it here like this. Okay, so we're defining the function here, and then we're invoking it here. Okay, and there's this console here. We don't need the console. Okay, save the thing. Now guys do one thing. Inside here, you're gonna write a return statement. Okay? Return like this. Now, guys fought sorry, I made a mistake, Ray turn. There we go. Now guys, we're going to use template literal. Look at this guys. This is called a double quote. This is used to write strings, we're not going to use this normal guys, we're going to use backticks. This is called backticks. So this is used to make template literals. If you don't find it, you're going to find this key below the EXIT key. So look at your keyboard, there's something called Escape key, I'm an exit key, okay, below that EXIT key, you're going to find the backtick. So you just click it one time, then you're gonna see the backtick. Okay, so we're not going to use this thing, we're going to use backticks. Okay, now guys do this. Inside here. One second, you just come over to index html, just cut the thing like this control x, save the thing. Okay. Now, let's come back here like this. Now, what you're going to do is, by the way, guys, one second, just look at the result. We're going to have nothing, okay. Now, in order to see some result, do this. Just paste the thing like this. Okay, save the thing. Okay, guys, now let's look at the result. Okay, we're still going to see nothing. Why is that? That's because you didn't specifically define that where these things should get printed. Okay, you didn't define the thing. Now we're going to define the thing. So in order to define the thing, like, where do you want to get where do you want this thing to get printed, we want this thing to get printed inside the shop. Because we have defined the class styles in such style css, look at this, we already have the grid defined, okay? Which means that we want the car to get generated inside here. That's why I selected the shop. Okay, now, let's follow along with me just copy the shop like this. Okay, now, come here, pasting. Then you're going to write dot inner HTML, and then you're going to hit equal to site done, save the thing. Okay, now let's look at the result. There we go. Guys. Can you see this one card here? We have successfully generated the card using what? using JavaScript. Okay, now guys, what we're going to do is look at this, can you see these values here? These are called hard coded values, okay? Which means that we just use your hand to write the thing. Now we're going to automate the thing. How do you automate the thing, look at this, first of all, you're going to make a array here, look at this, we're going to let Okay, sharp items, sharp items, equal sharp items data, okay, equal to you're going to make a array here like this. Okay. Now, guys, let's say that we have, how many data do we have, actually, let's check, we have 1234, we have four data, right? So in order to write the data inside here, look at this, we're gonna use curly bracket, this is called object, which means that we are storing objects inside the array. If we write one curly bracket, I mean, if we write one object, which means that in our shop, we have only one thing to sell, but if you hit comma curly bracket, and then if you do it four times like this, which means that we have how many items to sell for items to sell, okay? So these are actually defined inside our objects. Now look at this list, first of all, make the first object so how are you going to make the thing? First of all, you're going to set the ID loop with this. Id colon, double quote, okay? You can write it anything you wish, no problem. I want my just write anything. Okay? Don't keep it blank. Then you're gonna write a comma. Okay, then you're going to put a name here. Oh, by the way, guys, one more thing, this Id do you see this thing? This should be unique. Okay. And now on the name, we're gonna write a casual shirt. Okay, casual shirt. There we go. Now you're gonna hit comma, you're gonna set the price. Okay, so what I'm doing is my main objective is do you see all the data here like this one? This one, this one? I'm just storing them here. Okay, so let's complete the thing. So price is gonna be 45. Okay, then coma D S, C, description of it. You're gonna send the description to look at this double double quotes. Lorem seven, or eight, tap. There we go. Okay. Now below this one, you're gonna get image img colon, double quote, okay, images slash, I m G minus one dot jpg. Okay, so, to not make any misspelling mistakes, just scroll down. Do you see this thing here? Where is it? Ah, this image here, the sources already here, just copy the thing. Yeah. And then put it here like this. That's how you, that's how you don't make any spelling mistakes. Okay? So look at this, we have successfully defined one item inside our shop, okay? In the same way, look at this guys, I'm going to copy the thing, okay? And then I'm going to paste it inside here like this, okay, look at this, which means that we have how many items? We have four items in our shop at the same time, those four items has this data. Okay? Now, guys, as I told you, the ID should be unique. Let's make it unique. Like, let's try anything, okay? At the same time, come here, anything of it? No problem. Come here. And then I'm gonna give you a random value like this. There we go. Done. Now, the second one will be official, let's strike off his shirt. On the price you're gonna say to 100. Okay, and the image, just replace the one with two like this. There we go. Now the next one will be our T shirt. Set the price to 25. Like this image will be which one, three? Okay, scroll down, you're gonna set the image to four, the price will be 300 because it's a men's suit. Okay, men's. Let's remove this thing and then right suit. There we go. Done. Save the thing. Okay. Now, if you go back to the results screen, you're not gonna, you're not you're not gonna see any changes. Why is that? That's because you also have to define the thing by using a map function. Okay, let me show you how the map function actually works. So what you're going to do first of all is, do you see this backtick here, just select it up to this backtick here, do you see this one here? Okay, up to this point. Now cut the thing. Okay. Now what you're gonna do is you're gonna right here one second. Do you see this thing? Shop items data, scroll down. And you're gonna write shop items data here, shop there is it okay, sharp items data like this. Now we're going to use a map function. Look at this dot map. Okay, here is it. Now guys look at this. Inside this. We're gonna right bracket. Okay? Now, put your mouse inside this bracket, we're going to make an ESX arrow function. Look at this. Brackets, okay, equal to angle bracket, and then curly bracket. There we go. Done. Now, guys, we're going to pass an argument here, okay, you can write it anything you wish, no problem. Okay, for what? For this tutorial, I'm going to make it very simple. I'm gonna write an x. So why did they write the x here? The main reason is that this is math function here, the map actually will target all the data one by one. Okay? So which means that how many items are here? Okay, tell me how many items are inside here, four items, four objects, which means that this map will run four times, okay? But if you have 100 data insert here, which means that the map will run 100 times. Okay? And by writing this x, it means that we're targeting all the items one by one one piece at a time. Let me show you don't worry. Okay. So inside here, we're going to write another return statement. Look at this. Read. Sorry, return like this. Okay, now whatever you have cut, you just pay the thing like this. Okay, there we go. Save the thing. Okay, now let's look at the result. Guys. Look at this. There we go. Can you see this one here? But guys, guys, once again, it looks odd. Okay, look at this one. Can you see this one? And can you see this one here? It looks odd. That's because can you see this invisible coma here? I can already see it here. Can I see this coma? Yeah, it's coming. Okay, so we have to remove this coma only then we can see the specific result in order to remove the coma. Alright, guys, come back to your main js and then you're going to scroll on okay. Do you see this ending curly bracket before this one? Okay. Do you see this one here? Just before this one, right, dot join. Okay, bracket, then double quote. Okay, done. Save the thing. Yes, look at the result. There we go, the comma are gone. But guys look at this, the data did not get changed. Okay, but we want them to get changed automatically, how we want to think we want the thing to get changed automatically. In order to do that. It's very simple. Guys look at this. Do you remember the x that I wrote? You see, it means that we're targeting all of them one by one, one by one. So how many times the map will run. First of all, tell me how many data we have. We have four data. So the map will run one by one. I mean, sorry, the map will run four times, and all of them will run one by one. So now look at this, use this x here. Let's just come here and use this casual shirt. You have the casual shirt legs, okay, now you're gonna hit dollar sign, curly bracket, then you're going to x dot. Why did you write the dot because it is actually an object. So what did you specify here? This is an object, right? That's what the x is object. Now look at this. This is name here. Just copy the name. Okay, scroll down. And do you see this one here? Just pay the thing like this. There we go. Done. Save the thing. Now let's look at the result. Okay? If you see this name, then you're going to see that the tags got changed. Look at this this casual shirt or is off his shirt. This is T shirt. This is men's suit. Okay, but the image didn't get changed. Look at this. We're going to do the same thing. For the price. Look at it. It's very simple look this, remove the Fortify but don't remove this dollar sign, okay? Hit a space now right dollar sign curly bracket x dot, what was it price, right? p r i, if you are not sure what to spell. If you're not sure about the spelling, just come here. Okay, copy the spelling scroller and paste the thing here like this, then save the thing. Okay. Now let's look at the result. You see, that price also got changed. You see that? Brilliant. Now guys, look at this. Can you see this? Every time you have to use the X, you gotta write x dot x dot x dot. That's annoying, right? So in order to prevent that, we're going to use something called destructuring. Okay, it's very fun to use. Look at this. So look, look at this. How many things do we have instant objects? We have image, we have name, price, description image. Okay, so now in order to use all of them loaded, I'm gonna destructure the thing Okay, so come here, and then you're gonna right here leg, okay, or not here. Sorry, guys. My bad. It should be actually inside here. This is map here. It should be inside the map. Okay, so you got Russia let curly back equal to x. Okay, now, do you see these things here, just copy them one by one. Okay, copy them, put it here. And then you're gonna hit, comma. All right, now let's get the name. Paste the thing here, get the price. And also make sure to put a comma, pay the thing okay. Then lastly, we have the description of the image. So Command D, Sc, comma, IMG, save the thing. There we go. Now, guys, you don't have to write the x dot anymore. Okay, so let's, let's remove the thing like this. Okay, let's remove the thing from here as well. There we go. Let's look at the result. So we got the exact same result, okay, by writing this line of code and also doing these changes, by the way, guys, why do we write x dot x dot x dot? Here's a question. You might have a question, right? So what is this this object? Right? So in order to access the object, we write it like this look. abc.or Sorry. Sorry, what was the name of the thing? Shop items data, right? So let's copy the thing. So this so the thing is object, okay? If you want to, if you want to access the price, you just write the object name and then you have to write the dot price like this. Okay? That's why guys, we had to write the x dot name because the thing is object. Okay, because we specify the thing here as an object. Okay. I really hope that you understood up to this point and everything. Okay? Now, guys, I'm gonna remove the thing, and then I'm going to save it. Okay. Now guys, do you see this? Where's the image? Here's the image, right? Copy the thing. Remove it from here. Okay, source equal to dollar sign curly bracket, paste the thing done. Save it. Let's look at the result. There we go. Can you see that? Now we have different images. It looks just like our finalized project can see that. Brilliant guys. Next abducens description here. Yeah, we're gonna change the description. In order to do that. We're going to come back here and we're going to remove this one. Okay, next up, right dollar sign, curly bracket. Oh, sorry, curly bracket. And then you got right head description de SC. Done. Let's look at the result. There we go, guys. Okay, we are successful up to this point and everything. Okay? All right, guys. If you notice carefully, then you can see that we use the image description price and the name but we didn't use the ID. Okay, we're going to use the ID inside the parent. Okay, so what we're gonna do is we're gonna write an ID, so we're gonna write here ID, okay, equal to, we're gonna write here product. Okay, minus id minus dollar sign curly bracket, Id save the thing. Now let's look at the result. Okay? So you're going to come here, and then you're going to right click Inspect. Okay, now you're gonna go to your elements, and then open the shop. Here's the shop. Okay, now, this is how many cards do we have 41234. Now you can notice that all of these cards got itself ID, which is actually unique. Can you see this one here? This is a unique ID, unique ID unique ID, etc. I really hope that you understood up to this point and everything. Okay? At the same time, guys, let's come back here. And you just copy the ID from here, scroll down. Do you see this quantity here? Yeah, we're going to put an ID here as well as ID equal to dollar sign curly bracket paisa thing. Okay. The main reason for putting this thing here is that guys, this is zero here. Yeah. Every time we increment the thing, we're going to target the ID and then we're going to increment the number at the same time, every time you decrement the thing. We're going to target this one and then we're going to decrement the thing Don't worry guys, we're going to make this function right now so that you can have a practical feel of how the thing actually works. Okay. All right, guys. So far, so good. Now we're going to make two functions to increment and decrement function And my main objective is that every time you click on the plus the number will increase. Okay? At the same time, every time you click on this one, the decrement, the number will change as well. So we're going to make two functions, this will be increment, this will be decrement. Okay, and do you see this one here, we're going to make another function which will be called Update, which will which has only one function to update the number. Okay? So let's get started. Okay, let's come back to our alright guys. Let's go back to our VS code inside the main js. Okay, do you see this data here is huge, right? We can fold this how do you fold this? Just come here click on the shaver. Okay, done. Now it's more manageable. Okay. Now below this function, what we're going to write is two functions. Okay? We're going to make two functions, increment decrement. Okay, another function that we're going to make is called Update, look at this follow along with me, let is going to be ESX error function, okay? increment, okay, equal to there's one arrow function here like this. There we go. Done. Now, this is responsible for increasing the number where is it? This one, okay. And we're gonna make another function which we'll call diction, okay, copy paste, decree meant, there we go. Okay. Another one will be called update something like this look. There we go. Done. Okay. Now, let me explain. Again, the increment is responsible for increasing the number decrement is responsible for decreasing the number and the update is responsible for updating this number here. Okay, so far so good, guys. So guys, I really hope that you understood why I wrote three functions. Okay, let's go back to our functions. All right. Now guys, do you see this icon here? Yeah, and this is icon here. So you're gonna come here and then you're gonna right on track, okay. Everything will be in small letters. Okay, on click on C L IC K, okay. Equal to double quote. Okay. Now look at this. These are minus right? Every time you hit the minus which one should trigger this decryption should trigger right just copy the thing hmm. And then come back here and then pay the thing like okay, now bracket. There we go. Done. At the same time uses increment here you go right here on click OK, on click equal to double quote. Okay, now scroll down. And due to this increment here, copy the thing, scroll up and now put it here like this bracket done. Now, how do you test whether the thing actually works or not? Let me show you. Just come over here. And then you go right here, console dot log. Okay, you're gonna increment. There we go. And now let's come back here and then write console log. Okay, no log decrement, you can decrease that. There we go. Now let's test the thing. Okay, let's come back to here on the results screen, and then we're going to hit right click Inspect. Okay. Now let's come to your console. And now let's click on the plus like this. There you can see this one here is not increment. Okay. Now let's click on the minus that is decrement. There we go. Okay, so all the buttons are working. Let's test all of them. Okay, there we go. Okay, decrement increment, so it's working perfectly fine. Okay, guys, here's the question. How do you exactly know that which card you're selecting? Okay, I can say that, hey, this is a formal shirt one, I'm selecting this one. You can visually see that. But JavaScript JavaScript doesn't have any eyes. How will it know that you're selecting exactly this one? Right, here is the question. So how do you exactly solve that? It's very simple. Look at this. Just come over here. And do you remember this ID here? Yeah, this is a unique, what is this? This is uni. Using this ID JavaScript can pinpoint which shop item you're specifically selecting? Okay? That's why I wrote here ID and I gave it a unique ID for all the things so that JavaScript can identify which item we're selecting. Okay? Now, in order in order to do the same thing here, look at this. This is increment and decrement. We're going to pass an argument here. How do you pass argument Look at this guy right here, dollar sign curly bracket, ID, okay? In the same way, you just come here, right dollar sign curly bracket, Id done. Okay? Now listen, guys, scroll down here. And instead of the increment you right here ID Okay, save the thing. Let's test. Let's come back here. F 12. Okay, open the Dev Tools and click on the plus. Now guys, you're gonna see a error ID is not defined. That's because every time you pass arguments inside here, you also have to define that inside here as well. Something like this. Look, this is our argument. Okay? Save the thing. Now let's do the result. Okay, now, is it gonna work? There we go. Okay, click on the plus is working perfectly fine. Now, can you see this one here? What did it give us? It returned us the quantity which is actually zero. And now guys, look at this uses ID here. Yeah, it is unique. Let's click something else like this. Do you see this ID is unique. Using this ID we're going to tell JavaScript that hey, we are selecting this card here. Just decrement the number here or increment the number here, only here don't touch other cards. words, you got no point. Okay, guys, we want only the ID nothing else. So in order to do that, just come back here and now let me let's write a variable, okay, let selected item, okay? Selected Item, okay, and then you're going to pass the ID here like this. There we go. Now copy the thing, put it here, okay, save the thing. Let's look at the result. Okay, so guys, now let's look at the result. If you click on here, then you're going to you're not, you're not gonna see any changes. So in order to see the changes locally, let's come back here and on a selected item, just right here.id okay.id Save the thing. Now if you come back here, if you select on the plus like this, there we go, you're gonna see the unique only the unique ID click on here is the unique ID, okay? Click here, unique ID click here, unique ID done. In the same way, guys, let's come back here. Yeah, we're going to pass the ID here. Okay, we're going to do the exact same thing just copied both of these two lines here, and then paste it here like this. There we go. Done. Save the thing. Now look at this, every time, whatever you click, whether it be the plus, or the minus is going to specifically pinpoint to the JavaScript that which item you're exactly selecting. Okay, so far, so good, guys. Now listen, the next thing that we're going to build is we're going to make a small basket. Okay, with this, I'm gonna come here and then I'm ERATION. Lead, okay, basket. Okay, equal to is gonna be a array like this. Now, what's the reason for making the basket? The main reason for making the basket is that one thing, let me just fold this code, okay, like this. The main reason for writing the basket here is that every time you select any card, okay, what is going to do is gonna store the data inside our basket to steal specifically, which items did we selected? Okay, you got my point. Now, let me show you an example. Let's say that we have selected this card, okay. So if you select on the plus, what will happen is that look at this. Here, a object will regenerate it, okay, inside this object, we're going to have two items stored look at this, we're going to right here, Id colon, this will have the unique ID Okay, and then comma, we're going to have a item here, where the number will be just one, which means that we have this item inside of a basket and the quantity is just one piece. Okay? Every time you click on the plus something like this look, every time I click on the plus like this, so what will happen is reuses 18, number 18. The number 18 will get added here at the same time. So since you selected this thing, so this thing will be existing in your basket by storing the ID here. Let me show you a live demo. Look at this. First of all, I'm gonna remove the thing, okay, I'm gonna keep it blank like this. Look at this guys. Now, I'm going to scroll down here, inside the increment. Okay, now guys, now guys inside the increment, every time when the user clicks on the increment, Hi, this function will run, which means that look at this here, I'm going to right basket, okay, basket, dot push. So what we'll push inside here, look at this. Okay, bracket, curly bracket. We're going to put two things First of all Id Okay, so do you see this ID here selected item.id. Copy the thing. Put it here like this. Okay, now we're going to put here comma. Now the next thing we're going to put Is it okay, cool. Now we're going to put here one like this. There we go. Save the thing. Now listen. Next thing we're going to do is instead of console logging the ID, we're going to console the basket. Look at this BS Katie. Okay, save the thing, guys. Now cut the thing from here like this. CTRL X now put it after the push like this. Okay, save the thing. Let's come back here. Guys. Open the console. One second. Let's come here and open the console. Okay, look at every time you click on the plus, look at this, you're going to have one item inside your basket. This is a basket guys. Look at this. How many items do you have? You have just one. Okay, now if you open up this one, you can see that I you can see that the ID got stored. And then the item is one piece. Now guys look at this. Every time you click on the Plus, you can see the basket getting increased. If you open up this one, look at this, the same item gets added again and again. And again. It doesn't make any sense guys, instead of doing this thing, what we're going to do is we're going to increase the item number here. If you click here three times the it will get changed to three. Okay, that's our approach, not this approach. Okay, this doesn't make any sense. It is just wasting our space here. Okay, in order to make the thing look at this. Let's just come back to the main GS Okay, okay guys, inside here, we're going to make a search function. Okay. The main objective of the search function is that is going to search whether the thing actually exist on the basket or not. Let me show you. Okay, so look at this one, guys. How many items can you see here? 123. We have three identical items. It doesn't make any sense right? So the search function will search. Let's say that you select this one, the search function will search where This thing actually exists on a basket or not. If it exists, only the item will increase, okay, the item will increase like 12345, etc, okay? But if it doesn't exist, then what will happen is that this is push here is going to push a new object inside our basket, and then we can see the option. Okay? I really hope that you understood my point of view, okay, let's make the thing, okay. Now look at this, you're going to come here and then you're going to make a lead search, okay? Then you got right here equal to, you're gonna select the basket like this, like a basket dot fine. Okay, one second. So using this find, we're going to search whether the thing whether the object actually exists or not. Okay, now, instead, we're gonna right here, bracket. Instead here, you're gonna es six arrow function, something like this. Okay, guys, now, look at this. We're gonna right here, x, you're gonna do anything you wish. No problem, guys. So for this tutorial, I'm just going to pass x as an argument. Okay? The main reason for pass fail. The main reason for passing this argument is that is going to check all the objects one by one. Okay, that's why I wrote this x. Now, inside here, what I'm going to do is, I will do is this ID here, this is unique. Okay, so I will just search for IDs, something like this. Look, you're gonna come here, and then you're gonna write your exit ID. Okay? You're gonna hit triple equal sign. Next step. Do you see this? Selected? ID? Yes. Selected. item.id. Copy the thing. Put it here like this. Okay, so what do I mean by this? It is just searching for one thing, one and only thing. It is searching for the item that you selected. And then we're just making a quick search. Does the thing actually exist or not? Next up, guys, look at this. You're going to make an if else take a look at this if bracket and then you got your search. If the search is undefined, look at this triple equal sign and then you go right here on define like this. Okay, guys, what do I mean by this? I mean by this is that if we don't find the thing that we're trying to search, only then we're going to push the object inside the basket. So I'm going to cut the thing and then put it inside here. Okay. Else like else, like what do I mean by else? If we find the thing, okay, then we're gonna do this look else. curly bracket, you're gonna write your search. This is searchable. Copy the surgery patient here and then you go right here. Plus, sorry, guys, we also have tried the item dot item, okay? Plus equals doing right here. One done now. Now guys, let's look at the result. Let's come back here. And now look at this. If I select the plus, look at this, we're gonna see only one object. Okay, bear with me, guys. Now, guys, let's look at the logic array. Look at this. If the thing doesn't exist, only then pull the thing. If it already exists, just increase the quantity. Okay, so what will happen here? In our case, if I select on the plus like this, that what will happen? Tell me guys, only the item will increase because we already have the ID. So which function is responsible for searching for the thing? The search is responsible for finding the thing. Okay, let's come back here. And now let's click on the plus. Look at that. Let's open up this one. There we go, guys. We have the ID and the item increase. Let's increase it again like this. There we go. Let's open up this one. There we go. You see item is now three. Brilliant guys. Now let's click on this one. Now, guys, one second. How many? How many object can you see inside this array? Only one? Now guys tell me, does this thing exist inside the basket? Yes or no? It's a no. So you're gonna click on this, you're gonna click on this now you can see that we have two objects inside here is the first one is the second one. And the item is only one piece. This includes everything like this. Click on this one. There we go. The item now increased. So guys, I really, really, really hope that you understood how the logic actually works. Okay. In the same way guys, we're going to make the decrement function. Can you see this one here, we're going to make the decrement function. So let's get started. So guys, the decrement function is more or less quite similar to the increment function. So follow along with me guys. Just copy the entire thing like this. Okay, like this one second. Copy this and now come over here and delete this thing. Okay. Make it blank and paste the thing here. All right. Now guys do use this plus here. Here, we're gonna put a minus like this look. Okay, done. Okay, guys, after putting the minus here, let's look at the result. Okay, so you're gonna see the result immediately. Now look at this. I'm going to select here five time, okay. 12345. Okay, now let's open up this one. You can see the item five. Now let's decrement the thing like this look 123 Now the item should be how much two. There we go. It's working perfectly fine, guys. Now look at this. I'm gonna select it more times. Look at this. I'm just gonna click on the thing. Okay, now look at the result. If I open it up very last one. Look at this. Now the item is minus 10. It doesn't make any sense, right? So what we're going to do is we have to stop this thing from going below zero in our good thing. Follow up with me guys. Just come over here and do is this if statement here. Yeah, instead of the undefined, we're gonna write his zero. Okay, now here, he's gonna be searched dot icon, which means that one second guys one second. Let me just undo the things. Okay, one thing where did they get the search dot item? You might have a question, right? So we actually got it from here. Can you see this one here? ID and then we have something called item. So the moment the thing hits zero, okay, bear with me, guys. The moment the thing hits zero, we're going to stop the process. So that's why I wrote search dot item equal to zero. Look at this search dot item. Yeah, insert undefined is going to be zero, like this. There we go. And how do you stop the process? Look at this, do you see these things here, just remove that curly bracket like this, okay. And now just right here, return is going to stop the process completely like this, Your code should look something like this. Now, guys, let's test the result. Okay, let's come back here on the results screen and look at this, I'm gonna select this 123. Let's look at the result. There we go. The item is now three. Let's decrement one, two, let's look at the result. There we got the item is one, the moment you click it again, look at this is going to become zero, right? Which means that if you click it again, here, look at this. Even if you click on keep clicking the thing, look at this, it's not working. Even if I click it 100 times is not working. Why is that? That's because I completely stopped the process. Okay, by writing this statement, that return statement means that just stop the thing. Don't do anything. Okay? Just like this. So guys, I really, really, really, really hope that you understood up to this point and everything, okay? So you can just pick any card here, just click on the thing, and then it's incrementing like this. And if you want to decrement just click on keep on decrementing the moment it hits zero, look at this, the moment it hits zero is not going to do anything anymore. But if you want to say let's say incriminating. If you click on the plus now is going to work. Look at that. Click on the thing. Now there we go. You see now is one piece. Okay? Now guys, the next thing that we're going to do is do you remember the update function where the update? Here's the update function, we're going to define the update function right now. So that it gives us 0123456, etc. Just like the finalized project, you see this one? Keep on clicking, you can see the result live. Okay, so let's do the same thing. In our Google thing. Let's come back to VS code scroller uses update, we're going to define the thing. So guys, first things first, when do you want the update function to run? We want the thing to run every time one second. We want the thing to run every time we click on the plus or the minus. So let me just show you a sample. What do I mean by that? Okay, so come here, and then we're going to take console log console, dot log, okay, we're gonna write here, the update function is running. Okay. Now, since I told you, every time we click on the plus or the minus, we want the update to run, so we'll do this. Okay, just copy the update. Now scroll up to your increment function. First of all, okay, do you see this one here, console, log basket before this one, just pay the thing like this. Okay? Then bracket done. Now scroll down. This is decrement here, after the console, log base, a thing bracket done, save the thing. Now look at the result, guys. Let's come back here, open the console again. Now, every time you click on a plus, the update function is running is working perfectly fine. Look at this, whatever you click, however you click the thing works. Okay. All right, guys, instead of printing console log, we want to print the numbers here. Okay? In order to do that, first of all, let's go back to our VS code, okay. And now first of all, let's define increment, okay? Inside the increment. Do you remember the unique ID, where's the unique ID, here's the unique ID, okay? Just copy the unique ID guys. Scroll down, do this update, paste it here, okay? Selected Item, then just pass the ID like this loop selected. item.id. Okay, save the thing. Now, let's come inside here. And then just write an ID here like this. Okay, save the thing. Now, instead of just doing the thing, remove this thing and then write it. Okay, save the thing. Now, initially, let's load the result. Okay? So instead of getting the update function is running, you're gonna see that unique ID can see that we're gonna get the unique ID. Okay? Now, guys, where will this unique? Id lead us to let me show you the unique ID has attachment here. If you open a general shop, can you see this unique ID here? Yeah, it has a direct attachment here, which means that we can use document dot get element by ID to replace the number directly. Look at this. I'm going to fall listing, scroll down to our update function. Do you see this one here? First of all guys, we're going to make a quick search. If and only if the item exists only then the number will increase. Okay guys, we're back to VS code. Now look at this. We're going to make a search function okay, let search, okay? Equal to look at this basket, okay dot find, then you go right here, bracket, insert, here you go, right? Yes, it's error function, okay, similar process the way how I is a similar process, guys the way how I made the search? I'm going to do it in the exact same process. Okay, now, do you see the way how I put the X here? I'm gonna put the X here as well. Okay, now, what am I searching against? I'm searching against the Id look at this. I'm going to write to x.id. Okay, I'm going to try to match with this ID. If it matches, okay, then we're going to get some result. Look at this. Okay, after writing this function, look at this. Just copy the search. Okay, and then you put it here like this. There we go. And this is basket here. Comment the basket. Okay, I'm in the console, comment the console. Log here. And comment a console log here as well. Now Oh, sorry, not this one. My bad. It should be this one. Okay, comment that thing? Save it. Let's look at the result. Okay, guys, let's come back to the VS code. And now every time you click on the Plus, you're gonna see a object on the console. Okay, where is this coming from? Look at this. It is coming from the update function, which is the console log is coming from there. Okay. Now, if you click on incrementing, incrementing, the thing can you see the item getting increased again and again and again, right? So we only want the number. We don't want the ID. Okay, so how do we only target the ID in our only target, Id just come here and then write cert dot item. Done, save it. Let's look at the result. Every time you click on the plus to get this, only the number will increment. Okay? Now, we don't want this thing to be here. We want the thing to be inside the zero here. How do you do it? Look at this, just come back here. And then you simply write document. Okay? dot get element by ID. And do you remember this ID? Yeah, copy the thing and then put it here like this. Okay, then you gotta hit dot innerHTML equal to search dot item, which is actually this one. This is number. I mean, this is console, log, it is printing number 12345, etc. Just copy the thing and put it here like this done. Guys. Look at this. Let's come back here. Every time you click on the plus, look at this, can you see the number? It's live? It's working perfectly fine. Look at this number is working. How many items are here? Eight. How many items are here, here and here? 000. This increment is one. There we go. Right? It's working perfectly fine. At the same time, guys, let's try to decrypt the thing. If you click on here, look at this. It's not working. Okay? The decriminalisation work, but the increment works. Okay. Why is that? That's because we need to define the thing here as well. There's this update, which is actually on the decrement. It's not defined, we're going to define it just like the way we would define it on increment. It's very simple, guys. Just copy the thing here, and then put it here and then put a dot here like this.id. Say the thing. Let's look at the result. There we go. Okay, let's increment this 1123456. Let's decrement There we go, guys. It's working perfectly fine. You see, there we go. Right. Brilliant. Okay, now, what the next thing that I want is, guys, every time you increment a thing, okay, what will happen is this numbers here, three, eight, and seven. So what will happen is we're going to add all the numbers together, and then we're going to display it on here. So since currently is what it is zero, so we're gonna add all the numbers and then we're going to put it here just like this and look at this. Okay? So if we add all the numbers is going to be turned into you see, if you decrement nothing is working here. incremental thing like this look, it's working here as well. Let's make that function guys. So what we're gonna do is we're gonna come back here and use these unnecessary comments, you can delete it, or you can just keep it no problem. Okay? So at the very bottom, you're going to make a function, you're gonna name the function calculation, look at this, let or sorry, let calculation. This will be ESX error function, okay, something like this. There we go. So guys, what are we going to do in this function? We're going to add all the numbers do you see this numbers here? We're going to add all the numbers and we're going to display it where we're going to display it inside here. Okay. Okay, guys, here's the question when and how should the calculation function run? If you notice carefully guys, so whatever you do, whether you do the plus or the minus the update function runs every time right. So I want the thing I mean, I want the calculation function to run only when the update function gets triggered. Okay? So in order to do this thing, just copy the thing Okay, and then trigger the thing here like this. There we go. Done. So listen. So what will happen let me just show you a sample Okay, so I'm right here console log. Okay. Console. The log and the here we are right here, calculation Kel correlation function is running. Okay, now save the thing. Now listen, every time the update function gets triggered, the calculation function will get triggered as well something like this look, first of all doing this console log, remove it or make a comment. Okay, save the thing. Now guys, let's look at the result. Okay, let's come back here, open the console, right click inspect, okay. Now every time you click on the plus, first of all, let's go to the console. Okay, every time you click on the plus or the minus look at this chemistry, this one here, the number is getting upgraded one and then we're getting this calculation function is running. We're getting this comment from where we're getting it from the calculation function, which is this one, okay? Which means that this thing is working perfectly fine. Okay, now, guys, we need to select this thing. Do you see the 01? Second? Do you see the zero here? We need to target the zero. So how do I target this? Look at this. Okay, guys, let's go back to our index html here and then open the nav bar. So do you see this here? We have a little cart amount, okay, it is a class, we want it to be an ID so that we can easily target that inside JavaScript. Just copy the same thing. Yeah. And then you put your ID equal to double quote. Okay, now paste the thing done. Okay, guys, now, copy the thing again. Let's come back to our main J S. Okay. Now inside the calculation, look at this, I'm gonna right here, let lead Cart icon, Cart icon, equal to we're gonna write document or sorry, document dot get element by ID bracket, double quote, faced done. So what we're doing is we're selecting our icon here, and then we're storing the selection inside the variable. So far, so good, guys. Now, instead of this one, look at this, what I'm gonna do, I'm gonna right click Cart icon, dot innerHTML equal to American 100. As an example, guys, look at this. Okay, so now if I open up the results can look at this. How much is this one is just zero. Look at this evidence, click on the plus is now 100. But if I click it again, it's not gonna work. Okay, how do I make it work? So look at this. I don't want it. This is called hard coded value. I don't want these guys. No, no, I don't want this. Look at this. I'm gonna I'm gonna come here and then I'm gonna hit console. Okay? Console. dot log. Okay. Now inside here, I'm right. passkey, B, s, k, et WASC. Save the thing. Let's go back here and open the console like this. Okay? Now look at this. Let's select this one, select this one, okay, see, like these things and select listen. Now, if I open up this basket, look at this. How many things do I have here? I have 1234. I have four items in my basket. Do you see the item? Guys? Look at this 2434. What do I want? I want to add all the numbers. Okay, so in order to add all the numbers, what I'm gonna do right now is when I select only the item, what I'm doing, I'm going to target only the item, not I don't need the ID, I'm going to return only the item. How do I do this, look at this case, just come back here. And we're going to use a map function look this basket, right, whereas a dot map, bracket, you're going to hear ESX error function like this. Now we're going to pass an argument x, which means that is going to target all objects one by one. How many objects do we have here? 12344 objects, right? The X will target all of them one by one and is going to get only the item. Look at this. So in order to specify only the item, you just hit Exit item. Okay, item. Done, guys. Save it. Now let's do the result one second. Click on here. Okay, click on here like this. Take this one. Take this. Now guys, can you see this? We are only getting the number nothing else. Okay, we are getting only the number. This is three here. The three is here. This is the four the four is here. This is five, the five is here and the three is here. Now guys, we are going to use a reduced function to add all the numbers follow along with me guys. Come back here. And now after this one, we're going to right here dot radius. Look at this r e d use E reduce. Okay, now right bracket. So you're going to write here another ESX error function like this look, huh? And now guys, you're going to pass two arguments here. 1x and another one we call y. So why did I write x and y? The main reason for writing x and y is that x and y, one of them is the previous number. And the other one is the next number, which means that one second. So how does the calculation work? Look at this. First of all, let's consider the three as x okay? So the three what it will do is is going to add the three with four. So how much is three plus four is going to be seven Okay, so this will be the previous number, what is the next number of the after seven is three to seven plus three, how much 10. Okay, so what is the next number is five. So, say 10 plus five is how much 15. That's how this thing will run. Okay, I really hope you understood how the reduced function should actually work. Now look at this, we're going to hit X plus Y. Now, optionally, you're going to put here comma, and then 00 means it is a default number, which means that we want the calculation to start from zero. Okay, save the thing. Now, guys, let's look at the result. Now let's come back here and then write 12345. Can you see this five year? We have five items. Now let's come here, and then we add three items. 1233. There you go. Can you see this eight here? Five plus three, how much? Eight. The calculation is working perfectly fine. This add more things. There we go. Let's decrease something. There we go is working perfectly fine, guys. But guys, we don't want the thing to be on the console. We want it to be here, just like our finalize project. Okay, in order to put the number here, very simple, guys. Come back here. There is this cart icon here. Yeah. Copy the thing. Come back here. Pay the thing. Okay. Then you got I had dot innerHTML equal to do use this console here. Yeah, got the thing. Okay. Put it here and remove the console from here like this. There we go. Guys done. Save it. Let's look at the result. Let's close this one. Let's increase the thing. Okay, there we go. You see seven items here, seven items here. Let's increase it to three like this. 10 items here. Let's try to decriminalising like the circuits. There we go. You see, it's working perfectly fine, guys. Okay, so we are successful up to this point and everything. But guys, here's the thing. This is number seven is one and one is nine. The moment you rephrase the thing, all data are gone. Can you see that? But if you look at the final project, look at this. Even if you refresh the page, it's not going away. Okay, do you see this one here? I'm refreshing the thing again, and again. And again, it's not going away? How is this possible? I am using something called local storage. If we use local storage, then we can save this data. Look at this. If I hit F 12. And if I go to this, here, there is something called application. Okay. Now, once again, guys, let me zoom in, there is this local storage, there's something called storage, okay, this is a built in storage of your chrome of your web browser. If you can order storage on the local storage, you click on this one. And now look at this. All the data got stored inside here. Okay? Even if we refresh, nothing will happen. Look at this. Can you see this one has zero? ID is this one, the item is five. So let's find that one, which is actually this one. Can you see this one here? The how many? How many items are here there are five items that if you make minus look at this, can you see that the number is changing here, incriminating look at this, the item is getting updated at the same time it is getting saved here as well. However you like you refer to thing, it's still there, it will never go away because the thing is getting saved in the local storage. So guys, we're going to implement the same functionalities in our project right now. So let's get started. Okay, guys, after refreshing it, you can see a fresh instance of this app. Okay. Every time you click on the plus like this, okay, look at this. Now, what do I exactly want to save in the local storage? Look at this. Okay, we have a lot of data here, right? I want specifically, I want to put the basket inside the local storage, okay, so that the browser remembers which item I picked up just like this one, you see. So do you see these things here? Yeah, these things are actually were inside the basket. Okay. When I use local storage, the basket got saved inside there. We're going to use the exact same principle right now. Okay, so when do you when do we want to trigger the local search? Listen, every time you click on the plus or the minus, we get triggered local storage, something like this. Look, let's come back here. Yeah, now scroll down. Give me a second. Where's the increment? So guys, you're gonna come here on the increment function, okay, here. Before the update, you're gonna write a local search, look at his local storage.if. You hit dot Nick, I see a lot of functions. Here you see, get item set item, remove item clear. Okay, we're gonna use set item, it is used to set the item inside the local storage, I am inserting data into the local search. And the get item is used to get data from the local search, okay, and the clear is used to delete everything. delicacy. Now look at this inside the set item, we're going to have two things. Look at this. First of all, we're going to have a double quote. The insert here you can give any name you wish, no problem, but let's keep it simple. Okay, I'm going to name it data. Okay, so this is actually the name that that gets saved in your local storage. Let me show you. So if we look at the finalist project list F 12. And then go to the application Do you see is key here the data. That is because I gave it a name of data. That's the key. If you write, let's say your own name, let's say that I'm right here, joy, okay? If I do that, what will happen is that the key will get named Joy, and then all the values will get saved here. Okay? So guys, I really hope that you understood why I wrote the name here. Okay, this is the key. So I'm just, I'm just gonna keep it simple. I'm gonna write your data like this. There we go. Now you're gonna put a comma here, and then you're going to pass the basket lines are gonna be SKD. Basket, save the thing. Let's look at the result guys, come back here. And then this is our project. Okay, F 12 to open the dev tools. And now go to the application. If you can't find it, just click on here and then you're going to find some application. Okay? Now next, we're going to come to the storage on the local search, open up this one, okay, like this. There you can you see this one here, guys, the data is the key, okay? If you change the name, just do it like this. Look, you just change the name here, because that is the key. And this is the object that is getting stored. Okay? Look at this, the data is here. I mean, the key is here, and the value is here. Now, if you click on this one, then you can see all the details here. Currently, there are no property. Now look at it. If you click on the plus, look at this, guys, what is getting stored something is getting stored here. We can't read it. So guys, if we want to read the thing, what's exactly written here, just like this one, just like this one. So what you got to do guys, look at this, follow along with me, there's something called JSON dot Stringify. Okay, just got the thing. Got it. You got it had JSON, dot Stringify. Okay, now bracket pays a thing like this. There you go. Save the thing. Now let's look at the result. Let's come here and refresh the thing. Okay, so now this, click on here, and then delete the thing. Okay, now click on the plus like this. There we go. Okay, we got something here, just click on this one. There we go. You see the data got saved here. Now look at this, we have the 1-234-567-8910. So you have 10 here, the 10 is here as well. Let's try to decrease the thing. If you decrease the thing you can see the value is not getting updated. Why is that? That's because guys, the local stress exists only on the increment not on the decrement to do that, just copy the thing. Yeah, come here and wrote it before the update. Okay. Put it here like this. There you go. That same thing. Let's go back and now look at this. The local storage right now is how much it's 10 right in Australia decriminalising. Okay guys, now, let's say is the result. Okay? First of all, you're gonna need the thing, okay? Like this. Now let's try to implement a thing. There we go. You see you got you got a data, click on this one. And then you're going to find this. Okay, now let's try to increment the value Look at this. Click, click, click, and then you can see that the item gets incremented. Do you want to recreate a thing? Sure, why not? Let's do criminal thing like this. There we go. It is working perfectly fine. You see, let's add something like this. Let's add something like this like this as well. Okay. If you click on here, then you can see all the details there. Okay, guys, were successful up to this point and everything. Now, guys, the moment you one second, look at this, do you see this three here, and eight here, the moment you refresh, everything goes away. But still, Hey, guys, look at this, the data is still saved here. So our main task right now is we have to retrieve the data from the local stores into our application. Okay, in order to do that is very simple. Just come over here. So guys in order to retrieve the data, so what are we doing here, we're just setting the item inside the local storage. Now we're going to retrieve the data in order to retrieve the data just come to the very top. Okay, do you see this basket here? Yeah, we're going to remove the thing. Now in order to get the thing from the local storage, you have to write JSON dot parse. Okay. JSON dot parse like this. Now we got actually a bracket. Now inside the bracket here I can localStorage Okay, local storage dot get item. Previously it was set item. Now it is get item now guys, you're gonna hit a bracket. Now guys, you tell me what was the name of the key that you gave the name of the keys data, right? You're gonna get the data here like this. Look, you're gonna right here, double quote. Okay, yeah, hit data. Now the data will get retrieved. And then guys, we're gonna write an or statement here, okay. Or, and then we're going to right here, empty error like this. So why there right, this was the reason for this. Okay, look at this guys. So we have data inside our local storage. What do we have? We already have the data but what if we don't have any data? What if we don't have any data that is going to be error, which means that is going to break our application in order to stop preventing from happening that what we have right is we're gonna give all statement and then we're gonna give you an empty array, which was previously inside here. Do you remember how it was like it was led? basket equals empty array. Okay? So if we have local data is going to retrieve that, if we don't have it, then it's going to be only an empty array. So I really hope that you understood up to this point and everything. Okay? Let's save the thing. Now guys, let's come back to the results screen and look at this. It is zero here. And it's for on a Google search right? In the moment you hit only one time is going to be five right now. Okay, this is a five year and this is the five year now this, if you refresh it, again, it's gonna start from zero. If you click here, one time is going to be six. This is the behavior that we don't want. Okay, in order to prevent that. And in order to update all the things altogether, what you're going to do is you're going to go to your template, do you remember the template? Where is the template? Here's the template. Okay, just open up this one. Now, look at this guys below this one, we're going to make a quick search. Okay, we're going to say let, okay, search. Okay, let me actually explain why did write this search and why I'm making a search function here. Okay, so after saving the thing, let's go look at the results screen. Okay, look at this. So what do I want? Look at this, how many objects are actually inside here? Two objects, okay? The first one is six. And the second one is actually three, and the other ones are actually zero. Okay, so what we're gonna do is we're gonna search specifically for the ID and the item, if the Id already exists on the local stores, just get the six and put the six here. If it doesn't exist, then do nothing. Okay, that's why I wrote a search function here. Okay. Now let's define the thing. Okay, so you're gonna write an equal to, then you're gonna write a basket, okay? Basket, dot find, bracket, and then you're going to hear an arrow function, you're going to pass here, x, okay? Look at this. x.id. So what we're matching against, we're matching against the ID. So you're gonna write triple equal to sign. And then do you remember this ID here? Yeah, just pass the ID here. So it's gonna check for all the ID one by one. Okay, guys, now we're gonna write an or statement here, look at this, or an empty array. So what do I mean by that? I mean by that is that if we can find something, then store it here. Okay? If we don't find anything, just return an empty array. Okay, so far, so good, guys. Alright, guys, copy this search, scroll down. And this is zero here, remove the zero. And then you're going to write here, our dollar sign curly bracket. Okay, put the search here. Okay, so what do I want to search tells me, I want to search for the item only. I don't want the ID. So what I'm going to do look at this. Let me just go back there. And now I'm going to right here search dot item, okay? Like this, okay, if the search that item is equal to undefined, which means that if we don't find it, then we're going to only return zero. But if we find it, then we're going to return search dot item, something like this, there we go. Done. Save the thickness to get the result. Again, so this is the result. Look at this, automatically, we got the 603. Even if we refresh the thing, look at this, it still works. Can you see that six is here, three is here, let's put here 512345, something like this, refresh the thing. There we go. This five is still already there. But nothing is and now nothing is getting deleted. This is the result that we exactly one. And now guys look at this. Even if we refresh the page, nothing goes away. You just increment a thing like this. And then you declare the thing like this, there we go is nothing is going away. The only problem is with this one, look at this. How much is this? 12, right, refresh the thing like this, it's it goes over to zero. But if you increase the thing, look at this three, right? Is it like this, there is going to be 13? You see, there's the only issue that we have to fix. Very simple, guys, the solution is very simple to come back to your main just scroll down. And then do you see this one here, just copy this one and then invoke it one time like this done. So what do I mean by this, I mean by this is that every time the application loads, this will run, which means that it's going to do a quick calculation, and then it's gonna print the data here. So look at this, even if I refresh the page, look at it's just the 13 still stays there. Let's try to increment the number Look at this 17 They started decrement the thing like this, or perhaps this increment even further is 24 right now refresh the page. There we go done. So far. So good guys, we have successfully implemented the local storage feature into our application. Alright guys, before moving forward, we have some problem in our code, which we need to fix. For an example look at this. If I put my mouse over here, the cursor doesn't change the pointer compared to the Finalize project. Look at this. If I put my mouse here, the cursor change changes to pointer, okay. In order to solve that issue, just come back to your style css at the very top, okay, below the body, you're going to hear it. Okay. So what I'm doing is I'm targeting all icon, HTML elements, okay, and then I'm setting setting the property to curb boy or girl boy, tab, cursor pointer, save the thing. Now let's look at the result. Okay. So every time you put your mouse here, the cursor changes to pointer. Brilliant. Okay, guys, the next problem is actually with the minus button. Okay? So the problem is, the minus button shows an error on the console. Every time the local storage is blank. Let me show you what I mean by that. Okay, so guys, you're gonna right click, you're gonna hit Inspect, okay, come over to your local application, local storage like this. Now, do this guys, click on here, delete the entire thing. So now refresh the page, go back to the console. And now click on a minus, can you see that guys? We're having an error. So guys, why is this happening? Let me show you. So you're gonna go to your main js on the decryption function, okay? The error is actually coming from here. Why is the error coming? Let me tell you, since guys, the local storage is blank, which means that the basket is also blank. If the basket is blank, you cannot find anything, which means that eventually the search will be undefined. And in order to handle the undefined, we don't have any FL statement. Right? So that's where the error is coming. In order to stop the error, you're gonna write another if statement here, okay, then you're gonna hit Search equal to undefined. Okay, then you're gonna just return the thing. So what do I mean by this line, I mean by this line is that every time when the search is undefined, then do nothing. Okay, now this line will stop the process. And guys, do you see the second line? You just write here else? If Okay, something like this, else, if, and then save the thing done. Now let's look at the error. Okay? So first of all, make sure that your local storage is blank. Okay. Now let's go back to the console. Now click on the minus. There we go, guys. There is no error right now. Brilliant. Now, guys, let's move on to the third problem. So in order to demonstrate the third problem, first of all, add something on your cart. Okay? Add something like this. Okay, there we go. Now guys do this, go to your inspect and then go back to your local storage like this. Okay, now, what is this actually telling me? What is this? This is our basket. Okay, so it's going to show us which products we selected along with the specific quantity that we selected, okay? This is what this is a quantity. Okay. So as an example, let's say that I don't want anything from here, I don't want the shirt, zero quantity, let's make it zero like this. So I made it zero, which means that I removed the thing from my basket. Even though you can see a zero, you can see some data here that is getting stored. Okay, so guys, there is no point in keeping something on the basket, which has a quantity of zero, it doesn't make any sense. So we need to remove this line. Okay, which line we have to remove this zero. So guys, in order to do that, just come back to your VS code on the decrement function. Okay, guys, come back to the main Jas on the decrement function. Okay, follow along with me guys. Look at this what I'm doing, I'm gonna write here a basket. Okay, equal to I'm gonna write the basket again. And then I'm going to use the filter function. Look at this. I'm going right here dot filter, okay, something like this. Now you're gonna see a bracket. Inside here, you're gonna write an ESX error function like this, okay? And inside the argument, you can pass anything you wish, no problem. But for this tutorial, let's make it simple. I'm gonna pass it x. Okay. Now, what are we filtering against? Look at this, we are filtering against the item, right? So now we're gonna select the extra item like this. Don't worry, guys, let me I'm going to explain this. First of all, let's write the entire statement. Okay. So x dot item, okay, not equal to zero. Okay, guys, now let me explain the meaning of the statement. Do you see this basket here? What is this? And what does it actually carry? Let's keep it side by side with our local stores and VS code, okay, the basket on the local shirt is actually array. Okay, inside this area, it carries all the products that we selected from the store. Right? And next up, we have applied a filter function here. So what do I mean by this x of the filter function? Do you see this here, we have how many objects here we have four objects 1234. So throw the X of the filter function, I mean that target all of these objects one by one, one by one. Okay. Next up, what we're checking is against the item. So look at this individual object here. How many things can you see here? We have two things, ID and the item. We don't need the ID, we only need to check the item. Okay. So that's why I have written this extra item. And what do I mean this entire line extra item is not equal to zero, throw this I mean that we're going to select all the objects with which doesn't have a zero on the item. So guys, you tell me how many objects do we have on which the item is zero? Only one object which has an item of zero, which means that this filter will remove this object, and then it's going to return the other things. So guys Once the filter function returns the filtered data, what we're doing next is that we're saying we're sending the data back to the basket. So guys, do you see this line here? We're going to cut the thing, and then we're going to put it at the bottom like this. Okay, so why did they do such a thing? That's because do you know the mechanics of JavaScript? JavaScript runs from the top to the bottom like this? Okay. Now, guys, let's analyze our code. What are we doing in this lines? Using these lines? We're manipulating I mean, we're editing data of our basket, which carries all the products that we selected. And what are we doing with the local storage set item. In this line, what we're doing is we're saving those data of the basket inside the local storage. So the main reason for putting these things at the top, and this is one of the bottom is that we want JavaScript to run this lines of code, first of all, so that we can have the necessary edits and changes on the data of our basket. So once that's done, what we want JavaScript to do next is that we want it to save all the data, I mean, save all the Edit updated data back to the local storage like this. So if I cut the thing from here, and then if I put it at the top like this, then this then guys, it doesn't make any sense. What does it mean? So JavaScript, what it will do is whatever basket data you have, JavaScript will just save the thing, first of all, and then is going to do all edits, which means that guys, you cannot see the updates on the local storage. That's why guys, you have put the local storage at the bottom like this. Okay, so guys, I really hope that you understood why I wrote this at the bottom. In the same way, you're gonna open the increment function here. And then this local search here, you just got the thing from here like this, and then put it at the bottom like this. Okay, save the thing. There we go. Done. Now, guys, let's inspect our code. Okay, let's just fold it first of all, now, guys, save the thing. Inspect the code. Okay. So now we have a zero here, right? Let's refresh the thing. Let's see whether it works or not. So first of all, let's delete the data. Okay, refer the thing again. And then I select something here like this. Okay? Select something here. There we go. This select on this one, you can see the data here. Alright guys, now let's test the result do is this four here is actually here, okay? Every time you click on the plus, it works, okay? If you click on the minus minus also works. So let's go and make it zero like this. Okay? 321, it should be zero, right? It doesn't work, but instead is giving us an error. Why does it actually happen? That's because of the serial Look at these guys. Do you see this one here? That's because the serial, so we want the update to run first, and then we want this line to run. Okay, so since it is in the opposite direction, that's why we can't see the changes. So in order to fix that, guys, just cut the thing from here. CTRL X, put it here like this. Okay, there we go. Now guys, save the thing. And then let's look at the result. Okay. Now let's come here, and then refresh the thing. Now, how many things can you see here? Just one piece. Okay, click on here. Done. Now it's zero at the same time, it removed the object from our basket. Brilliant. Let's test it here. Is 3210. Gone? Can you see that? Let's test this one as well. 43210. There we go. Guys, we are successful up to this point. All right, guys. So far, so good. Now we're going to make the cart page. Okay, so let's look at the final test project, the cart page should look something like this, can you see this. So let me give you a small demo, this will be the total bill okay, then we're going to have two options, either the checkout option or the clear cart. So what this will do is going to delete everything from here. Next up this little card here. This represents all the items that we selected from the shop page. All right, and now look at this one, this is the unit price, okay, the price of one single piece, this is the quantity and this is the total price. And this total price is actually calculated by multiplying this 45 by two. So if you click on the Plus, you can see that the price increased here at the same time, the total bill increases here like this. Let's just again like this, look at that. Okay, you can also decrementing like this, there we go. Let's say that you don't want the thing. So you can just click on the crosshair like this, and it's going to entirely remove the thing like this. There we go. Okay, something like this. Look at that. Now, let's say that you don't want anything you don't want to buy anything, you just click on the clear cart is going to remove everything and that is going to show you an option called cart is empty cart is empty, you can go back to the home, something like this. There we go. You see. Now let's start building the cart page. Alright guys, in order to make the cart page, let's go back to our VS code, okay, and on the folder structure, let me zoom in a little bit so that you can see it better. Here. We're going to create a new file. We're gonna name it car dot HTML, okay, car dot HTML, something like this. Okay, now Now guys follow along with me, we're going to create a folder we're going to image source. So the main objective of creating this folder is that we are going to store all of our stylesheet and JavaScript file inside here so that we can manage our folder structure in a neat and clean way. Okay, so guys follow along with me. Okay, just drag the main Yes, here and the style css here like this. Okay. So since guys, we change the folder structure here, we have to go back to the index html, okay. And do you see this links here, this one and this one here, we have to, we have to update this. Otherwise, we can see something like this. Can you see this one here. So in our project, no JavaScript and no stylesheet got applied because we update the folder structure here. So we have to make those updates here as well. So come here, and then write source slash save the thing. Scroll down to the script here. You're gonna write your source slash major, save the thing. Now let's look at the result. If everything goes, well, you should see something like this, you see. Alright, guys, perfect. Let's go back to our folder structure here. Do you see this index html? For this page, we have this main js file. And for the cart HTML, we're going to have another file, we're gonna name it, cart, dot chair, something like this. Okay. Now, guys, let's go back to our cart HTML here, we're going to add some boilerplate code, okay, something like this. exclamatory sign, tap Done. Now, guys, we don't have to write anything from scratch, we just copy paste lines from the index html. Okay. So come back to the index html, scroll up. Do you see these three lines here? This is the bootstrap icon. This is the link for the style css, and this is the title tag, okay, just copy the three lines, something like this. Okay. Copy the thing. Let's go back to our cart HTML and then replace the thing with this. Okay, there we go. Done. Now, guys, here, you're gonna write the script source control space, you're gonna go to your source, and then you're going to select the current Jas. Okay, save the thing, guys. Okay, guys, this is the finished project. Can you see this nav bar here, this is the current page, if you go back to the home page, you can see the same nav bar here, which means that we don't have to build anything from scratch, we can just copy paste the thing inside our cart page. But guys look at this. Can you see this on here, if I click on here, it goes to the cart page. If I click on here, it goes back to the home page. This is the navigation and in order to build that we're going to use the anchor tags. So let's implement those things in our project. So guys, you're gonna go to your index, HTML first. Okay. Now in order to do the navigation part, you're going to hit here a tab, okay, control space, it should lead us back to the home page. Okay, got this h2 tag from here. And then we're going to paste it here like this. All right, now let's make another anchor tag, which will lead us to the cart page. Okay, something like this. There we go. Now, inside here, what we're gonna do is use this div here, just copy the entire thing. I mean, cut the entire thing, then paste it here, save the thing, guys. Now do this. You just close the nav bar here like this, copy the entirety, go back to the cart HTML. Now inside the body tag, paste the entire paste the entire thing, okay? Then you can also fold it like this. Save the thing. Okay, now guys, let's look at the result. Okay? If everything goes, well, it should look something like this. Can you see this on here? It looks odd. It was previously why in color, but why is that? That's because the anchor tag actually have some default styles which we which we need to remove. So come back to our style css at the very top here. Okay, below the ID tag, we're gonna write a curly bracket, okay, TD tap, text decoration, none. And then we're going to set the color to white. Okay, something like this. There we go, guys. Now let's look at the result. So it should look something like this. Okay, now guys, look at this, we can navigate between the cart page like this. We can also go back to the home page. There we go. Right. So far, so good. But guys, there's a little bit of problem. Can you see this number here is 15, one, five. But if you go to the cart page like this is zero. Why is this actually happening? Let me tell you. The main reason is that this card J space is totally blank. It doesn't have any data. That's why we're seeing a zero here. So guys, in order to fix that thing, what we're gonna do is we're gonna look at this guy's Do you remember our local storage here, let me show you. We have all the data saved here. What we're gonna do is we're going to pull this data inside our cart. Yes. Okay, so guys, we don't have to write anything from scratch. Let's just go back to the main Jas. Okay. Now, do you see this line here? Let Baskin equal to this one. So is already doing a job of pulling data from the local storage. So what is this? This is trying to pull data from the local storage. If we don't have anything, only then it's gonna return us an empty array. Okay, so guys, let's just copy the thing. And now let's go back to the cart page, paste the thing done. Now, in order to be sure whether the thing whether the thing actually works or not just console log Okay, okay, console dot log. Okay, we got it a basket, something like this, save the thing, guys. Now let's look at the result. Okay? So if you go to the console here, you should see data coming back from the local storage, something like this. But guys, the 15, the number 15 is not here. If we go back to the home page, the 15th is here, but actually not here. So in order to solve that issue, guys, do you remember that we created a function inside main js is named was calculation. Do you remember this? So what is the job of this calculation? Tell me guys, the main job of the calculation function is that let's go back to our data card page. Okay, so now let's open up this data. The main job of the calculation function is that this is items here, it got some number, okay, so what the calculation function will do is that is going to add all the numbers, okay, and then he's going to show it here. So guys, in order to solve this issue, let's go back to our main Jas. Okay, here, let's copy the entire calculation function along with this statement. Okay, just copy the thing. Let's go back to our car js and then paste the thing here. Now, guys, we don't need this one anymore. Let's remove the thing. Save the thing, guys. Now, guys, let's look at the result. If everything goes well, then you can see 15 Here, if you go back, you have the 15 here, okay, let's select something else. Let's say that we're going to select these things up to let's say 15. Okay, now you can see that previously, it was 50. Now it's 30. It's 30. Right now, if you click on here, then you can see that that thing also got updated along with the homepage. Next up, guys go back to the VS code on the main Gs, and then you're going to scroll to the very top, do you see this variable here, this variable name is shop items data, what is this actually, this is an array which carries all the data of the products that are listed on the shop page, we can also create a separate file for this gigantic data. In order to do that, what you're gonna do is you're gonna foster folder thing, okay, then cut the thing from here, okay, now on the folder structure, look at this inside the source, click here, then you're going to create a new file, you're gonna name it data, dot chair, something like this, then you're gonna hit enter the variable that you have got, you're going to paste it here like this. Okay, let me zoom out a little bit. I'm going to scroll up using this one here, it got here, save the thing, guys. Now if you look at the results screen, you can see that the entire thing broke down something like this, you see, shop items, data is not defined. So in order to include this data JS back into the main js, do you know what you're gonna do? You're gonna go to your index html, and use this line here. Before this one, you're going to include it like this look, script source, okay, one second script source control space, you're gonna go to your source, then you're gonna select Gita GS, okay, save the thing. Now, let's do the result, guys. Now guys, look at that we have no errors. So guys, I really hope that you understood how I broke down a big file into two different smaller files. Okay? In the same way, what we're gonna do is you're going to go to your cart HTML, okay? And before this line, you're going to include the same script, something like this look, script source, control space, go to your source, then your ASP. Net data, Jas, say the thing, okay. All right, guys. Now we're going to start writing the HTML markup inside our body tag. Okay. So below this nav bar, we're going to create a div with the ID label something like this look, hashtag label, okay, at the same time is going to have a class name of text center dot text, minus center, tap, there we go. Our main objective is to target this inside JavaScript and target this one inside style css. Okay. Below this line, we're going to create another div with a class name shopping cart. Look at this dots shopping. Minus cart. Okay, at the same time, we're going to give it an ID of the identical name something like this look, hashtag shopping. Okay, minus cart. Tab. There we go. We can target this in JavaScript. This will be targeted inside style css. Now guys, you might ask me a question like, what's the main reason for creating this one? And the main reasons for creating this one? Let me show you guys. If we go back to the file, let's project here. Okay, let's go to the cart page. Now, do you see this component here, the total bill and the checkout clear card, this component will be actually built inside here. And do you see this on here, inside here, what we're going to do is we're going to build this cards here. So guys, I really hope that you understood why I created these two thieves, okay. We're not going to write anything inside this two days. We're going to create these two components using JavaScript. So first of all, do this guys first of all do is Id here we're gonna select both of them inside the JavaScript, okay? First of all, target the label. Okay, let's go back to our card, GS. And at the top, what you're gonna do is you're gonna right here, let label Okay, since this this is an ID, you're gonna write your document. Okay, document. dot get element by ID. You're gonna write brackets, single quote, double quote. Face the thing Okay, done. Next step. You got it. Let shopping cart okay shopping cart equal to document dot get element by ID okay brackets single quote double quote like this. Let's go back to our cart HTML, then you're going to copy this and use this ID here. Yeah, copy the thing. Let's go back here and paste the thing like this. There we go. Done. Okay, guys, so far, so good. Now guys, do you see this one here, on the far less project, we have all the cards here. Okay, we're going to target, we're going to build this one, first of all, and then we're going to build this one later on. Okay. So in order to build all of these cars, we're going to create a function, the function name will be generate cart items follow along with me guys. Below the calculation we get right here, lead, generate, generate card items, okay? This is gonna be an ES six arrow function, something like this. Okay, then we're gonna write curly bracket. Okay, guys, listen to me carefully inside this function, we're going to have two cases. The first case is when we will have data on the basket. And the second case is when we will have no data on the basket. Let me show you what do I mean by that? First of all, save the thing. Okay, let's go back to the finalized product. Okay, to look at these guys, this is the first case when we have some data on the local storage. Let's say that we don't have any data. So if we have data on the local storage, then the thing will look something like this. But if we don't have any data on the local storage, then what will it then what will it look like? It will look something like this look, if I clear the card, there is going to look like this. Okay, cart is empty back to hope. So in order to generate both of these two components together, we're going to use the if else statement. Okay, in order to do that, let's come back to the card Jas, and inside here we're gonna write an if else statement. Look at this guys follow along with me. So guys, we're gonna write an if else statement here, okay, if bracket curly bracket, okay, on the next line, we're gonna write else curly bracket, okay? So inside this bracket, you're gonna write basket dot length, okay? is not equal to zero. Okay, so what do I mean by this if else statement, by this, I mean that when the basket length is not equal to zero, you're gonna write, you're gonna run this code, or else you're gonna run this code, okay? So let's test the result. Okay, so we're gonna write a console over a console, dot log. Okay, we got it, a basket is not empty. Okay? And now inside this L statement, we're going to add console, log console. The log, we're going to right here basket is totally empty. Okay. Now after saving the result, just copy this thing. And then we're going to invoke the function here. Okay, now, bracket, save the thing. Let's look at the result. Okay. So this is a result screen here, you are going to go to a cart HTML page, okay, like this. Can you see this one? Here? It is written basket is not empty. But guys, let's go to the application. Local Storage. Okay, let's clear the entire thing. Now let's refresh the thing. Go back to the console. Okay, you can see that basket is totally empty. So guys, I really hope that you understood how this if else statement is working. Okay. So guys, let's remove the console from here like this. Okay. And before writing the if statement, let's finish the else statement. First of all, okay, so what you're gonna do is you're gonna scroll up this this shopping cart here. Yeah. What is it doing? It is targeting the ID from the HTML element. Okay, so copy the thing, and then scroll down the page, the thing here and then you got right here, dot innerHTML equal to backticks. Okay, we're going to make it just blank like this. And on the next line, what you're going to do is do room with this label here, which is also coming from the HTML element. Okay, just copy the thing, scroll down here, okay, paste the thing like this, then you're gonna write hate dot innerHTML. equal to, what we're going to write here is look at this, first of all, we are back to you, okay? Then you're going to hit h2, tab. And guys, here we go. Right card is empty. Okay, something like this. Empty. And on the next one, you're gonna write here, a tab. Okay, so what this will lead us to this anchor tag, which will lead us to index html, which is the home page, okay? Index dot HTML. Okay, so inside here, what we're going to write is we're going to create a button, look at this, bu TT o n dot, we're going to attach a home button class name or something like this, then you're going to hit tab. There we go. Now, can you see this one here is student class name. Don't do it, guys. Otherwise, it's not going to work. So it should only be a class not class name. Now insert here, we're going to go back to home, something like this. So bad to have done, save the thing. Now let's look at the result guys. Now guys, if we look at the results screen, it looks something like this. The cart is empty. And back to home page. We're seeing this component here. Now what we're gonna do is we're going to put it on the exact center in order to do that, come back to your style css here, okay, and at the very bottom, come to at the very bottom here like this. And we're gonna write first of all a comment. Okay, so we're gonna write a comment like this. Okay, start exclamatory sign here we're gonna write style rules for style rules for label and add some buttons. Okay? Something like this. Save the thing. Now below this one, we're gonna write text center. Do you remember this guys one second. On the cart HTML, do you see that we have a class of text center, just copy this from here. Okay, come back here and paste it like this, okay, dot paste, curly bracket. Inside here, you're gonna write T, a tab, then center. Okay, then you're going to add margin bottom, 20, pixel, okay, MB, tab, 20. Pixel, save the thing. Now let's do the result, guys. The result looks should look something like this. And guys, the main reason for putting the margin bottom 20 pixel is that if you look at the Finalize project here, then you can see this gap here, this gap is actually margin bottom of 20. Pixel. You can't see it here. That's because we don't have those cards getting generated here. Okay, this is back to Home button. We're going to style it right now. So let's go back to our style css here. We're gonna right home button one second, guys. Let's first of all, come back to the card. HTML. Okay. Not here. Sorry, guys card GS. And this is class name here, home button, copy the thing. Come back to your style css and then you're gonna hit dot paste. Okay, there you go. Right here curly bracket. So you're gonna set the background color BGC tap, remove this thing, and then you're gonna hit control space. Do you see this color here? 212529. Get this one. Okay, next time, you can either color to be white. Okay. Next up, we are going to remove the border, okay, border none. Okay, then we're going to apply some padding of six pixels to all sides. Okay. Next, we're going to add the border radius to three pixels, a border radius, three pixel. Okay, guys, next up, we also need a little bit of cursor pointer. Okay, girl, boy, tap, save the thing leads to good result. Okay, it looks something like this. But guys can see this card is empty and the back to Home button. There is no gap in between. Let's apply some gap. In order to apply those gap. Just come here and then right empty. 10 pixel, tap. There we go margin top 10 pixels save the thing. Let's look at the result. Can you see this on here? We have a little we have a little bit of cap here. So far. So good, guys. Now let's test the thing. If you click on back to home, it should lead you back to the home page. Can you see that guys? Perfect. Let's go back here like this. There we go. So guys, it's working perfectly fine. But here's the question actually, why are we seeing this component? The main reason for seeing this component is let me show you guys. So do you remember this function here on the card GS, we have it Okay, generate cart items, we have an if else statement here. So the if statement will run only when the local stress is not empty. And the else will run when the local storage is empty. Look at these guys. We don't have anything on the basket is totally zero, right? Let's go back to the homepage here. Let's select something okay, I have selected this thing here. So now the local storage is not empty, our basket is not empty. If you go to the cart page. Now look at this. This component is not rendering again. Why is that guys there is because now the LC is not running the if statement is actually running, but it is not defined is totally blank. That's why we can't see anything here. Let's go back to the homepage here. Look at this. Now let's remove the thing like this. Okay, let's make it zero. Let's come back here. Look at this, we can again see the component that's because this time the else is running. So now guys, let's actually define the if statement here. Okay. So guys follow along with me. So on the if statement, we can write in return here. So what is it going to return? Look at this. We're going to scroll to the very top there is this shopping cart here. Yeah, copy the thing, scroll down here, and then we're going to pay the thing like this. Okay, now we're going to hit dot innerHTML equal to we're going to target the basket. Do you remember the basket? Where is the basket? The basket is actually here. And what is this? This is an array which carries all of our selected products. Okay, inside the basket, we're going to make a map like this. Okay? Then bracket, we're going to write an ESX arrow function like this. Next step, you're going to x here. The main reason for running the exe is that let me show you one second guys. Let's go back to the home page here. Let's select something. Okay. Let's select something like this. Let's go to our local storage here like this. Where is it? Let's come here. Here. Application local storage. Okay, guys, this is the local storage data. The main reason for writing this exe is that is going to target all of these objects one by one, one by one. Okay, guys, that's why I wrote this x here. Okay, you can read anything you wish. No problem. Okay, I'm just gonna keep here x. Now next up here, I'm gonna write a curly bracket. Okay, enter. Next step, guys. Let's return something again. Okay, we're going to return here, a template literal. So we're going to actually have backed Okay, now inside here we're going to create a div with a class named cart item. Look at this dot cart minus item. Okay. Yep. And this is class name here, which should be only class. Otherwise it's not going to work. Okay? Save the thing. Let's write something here. Okay, hello, like this. Save the thing. Let's look at the result. There we go. If we go back to the cart page, you can see some Hello here, one second guys can says hello, hello, hello. Why is it repeating four times? Okay, you might have a question like, why is it repeating? If you recall, what did I tell you? The X where's the X guys, this x will target all the data from the local search one by one one by one and then is going to run this function here can see this one here is going to target all of them one by one, and then it's going to tag and then it's going to run this function. That's why we got the Hello four times. But let's say that one second guys, how many data do we have here? 41234. Let's say that I'm going to make something zero. Okay, I didn't want anything here. If we go to the cart page, right now you can see three Hello. Why is that? That's because we only have three items selected inside our basket. Now there is something strange here this little icon suggested resuming. Do you see this uncommon, comma here, we don't need the comma. In order to remove that comma, just come back here and do is this here. Just come you just come here and then you can write dot join. Okay, brackets, single quotes or double quote like this, save the thing. Now guys, let's look at the result. Okay, you can see that the strange comma is God. Brilliant. Let me just scroll out from here like this. And this is the thing that we don't want guys. We want it to look something like this. Okay, in order to make the thing we have to write nice code here. Okay, so let's get started. Let's run the hello from here. And then we're gonna hit enter. Okay, inside here, we're going to first of all include the image. Do you remember the image guys? So I'm gonna actually img tab. Okay, the source will be the source of the image will actually come from the data. Jas, can you see this one here? Data Jas. Yeah, we have all the data here. Okay. So look at these guys. Did we include this on the cart? HTML or not? Yes and no, let's just check the thing. Okay, let's go to our cart HTML and look at this. Okay, so before the cart GS, we have the data Jas which means that we can freely use this one this variable inside our car just let me show you copy the thing come back to the car just first of all, save the entirety Okay, now if you right here consolo like this, look at this. I'm gonna right here is small console, okay, console, the log bracket pays the thing Okay, shop items data, which is coming from where data Jas Okay, now look at this, I'm gonna save the entire thing. Let's go and look at the result. Okay, you're gonna hit F 12. Go to the console, you can see the data array for and it carries all the data of the products that are selected. I'm in data listed on the shop page. Look at that. It got the description, it got the ID, image, name, price, etc. So far, so good, guys. Now guys, let's go back to our VS code on the main js Okay, so not major, sorry, Karges. Let's remove the thing from here. And now what we're going to do is we're going to come to our if statement here, okay. Now guys, look at this x can see this x here. So what does it carry? What is this x? This x is actually a object. Look at this. Let me show you. So we're gonna hit console. Okay, the log, we're gonna say x, save the thing. So what will happen is this x will run four times. Why is that? That's because guys, not four times, so it's going to run three times. That's because guys look at the application, local storage. How many things do we have on the basket? Three things. Okay. That's what the x will run three times. Now look at the console can see this one here. We got the ID and the item. Now guys, can you see this ID here? i Oh, why something? I Oh, why? Look at the first three letters I O Y, according to the ID. Okay, according to this ID, let's search inside our database. Look at this. Let's come back here on the data Jas, and where is the I O Y here? Is it okay? Can I see this one here? This is our I O Y. ID. Now look at this guys. What does this object carry this object carries or image, it carries the price and it also carries the name. So do you know what I'm going to do guys? Using this ID, I'm using this x ID. I'm going to grab the data from the data GS and then I'm going to target this image. Do you see this image here? I'm going to target this image and then I'm going to get it inside the source. Let me show you how I do the thing. So what I'm going to do is first of all, I'm going to destructure the X or the Y to a district of x that's because look at this. Do you see this one here? We have both the ID and the item. We don't need the item right now we only need the item okay? So in order to just Target ID we just destructor the thing like this, look at this lead curly bracket Okay, Id comma, then we're gonna write here which one item Okay, equal to x done. Now we can freely use the ID, which is coming from this x okay, next step, guys. We're going to make a search function Look at this. Let search. Search equal to So what are we searching from? We are actually searching from this variable. Can you see this variable here? Yeah, I just copied the variable which is from the data GS, okay, come back here and then we're going to put it here like this. Okay? So search equals shop items data, then we're going to write here a fine, okay? Dot find bracket, okay? Now inside here, we're going to make es six arrow function something like this. Okay? Now you can add anything you wish, no problem, but let's make it simple guys. Let's write a why here. Okay, you're gonna do anything? No problem, guys. Let's just write why. Okay, now, what are we searching against? What are we searching against? Let's see. So look at this ID here, guys. Where is this coming from? This is actually coming from the basket. Okay? And where is this wire coming from? This is coming from the data GS. Okay, so what do I want, I want to match this ID with this ID, which means that whatever ID we have on the basket, we want to match that with the ID from our database, something like this. Let me show you. Okay, so we're going to come here, and then we're going to write here why that ID is triple equal to id, this ID is coming from here, which is from the basket, and this is coming from the database, which is from that database, okay? And then what we're going to write this, you're going to also take me here, or you're going to make it blank like this. So what do I mean by this? I mean by this is that if you find something, then return it. But if you can't find anything, then just return an empty array here like this. Okay, so far, so good, guys, save the thing. Now, guys, we can freely use the image from the database. Okay, how do I do it, look at this, come back to the car js and use this one here. We're gonna come here and then we're gonna remove the thing. We're gonna say dollar sign curly bracket, search dot IMG, save the thing. Let's look at the result. Okay, the image is huge. You can see that we got all the images, in order to make it smaller. Let's come back here. And then we're gonna see the width here, okay, with like this equal to, then we're going to right here. Double quote 100. Like this. Okay, save the thing. Let's look at the result. Okay, there we go. Our images got smaller. Can you see this one here? Okay, why do we have only three images here? The main reasons for having three images is that look at look at your application logo stretch, How many things did you select from the basket? How many things do you have on the basket? These are the products that you selected from the shop page, you have only three there. So you have the three, which one is missing? That casual shirt is missing. Okay, let's go back to the homepage. Here's the casual shirt. Okay, so if you select something from here, let's look at the result. You got now four images, okay, if you go back here, let's say that you don't want t shirts. Remove the t shirt from here. Let's go back here. There we go. We don't have any casual shirts here. Okay, so far, so good, guys. Now we also need to apply some styles and get the data here so that it looks nice, just like this. Okay, so in order to do those things, go back to your VS code. And below the image, we're going to create another div with a class name details. Look at this dot details. Okay. Yeah, and this is class name here. I'm really sorry, guys, you have to remove this one from here. It should be only class equal to details. Okay. Now guys, inside these details, we're going to have two days and one h3 tag. Let me show you what I mean by that. Okay, so we're going to right here dot title minus price minus x, something like this look, title. Okay, minus price minus X STEP. Also give an indent here like this. Okay. Now, let's go to the next line. And we're going to create another div which will be named card bottles like this look, dot card, minus bu TT o n s tap. On the next line, you're gonna write h3 tags. Okay, something like this. Now, guys, was the main reason for creating these three HTML elements. Let me show you guys. Do you see this title? Price and the X. Okay, so if I compare that with the finalized product, look at this. Do you see this one here? We have something called casual shirt. We have the price and we have the cross sign. Okay. So using this Dave, this is Dave here. Yeah. Isn't this Dave? We're going to create these three things together. Okay. Next, we have something called card buttons. Can you see this one here? So easing this one, we're going to create this this this button here along with the plus minus and the quantity here. Yeah, so guys, using this one, we're going to build up this component here. Okay. And this is price here. We're going to display the price inside the h3 tag. Okay. So I really hope guys that you understood why I wrote the thing. Okay, guys, now let's put some gap in between them so that it looks nice and understandable. Now inside the first one instead, the first day of what we're going to write here, look at this following with me guys. Let's give some indentation here like this. We're going to have two things. First one is the h4 tag, okay, tab. Next up, we're going to have icon which you read across sign. So in order to get the icon just come over to your icons or get bootstrap.com. And here we just write here, just a x. Now scroll to the very bottom. The x is actually here. Where is it? Here? Is it okay x minus LG. Click on This one then copy the link. Okay, let's go back to our cart Jas. Okay. Now, paste the thing like this. Save the thing. Now inside this h4, we're going to write a p tag. Okay, first of all, let's give it some indentation like this P tab. Now inside here you're gonna write dollar sign curly bracket search.net. So where is this name coming from? This name is actually coming from the data. Jas, this is name here casual shirt, then we have official, etc. Okay. I really hope that you understood how I'm doing this thing. Okay, save the thing. Now let's do the result. Okay. If we look at the result, it will look something like this. Can I see this one? Here? We are the office shirt. And then we also have x here. But don't worry, guys. Even though it looks bad, we're going to use Styles to make the thing look nice. Okay, just follow along with me what I'm doing. Let's go back. By the way guys can see this x here. We're going to make it red color. So let's do that right now. So do you see this arm? Where is it? This is b minus x minus LG copy the thing. Now let's go back to your main. Where is it starts? Yes. So guys, you're gonna come back to your style css at the very bottom, okay, here, you're gonna write here dot paste. Okay, then curly bracket. BGC, not BGC. Sorry, this is going to be color. You're going to read set it to red color, okay? And then we can also optionally give some font weight. Okay, font weight, we can set it to bold. Okay, do l the same thing now guys, let's look at the result. Okay? Now you can see that ignore is that the x is actually red in color. Brilliant guys. Now let's go back to our VS code after zooming out. Where is it here on the car chase, okay, below this p tag, you're going to create another P tag which will display the price okay of the single quantity unit. Okay, so just right here, dollar sign space, dollar sign curly bracket AG, this dollar sign will be the currency and this one will be the variable. Okay. So here we go. Right search dot price. Okay, this price is also coming from where it is coming from the data GS, which is here. Can you see this one here? Yeah, let's go back here. And now let's look at the result. Okay, it should look something like this cancer is one here. We have the office shirt here, where the price here and then we have the delete button here as well. So far so good, guys. Now we're going to style it in a way that it looks nice. Okay, in order to make it nice. First of all, let's go back to our style css not styles here. Sorry. Got HTML. And guys, do you remember this one here? Shopping Cart. Copy this thing, okay. Like this. Now let's go back to our style css and at the bottom here. Let's create a comment. First of all, okay, comment like this. We're gonna write exclamatory sign and then we're going to hear style. Okay, rules for shopping cart paid the thing again, done. Now here you're gonna hear dot paste curly bracket. So guys, how do they actually do the finalized project? Okay, how did you do this? I actually use something called display grid. Okay, this is a single column. Okay. So that is also responsive. Look at that. If I hit F to F, look at this, if I go to the mobile screen, it is responsive like that. Okay, so how do they do the thing, I actually use a single column, and each of this card is 320 pixels in width. So guys, let's do the same thing with our project. Okay, so you're gonna come back to your style css here, you're gonna write display grid, TG tap. On the next line, you got igtc, tap, OK, on the repeating I write one comma y one. Okay. The main reason for putting one is that we want only one column, okay, that's what I have put here, one, then you're gonna write here 320 pixel, okay, by treating the pixel, I mean that the width should be at the width of the column should be 320 pixel. Say the thing guys. Now let's look at the result. Okay, we can't actually see any changes unless we see some border around all these cars, okay, in order to set the border around these cards so that we can see it better. Do follow along with me guys. Just copy the comment from here and put it here. Okay, so it is going to be style rules for cart item. Where am I getting the cart item from? I'm actually getting the cart item from here you see this one here? So just copy the thing from here. Let's go back to our cart HTML not sorry, not here. style css, okay, come here and then you're gonna hit dot paste Okay, curly bracket here right here border. Okay, where's the border border to px solid red, not Versailles black, or you can also use that hashtag you can also use this color here Okay, say the thing. Now guys, let's look at the result okay, it will look something like this. Next step guys. We're going to put this entire thing on the exact center we're going to have some gapping between them and do is this point it corner here we're going to make it rounded Okay, in order to make those changes just come back to your shopping cart first of all and then we're going to right here one second guys. We're going to right here JC see tab okay justify content center. Okay, if we look at the result it has come it has moved to the exact center. Okay, next up guys. We're gonna give some gap in between these cars. Can I see this one here? We have no gaps. Okay, so we're gonna right here. gap of 15 pixel okay. 15 pixel, say Other thing, let's look at the result. Okay? There we go, we have to get, let's make this rounded. Let's make this point it corners rounded. Okay, in order to make that thing, just come back to your cart item here, okay? Then you're going to have border radius of five pixels. Okay? Five, px, save the thing. Let's look at the result. There we go. It looks something like this. Alright guys, now look at our image here and the content here. How does it look like it looks like a column. But we don't want that we want it to behave like a roll like this. Okay, in order to solve the issue, do you know what we're gonna do? You're gonna target which one, let's come back here. Or we're gonna target the current HTML, and then we're going to write a display flex, DF, tap. Save the thing, guys. Now look at the result. It looks like our finalize project here you see brilliant guys, but look at this guys. This is official $100 and the X. It is not behaving like a column. Can you see that? But we want to, but we want it to behave like a row, something like this. Okay, in order to do that thing, what we're going to do is we're going to first of all go back to our main GS sorry, not main, just Karges okay, just make some mistakes here. So guys, come back to your card js and use this one here. This is the class name by the way guys catch this one here. I made a small error. My apologies, guys. I it is not class name. It should be only class. Now let's fix this one as well. And every time you see something class name, remove the name, it should only be class, otherwise, it's not going to work. Okay, let's copy this thing guys style minus price minus x. Okay, after copying the thing, come back to your style css, by the way, guys can see this one here. I mistakenly wrote two comments of the same name. So this is shopping cart here. Yeah, it should match this one. And this this cart item here, it should match here. So let's actually remove this one and write style rules for cart minus items. Done, guys. Now let's scroll to the very bottom here, we're going to add dot paste. Okay, then we're going to hit curly bracket. Okay, inside here, we're right, display flex step, save the thing. Now guys, let's look at the result. It should look something like this. But guys can see this one here, this x and these things are not aligned on the exact center. Okay. So in order to solve this issue, look at this. I'm just gonna come back to all my VS code. Let me just keep it here like this. Okay, you keep your eyes here. Okay, and then I'm gonna write the code here, look at this, I'm gonna use AIC tab, the moment I hit the save, look at this. They are now aligned on the exact center right? And next up guys do this x here. I'm going to put it at the corner here. In order to do that, we're gonna write JC SVLK justify content space between same thing now let's look at the result. Can you see that? It didn't work? Why didn't it work? Guys? Let me show you a trick. So in order to understand something like why a certain element is not working, always add this border. Okay to px solid, right? Then you can see the entire element here. Can you see this one here? This is the entire element. The main reason for the X not put coming at the aim here is that this content here is fixed. It is locked. Okay? It cannot expand itself. So in order to make it expand, what we're going to do is we're going to give you a way, look at this. We're going to set it a weight of 195 pixels. Okay? Say the thing. Let's do the result. There we go. Can you see this x now expanding here? Brilliant, guys. So far, so good. Now we don't actually need border anymore. You can keep it or you can just make comment legs. Okay, save the thing. There we go. It looks nice. But guys, look at this one. This is $300. Then we have the $100. Here. We don't want it here. We want it to be here, just like this one can see this one here. Yeah. So let's make those necessary changes. Okay, so that it looks like this. So let's go back to your card. Yes. First of all, let's expand the thing. Okay. Do you see this h4 tag? Yeah, we're going to put here another class here. Okay, class one second class. name equal to is going to be double quote, we're going to write your title minus price. So why did I put both the title minutes price? That's because this tag actually carries both the name I mean, the title and the price. That's why I name it. I named it like this. So guys, I'm just gonna copy the thing. Let's go back to our style css, and at the bottom, I'm gonna write dot paste curly bracket. So here I'm right display flex, okay. aiic tab for the Align items center. Okay, and now let's say the thing let's look at the result. It should look something like this. But guys, we don't have any gap in between them. Can you see that? So in order to put some gap, let's put gap of 10 pixel inside the title minus price here is it okay? So we're gonna actually a gap of how much 10 pixel Okay, now look at this guys. We have a gap of 10 pixel here, okay, this this price here, we want to style it in a way that it looks nice, just like this one. Okay. So follow along with me guys. So where is this actually located? Let's first of all, locate that you're gonna go to your car chase. Okay. Now, where is it? It's actually here. You can see this one here. search.com Eyes on the p tag. Yeah. So we're going to attach a class here. Okay, look at this. We're gonna write a class. Okay, equal to double quote is going to be cart item price. Okay? CART minus item minus price. Okay, now copy this thing from here. Let's go back to your start at first and save the thing. Okay, copy. After copying the thing, go back to your style css, okay, and at the bottom, alright, dot paste, okay, curly bracket. Inside of here you go, right, first of all, BGC Logan's BGC, tap, okay, you're going to sell it, select the color, which we specified to one to control space, okay, if you forgot the thing like this, we're going to want to five to nine, then we're going to set the color to white, something like this. Okay. There we go. Now, if we look at the result of a saving, it should look something like this, right? We're going to apply some padding and some border area so that it looks nice. Okay. So in order to do those things, just come here, and then you're gonna write border radius of four pixels, something like this. Okay? Then we're going to apply some padding of three pixels on the top and bottom and six pixel on the left and right, something like this. Let's look at the result guys after saving. Now look at that. It looks nice. Okay, let's zoom out. Okay. Next step, guys. This is buttons here. Yeah. Do you think that this looks very familiar? Yes, it looks familiar. If you go to the homepage, we actually imported this component inside our cart page. Okay. That's why it looks similar. That's why it looks identical. So we're not going to write it. We're just going to copy paste some lines from our main Jas. Okay, so what you're gonna do is you're gonna go to your main js where is it? Means Yes. Okay, then you're going to open a general shop function. Okay. Now, where is the div with the class name buttons. Here, it can see this one here. So just click on here, and then there's this thread here. Yeah. So following this thread, you just copy the entire thing from here. Okay. After copying the entire thing, just come back to your cart. Yes. Okay. Next up this this one here, you can just easily remove the thing because we copied the same thing, right? Then you're going to paste it, let's say the thing and give some indentation here like this. Okay? So in order to give some indentation, do this, okay, so you select everything inside the div, then you're going to hit Tab like this. Okay? Come here, and you're gonna see the cut tab like this, it should look something like this, okay? Or you can also give another indent here like this. There we go. Save the thing. Now, let's look at the result. Okay? Where is it here? Is it okay? There we go. Can see this one here, we have the plus and the minus icons, along with the number indicator here as well, if you click on the plus, or if you click on the minus is not going to work. Why is that? That's because look at this card Chase. Okay, if I close up this one, we don't have the increment and decrement function. That's why it's not going to work. But if you open up this one, if we scroll down, can you see this one here? The I hit the minus button, right? It got the decrement here, and this is here. Where is it? This is the plus it got the increment here, even though they got it here. It's still not going to work. That's because guys, we didn't define these functions at the bottom. We're going to do that right now. But before that, do you see this one here? Yeah, we don't need this one. Okay, so what you're gonna do is you're going to remove the thing from here, okay. And one second, guys, let me make it a better like this. Give me a second. There we go. Okay, it should look something like this. Now, one second that if you scroll up, do you remember this item here? Yeah, you can just copy the item which is actually coming from where this x, where is this x coming from? This x is coming from the basket. Okay, just copy the item from here, scroll down to your here quantity. Okay, this right here, dollar sign curly bracket paisa thing done, save it. Now let's look at the result. Now you can see the number getting shown here live. So guys, this number here represents the quantity of the item that you selected. Okay? But still if you click on the plus and the minus is not going to work, okay? In order to make the thing work. Look at these guys. I'm literally I'm literally gonna go to the main Jas. Okay, one second. Let me just close this thing. Zoom out a little bit. Do you see this increment decrement I'm gonna copy the thing from here. Okay, after copying the thing, go back to your card. Yes at the bottom, okay, paste the entire thing like this, save it. First of all do this. You just close it like this. Okay, scroll up, and then you close it like this. Okay. Also along with these guys, we also need to get the update otherwise we can't see the changes on the HTML I mean on the results screen just copy the update function. Come back here and then paste the thing like this. I'm gonna save the thing you can also fold it like this. And there we go. Let's look at the result okay after saving everything on the card JS Okay, so if everything goes well if you click on the plus is going to work perfectly fine. Not only that guys, you can see this one can see this one here it is we're also working perfectly fine Look at that. Right click let's click on the plus it's working let's click on the minus there we go. It's working perfectly fine. Okay. All right guys. There's an issue with our code do is buttons here. Yeah, the plus sign works to really fight no problem, but the problem is with the minus, every time I go and hit a zero, the thing this card doesn't remove itself automatically. But we want the thing to remove itself automatically something like this look, let's say that we have a four here, okay? Or let's say, I want to remove this thing. Look at this 3210. You see, it removed itself automatically, in order to implement the same system into our project, the solution guys is very, very, very simple. Follow along with me, guys, due to this decrement function here. Yeah, first of all, you're going to open the thing. Okay? And does this generate cart items here? Yeah, just copy the thing. And now, do you see this comment here? I'm gonna remove the comment, and then I'm going to paste the thing like this. Okay. Now look at this. I'm going to save the thing, mystical result. Okay, this is the, these are project results. So let's go to 03210. There we go. It went away automatically. How is this actually happening? Guys? Let me explain. Okay, so guys do remember this line here? Yeah. What is it actually doing? Its main job is to filter out all the objects which has an item of zero. So once it's done filtering out those data, is gonna rerender our cards using this function here, you see this one here? It is actually used to re render our cards. So if I scroll up, where is this actually coming from? Where is this trigger leading us to? This is going to lead us to the function of generate card items, which actually helps us to generate these cards. You can see this one here. Yeah. So that's how the mechanics actually work. Okay, first of all, is going to remove those unnecessary data, the data, which has an item of zero, and then is going to run the function, which helps us to rerender all the cards. Let me show you a live demo. Okay. So how much is this five? Let's try to go to 04321. The next time I hit a minus here is going to become zero. Once it turns zero, do you know which line it will run? The moment it runs zero, this line will run and then it's going to read render the cars isn't this one. Okay? That's how the mechanic actually works. Look at this. If we click on this one, there we go, the data is gone at the center, the card is gone as well. So guys, I really, really, really hope that you understood how the mechanics actually work. Okay, let's go back to the home page. And let's select some products. Okay, so I'm gonna select these products here like this. There we go. Okay, let's go back to the cart page. And now guys, let's compare this with our finalize project. Okay, look at this. So we have a price Kennedy's price here. Yeah, this is the total price of the item that you selected along with the quantity. Okay, so if you click on the plus like this, look at this, the quantity increased along with the price increased as well. So how do you build a component like this? Very simple, very easy, guys. Follow along with me. Okay. So we're going to first of all, do what we're going to go back to our card chairs here. Do you see this function, which is the generic cart items? Yeah, this one, okay. So we're going to scroll down slowly. Okay. After the buttons, do you remember this h3 tag? Yeah, we're going to write the thing inside here. Okay. So guys, follow along with me. Let me zoom in a little bit. Okay. So here, I'm gonna first of all write $1 sign to represent the currency. Okay. Then we're going to write $1 sign curly Rec. Inside here. Do you remember the item guys with item? Here is the item. Okay? Can you see that? First of all, copy the thing. Okay, then scroll down here. Okay. Paste the item here. So what does the item represent? Let me tell you after saving the thing, let's look at the result. Can you see this one here? Yeah, 14, this number here, this is the quantity, this quantity is actually getting represented here. This quantity is getting printed here. But we want what do we want, we want the quantity to get multiplied by this number here guarantee this one here. This is the price of the unit. This is the price of one unit, we want to multiply this with the item quantity. And then we will get the final result here. So in order to do something like this, let me show you how to do the thing. Scroll up this one here, search God price, copy the thing, scroll down on the item, okay, you're gonna hit a star, then paste the thing done. Save the thing. Now, guys, let's look at the result. There we go. Guys can see this one here? Yeah, this is the unit price. And this is the quantity, it got multiplied, and it gave us the result here. This is the thing that we are expecting. But here's one thing that we don't expect. Every time you click on the plus like this. We want the press to get update, but it is not updating, right. It's not working perfectly fine. But everything every time you hit the minus Can you see that? The minus actually works, but the plus doesn't work. Why is that guys? It looks quite strange. In order to solve the issue. First of all, let's look at the decryption function one second. Let's actually close this one like this. Let's look at the decryption function guys. What are we doing? Every time we click on the minus the decryption function runs eventually this generate cart item also runs. So why is this important? What does it actually do? This helps us to rerender our carts with the app updated data. That's why guys, that's why only the minus works but not the plus. In order to solve the issue, look at this very simple, very easy. Just copy the thing, okay? folio decrement, open the increment. Okay, now scroll on guys. Do you see this console here? Yeah, I'm going to remove the thing, paste it like this, save the thing is going to solve or is going to solve our issue. Let's look at the result guys. Every time you click on the Plus, there we go. Look at that. It's working perfectly fine. You see now let's try to click on the minus there we go. It's working. Brilliant. Okay. All right, guys. So first server Next up, this is delete button here. Yeah, we're going to make a function named remove item so that every time we click on this one is going to remove the entire card here. Okay, so let's go and build that up. So in order to build that up, go back to your card GS and below the update, what we're gonna write, we're gonna write a function, okay, there, remove item, okay, remove item is going to be es six arrow function like this. Okay, now inside here, we're gonna pass the ID. So why did I pass the ID? Let me tell you. Okay, so the thing is, how does does? How will JavaScript exactly know that which card that you're selecting? OK, all of this ID in all of these cars has a unique ID, okay? Using that unique ID, we're going to delete the thing. Okay, that's why I have included the ID in that parameter. Next up, guys, we need to copy this and invoke it in the place where the X icon is actually select located. Okay. Do you see this one here? Yeah, title price minus x. Inside here, you have the icon here, okay. So on the icon you're gonna hit on, click OK. On Click equal to double quote, okay. Pay is the thing invoked here. Next up, guys, scroll up. Do you see this ID here, copy the ID scroll down, you're gonna write here dollar sign, curly bracket Id done. Now, in order to test whether the thing actually works or not. You're going to scroll down here, look at this. Okay? Then you're going to actually let select it sorry, Selected Item. Item equal to id. Okay, guys, next up, we're going to check console, a console log, we got it selected item like the same thing. Let's do the result. Okay. So let's hit F 12. Again, let's go to the console. Every time you click on, let's say the x like this currency doesn't here, we got the entire HTML element inside here, which we don't actually want. We want only the Id only the unique number here. Can I see this one here? Yeah. So in order to hire only that, we're going to address selected item.id only save the thing, just look at the result. Okay, there we go. Every time you click on the X Kasetsart. Here, we can only get the unique ID for which is actually located for each and every one of these cards, something like this. You see, so far. So good, guys. By the way, can you see this console here? I mean, this this data here, they're coming from the console. Let's remove that thing. Okay. So in order to remove those things, go back to your generic card items. Okay, here is the console. Let's remove the thing from here, okay, because it looks kind of odd. Okay. Once that's done, guys, let's scroll down to the very bottom here. Where is it? Here's the console. Okay, let's make it a comment here. Now, guys, let's look at the result. Okay? Every time, every time I click that cross, do you know what will happen? Every time I click on the cross is going to remove that object from the local storage? Let me show you. So if I go back to the local storage here, where is the item 19. Okay, this is a quantity of 90 Here is the 19 here, right? Every time I click on the X, I want to remove this entire object from here. Okay, in order to do that, we're going to use something called a filter function. So let's do the exact same thing. Okay. So we're gonna right here basket, okay, basket equal to basket dot filter. Okay. Next step, I'm going to use a es six arrow function inside here like this. Okay, now we're gonna write, you can write anything, no problem in arguments, but let's keep it simple. Let's write your X. Okay? So inside the X, what we're going to target is we're targeting against the ID, because there's the thing that is only unique, so we're going to target x.id. So what I'm doing is that in this x of the filter function, I'm targeting all of these objects one by one. And since I targeted the ID here, what I'm doing is I'm targeting and matching against all the ID. Okay, so now, let's come back here and then I'm going to right hit not equal to selected item.id, which is this one, okay? Copy this thing and put it here like this. Okay? So what this will do is that which ever item you click on the cross, what is going to do is is going to remove that thing. It's going to remove that item from the cart and then it's going to update our basket. Okay, so it says the upgrade will come to the basket only but we also want the update to go to our local storage as well. So in order to do that, just open up either one of them increment or decrement be like this. Now scroll down, you have a line called local storage dot set item. Copy the thing you don't have to write. Okay? Just copy the thing, scroll down. Do you see this remove item here on the function phase, the thing like this, okay, done. Save it. Now, guys, let's go and look at the result. Okay, if you come back here, let's click on the X. Okay, so what is the number here eight ways is actually here. Every time you click on the X, the number and the object actually goes away. But the object itself, I mean, the card itself doesn't go away. But it goes away every time you refresh the page, but we don't want this behavior, we want it to update itself automatically. So in order to do that, what we're gonna do is look at this is very simple, guys, we're gonna re render our components, okay, we're gonna re render all of our cards every time we select the cross button, okay? So in order to do that, copy this thing, okay? Copy the thing, scroll down, and then paste it here like this. Okay, save the thing. Now, guys, let's look at the result. Okay? So every time let's say the casual shirt, I don't need the casual shirt. So I'm going to hit the X like this. There we go. It is removing here and reviewing, removing here at the same time. Let's select this one like this. There we go, is removing everything and it's working perfectly fine. But guys, look at this candidate is on here, cart is empty. Why is that? That is because we don't have any data here. Okay, let's go back. And then let's select something, okay? Something like this. And now let's go to the cart page like this. There we go. Okay, let's test it again. Let's click on here is going here. And it's removing itself here as well. So far, so good, guys. Now, guys, let's look at our file s project, which is here. Can you see this component here? Yeah, total bill and the checkout clear cut, we're gonna make this button. I mean, we're going to make this component right now, in order to make something like this follow along with me, guys, we're going to create a function and we're gonna name it total amount so that it can calculate all the total amount of our bill. Okay, so we're gonna make an ESX error function, let total amount, okay, equal to is going to be an ESX error function like this, something like this. There we go. Okay, now inside here, we're gonna have two cases. The first case is when do we have data on the local storage? And the other cases when we don't have any data on the local storage? Okay, just like this one. Let me show you. Just like the generic cart items, how many cases do we have here? Two cases. So the first case is when we have data on the local storage. And the second case is when we don't have any data on the local storage, okay? In the same way, we're going to have two cases instead, the total amount, okay, so look at this, if, okay, basket, dot length is not equal to zero, run this code, else, we're just gonna return the thing. So why else return we mean that don't do anything, just stop the process. Okay. Next up, guys, inside this curly bracket, we're going to write let em out. Okay? amount is equal to, we're going to target the basket, and we're gonna map the thing. Okay, look at this. We're gonna write basket dot map. Okay. So why am I actually mapping the thing? Now, guys, let me tell you the main reasons for mapping the thing. Okay, the main reason for mapping this thing? I mean, the mapping the basket is that look at this. So if I go back to the local storage here, yeah, look at this. Do you see it here and use the item here? We already have the item. Okay, we already have the item, but we don't have the price. So using this ID, can you see this on here? What is this? I owe ya, right? Using this ID, we're going to go and search inside our data. Gs where's our data? Yes, our data js is here, isn't that ID, which is the I O Y key and this is one here. Using this ID, we're going to search inside our data Jas, and then we're going to grab the price from there. Once we grabbed the price. From there, we're going to multiply that without item so that we can get the total price. I really, really, really hope that you understood what I mean by that. Now I'm going to show you the live sample. Okay. So in the car GS, look at this, I'm going to come here and then I'm right here bracket, okay. I'm gonna write anything, no problem, but let's keep it simple. We're gonna write here es six error function, and then let's pass X, okay. Now curly bracket. Now you can you can also destructure the X. How do you destructure the X and how does it happen? Look at this. This is ID and the item, you can separate the thing like this look, we're going to come here and then we're going to write here let okay? Let curly bracket equal to is going to be x okay, now come here and then write it m comma ID. Okay? Save the thing. Now on the next line guys. What we're going to do is using this ID, we're going to search inside our database. So guys, we don't have to write anything if you recall, if you go to the one second guys, if you go to the Generate cart items, you can easily get the function here do use this search function here. Yeah, just copy the thing because it already exists there, we don't have to write it again, copy the search function, then you're gonna just close the thing there, scroll down to your total amount function, okay? Just paste the thing here like this. Okay, so what is it actually doing? It is using the ID to match against the database. Okay, for an example, look at this, okay, one second. For an example. Look at its i o y thing, okay? It is actually getting stored inside, where is it? It's actually getting stored inside this ID. Okay? So this search, what it will do is, is going to search this ID against the idea of the local, I'm in the, I'm in the database, okay? Which is actually here. Okay. I really, really, really hope that you understood what do I mean by this line? Okay, next up, what we're gonna do is we're going to return look at this, you're going to return the item. Okay? By the way, let me actually show you what the item means. Okay. So if you go back to local storage here, this item here two to three, yeah, that's the item. And then we have something called Search dot price. Look at this. So you just multiply the thing like this, okay, multiply search dot price. This price is actually coming from here. You see this one here? Okay, so now look at this guys. I'm going to console log the thing so that you can see it better. Okay? So in order to console log, the thing, look at this, I'm right here console. Okay, dot log. Sorry, guys, not here. Cut the thing from here. And this is L statement before the else statement here. Okay, paste the thing, bracket. And then do use this amount here. Yeah, copy the amount, put it here. Like they save the thing. Now, guys, let's do the result. Okay. By the way, guys, it will actually not work because you have to invoke it. So copy the thing, scroll down and put it here like this. Okay, bracket. Done. Save the thing. Let's look at the result, guys. Now let's go to the console. Can you see this one here? 200 607 75. So how is this coming? This is actually the cap x. This is actually the calculation of this one's can see this one here. The 600 is here. The 600 is here. 7575 200 200. Okay, so we got all the all the total prices have individual cards inside this array here. Do you know what I'm going to do next? I'm going to add all the numbers together. In order to do that, what we're going to do is use this here, yeah, remove the semicolon and put a dot Okay, we're gonna use the reduce function, okay, reduce the negative bracket, you're gonna hit es six arrow function, okay, something like this. Then you're gonna write hit X comma Y. Okay. Next up, guys, you add the x and y, what does the X and Y means let me tell you, the x is the the X guys is the previous number, and y is the next number. So what is doing is by x&y, I mean that add these two numbers and then get the next one. So that's why I wrote here, x comma y and then I have to write x plus y, and then comma, I want this thing to start from zero. That's why I'm gonna give it a zero here. Okay? See the thing. Now guys, let's look at the result. There we go. Can you see this one here, it gave us the calculation, the total calculation that we were searching for. So guys, our function is complete. Now we're going to implement that so that it looks something like this. Okay? In order to make something like this, let's go back to our VS code. Let's guys, do you see this one here? Either comment or remove the thing. Okay, I'm gonna comment a thing. And then I'm gonna scroll to the very top here, this label here. Yeah, copy the thing there, scroll down to your total amount function below this comment here, paste the thing, okay, then you go right hit dot innerHTML equal to, we're going to use a template literal. So you're going to hit backtick. And here you can write, then here you can write h2 tab. Okay, then guys, you're gonna have total, okay, Bill coloane. You're gonna have dollar sign for the currency and then you're gonna write dollar sign, curly bracket amount, okay? This amount is actually coming from here. You see this one here? See the thing guys now guys, let's do the result. Okay, there we go. We got it. We have the total bill here. Can you see this one here? Brilliant guys. Next step, what we're going to do is we're going to have two buttons. One second guys do is checkout and the clear Cart button. Yeah, we're going to build these two buttons here inside here. So let's go and make those things. So what you're gonna do is below the h2 tag, you're gonna make a button Okay, look at this video TT o n. Okay button with a class named checkout. Look at this dot C, H, E C K, O ut checkout cap. Guys Guys is going to be class not a class name. So remove the name from here. Only keep the class okay. Now inside here we're going to write check out c h e CK or yearly check out that save the thing. And below this button we're going to have another button with a class name remove all look at this. Bu TT o n dot remove. Oh, okay tab. Now again guys is going to be class not class name. Remove the name from here save the thing. And also we need to right here clear card something like this, save the thing. Let's look at his own case, it should look something like this. It is not styled. Let's start the thing. Okay. First of all guys, copy the checkout from here. Now guys, you're gonna go to your style css. And now guys, you're gonna select for a specific selector that we already selected. And we already build that. Okay, so let me just search for the thing. It's actually the homework guys can see this one here. Yeah. So you don't have to write all the styles to discuss follow along with me. Just put a comma here. Okay, and then dot paste done. Now, guys, let's look at the result. It should look something like this. Can you see that? Yeah, in the same way, we're going to style the clear Card button as well. Follow along with me guys. Come back here on your card, GS, copy the remove all come back to your style, CSS, comma, okay, and then dot paste done, save the thing. Let's look at the result. There we go. You see much better. But guys, I want the thing to be in green color, just like this one. And I want the thing to be red color. So in order to do those things, follow along with me, copy the checkout. Okay, scroll down and put it here like this dot paste, filled record, you can right here. VGC tab is going to be which color green, like they say the thing and remove all right, copy that thing. Scroll down, or dot paste curly bracket, color or sorry, BGC. Tab is going to be red. There we go save the thing. Now let's look at the result. Okay, there we go. Guys. It looks just like our finalize product here. Can I see this one here? It looks totally identical. Next up, guys. Guys, it looks nice. But look at this. Here's a problem. Every time you click on the plus, look at this, this number I mean this quantity and the price actually increases. But can you see this one here? It is not updating itself. So guys, in order to update this thing, I mean, this one is very simple solution is very simple. Guys, just come over here and to your cart. Yes. Do you remember the total amount? Copy this thing? Okay. And then guys, where's your update function? One thing, let me just fold the thing like this, where's your update function is actually here. Can I see this one here? Just open the thing. And then below the calculation function, you just invoke the thing here like this. There we go. Done. Okay. Now, guys, let's look at the result. Okay, every time. This is the result page, okay, every time you click on the plus like this, look at that. It's updating itself live. It is working perfectly fine. Okay, brilliant. Now, guys, here's actually another issue here. Look at this business. 29. Here. Yeah, 2900. Actually, this 100 Every time I click on the cross like this, that's going away. But it's not actually upgrading itself. There was $100 there. But now it should be 2800. But it's not updating itself automatically every time you hit the refresh like this, only then it refreshes. I mean, only then it updates updates itself, there is the behavior that we don't want in order to fix that. Where is the function that removes that item? It is actually remove it right? So copy this one, I will copy the entire thing. Open up this one. And do you see this one? Generic cart items below this one, invoke it like this, save the thing. Let's look at the result. Okay? So look at this, how much is this 1500 Okay, 2800. Every time you click on the cross, it goes away at the same time, it updates the thing here as well. So guys is working perfectly fine. Now guys, let's go back to the homepage. Let's select some data. Okay, I mean, let's select some products from here. Let's go back to the cart page here. The next feature that I'm going to build is the clear cart feature. Okay, every time we click on this one is going to first of all remove the entire thing at the same time. Do you see this local storage guys one second. On the local storage we also want the entire thing to get removed as well. So in order to build that follow along with me guys, come back to your car JS Okay, and below the remove item or anywhere okay, you can write the function anywhere you like. We're going to right here clear car, okay, lead clear car, okay, it's gonna be an ES six arrow function like this. Okay, next up guys look at this, we're going to actually a basket equal to we're going to make an empty array it means that whatever data we have on the basket, remove the thing. Okay, so guys, once we are done removing all the items from the basket, we also need to re render the cards in order to re render the screen. This is generic card items here, copy the thing scroll down and put it here like this. Okay, done. Next step guys. We also need to update the local storage as well. So in order to update the local storage, just open the decrement or the increment lights Okay, do you see this one here? Yeah, just copy the thing from here. There are close the thing scroll down on the clear car Okay, paste the thing here like this and save the thing. Now guys, we need to invoke the clear cart as well copy the thing scroll down do is this total amount here. Open it Okay, so where's your remove all it is here can see this one here, this clear Cart button. So guys, what we're gonna do is we're gonna right here on click OK, on click equal to double quote. Then we We're going to invoke the clear cut function here. There we go save the thing, guys. Now, guys, let's go and test our result. This is the result screen, every time you click on one second, let me also open up a local storage here like this. So we have some data on the local storage, we have some build here, and we have some cards here. Okay, every time we click on a clear card is going to remove everything, look at that the data is gone. And the cart, I mean, and the cart page is gone. Along with the price and the buttons, we have only one but back to Home button. Using this one, we can just go back and we can select some products like this. There we go. Let's select some products here. Let's go back to our cart page. And now let's go and select this one like this, look at that, it's working perfectly fine. Okay, let's click on the cross fine like this is removing that thing. At the same time. If you click on the clear cut, it removes everything like that brilliant. On the far less project, you can see that we have in total 12 product cards. So what we're going to do is we're going to add the other images and data into our project here. But before doing that, we have some problem with our code here, which we need to fix. The first problem is with the nav bar, it is not aligned properly on the Y axis. Let me show you what I mean by that. Okay, so I'm just gonna go back to the code on the style css, and then what I'm gonna do is use this navbar here, I'm just going to comment this code. Okay, I'm gonna save it. Now let's look at the result. Okay, can you see that the clothing store and the icon, they are not aligned on the y axis on the center. So if you want to fix that, you just gonna come here and then you're right, AIC tab. Okay, save the thing. Now let's look at the result. Can you see that nurse aligned properly, okay, so I'm going to bring this code back, save it, there we go. The second problem is in the cart page. But before going there, first of all, make sure that you have some products selected here. And then you're gonna go to the cart page. Okay. Now, this is number here. How many quantity do we have on the basket enroll? We have 24. And now let's do this. Okay, so I'm going to remove this one. Okay. So how much quantity is in this inside this card? It has just five. Okay, so it is 24. If I'm minus five, I'm 24. How much is it is going to be 19. So let's remove the thing. Okay, every time I remove it, it should have been 19. But it's not doing the subtraction is going to do the subtraction every time I refresh the page like that. There we go. But this is the behavior that we don't want. So if you want to fix that, where is this problem situated? Let's find that first. Okay. The problem is with the function named remove item, let me show you where it is. So what you're gonna do is you're gonna go to VS code, and then you're gonna go to card GS. Then here is your function remove item, you're going to open up this one. And then you're going to scroll up there is this calculation function here. Just copy the thing and then put it here like this. Okay, save the thing. Now let's look at the result. Okay, so now what we're gonna do is we're gonna remove this one, okay, how much quantity is here is five. So how much is here? 19. So 19 minus five, it should be 14. Let's click on this one. Let's see the result. Okay, there we go is working perfectly fine. So our problem is solved. Let's look at the third problem. It is here on the clear card. Every time I click on this one, what do I want? I want the basket to get zero. It but it doesn't happen. Let me show you what I mean by that. Okay, so I'm going to click on Clear card. Now look at that. It's still 14, but it should be zero. If a refresher thing, only then is going to be zero. So guys, the problem is situated in a function named clear cart. Let's go find it and fix that. Okay, so I'm going to go back to VS code, and it is called Clear cart this here. Do you remember this one calculation, just copy the thing and put it here like this. Okay, save it. Now let's look at the result. Okay. So in order to look at the result, we have to go back to home, and then we have to select some items. Okay, just like this. Now, let's go back. How many items can you see here? It's a, let's click on clear cut. There we go. It's now back to zero. Perfect. Problem solved. All right, guys. Now let's go back to our VS code, and then scroll to the very top. Do you remember this function here, generic card items, open up this one. And then do you see this search dot Image Search dot name and search dot price? What I realized is that you can D structure this thing and make it shorter. Let me show you what I mean by that. Okay, so I'm gonna come here and then I'm gonna right here lead clearly record high image, comma, name, comma, and what was the last thing is price. So I'm going to put the price here like this equal to the search, okay, copy that, put it here like this. There we go. Now we don't have right search dot image anymore. Okay, we can remove that portion from here like this. Okay, there we go. Done. Save the thing. Now let's look at the result. We're gonna get the exact same result. Okay, to see the result let me just click some products from here. And then let's go to the cart page like that. There we go. You see, there we go. You see we got the exact same results. And by the way, guys, what is this called? The search is an object right? So this is called destructuring, and object. All right, guys. Now it's time to add the other product cards inside our project. Before doing anything, first of all, we have to to the local storage, okay, just right click inspect, and then you're gonna go to your application, wait a second, let me open up this one, we're gonna go to Application, the local storage, okay, so now we have to delete it. So you're gonna click on here, and then you're gonna do the thing. Okay, next up, I'm gonna go to my GitHub, I'm going to provide the link of this GitHub repository in the description down below. Okay, so if you come here, then you can realize that it has three branches. We are on the main branch on the main branch, we have the entire source code, okay, we started from the starter files, and this is product images here. I'm going to click on this branch here. And then what does this branch carry? Let me show you inside the images, it got all the other 12 images. Okay. So if I come back here, we have also something called data. Jas, if I open up this one, then it carries all the data of our product cards. So do you see this data here? Yeah, all the data are actually inside this data. JS. So what we're going to do right now is we're going to download this thing. Okay? So let's click on the code, download zip. Okay. So guys, once it downloads, open the thing and then you're going to go back to your Dexter, okay, then what you're going to do is you're going to extract it outside like this. Okay, next up, go inside here. So what do we have inside there? We just have a folder and a file called dlgs. Okay, so what we're gonna do is we're going to extract it outside like this. Okay, there we go. Alright, guys. So now we're going to extract both the images and the data inside our project folder like this, look at that. Okay, then guys, you're gonna find a message like this, replace the files in this nation's so you're gonna click OK, like this. So what it's going to do is, it's going to remove the duplicate files from our project. Now we can delete this one, no problem. Now, let's go back to our VS code, okay, now you can realize that we have images, how many images are here, 12 images, okay. And then we also have a file called Data GS. So come here, and what you're going to do is, look at this, do you see this data here, the data is inside a array here, you see this one array, so come here, and then you're going to close it like this, copy the entire thing. Now you're what you're gonna do is you're gonna go to data, GS, which is actually situated inside your source, okay, come here and go to the top, select from here to the very bottom, and then paste the code that you copied from the file. Okay, so now look at this, we have all of our data stored inside this variable. Now say the thing. And now come here, and what you're gonna do is you're going to right click, delete this one. Okay? This is coming from the GitHub. Okay? Now, guys, after saving the code, let's go look at the result. Okay, our result will look something like this. Look at that we have how many cards in total, we have 12 product cards in total. But guys, there are some design problems with our cards. Let's look at this one. This is border here. And do you see the image they're overlapping with each other here? Can you see that it looks odd, we're going to fix that. At the same time. Look at these guys, we don't have any gap at the bottom, just like the finalist project, look at that, we have a gap here. So let's go and implement those things. So let's go back to our VS code on the style css, then you're going to find that selector with the class name shop. Okay, then what you're gonna do is you're gonna right here in between the pixel tab, there we go save the thing. Now let's look at the result, it will look something like this on our finalized project. But guys, if you want to adjust the gap, you can do it as well. So let's come back here. And you can also put here 50 pixel like this, save the thing. Let's look at the result. Now look at that we have a big gap here. Next up, let's go fix the border and the images. How do you do that? Very simple, very easy. Go back to your VS code. So now you're going to find for a selector called dot item, which is actually here, can you see that? We have the image inside the selector. So how do you select the image from this selector is very simple. Look at that. You're going to right here dot item, okay, then I m g curly bracket done. Now inside here, what we're going to write is we're going to say with 100%. Okay, with 100%. Let's say the thing there. Let's look at the result. There we go. Now, can you see that the border and the image are not overlapping with each other. But guys, there's another problem. If I zoom in like this, look at that. Can you see that? Do you see this corner here? Yeah, it's pointy corner. But actually, our border is rounded. So in order to adjust that, what we're going to do is we're going to go back here, and we're going to place a border radius, okay? Border Radius. Okay, radius, but before putting any value, guys, let me show you something. Okay. So we want to make this thing, rounded here. And here. We don't want the thing to round it here. And here. So how do you do this? Let me show you guys. So what we're gonna do is we're going to come back here, and we're going to put to pixel first to pixel again, then 00. So what do I mean by this, this is the top left corner. This is the top right corner, this is the bottom left and bottom right corner values, save the thing. Let us look at the result. Now guys, you can see that this thing got rounded and this one as well but not the bottom left and the bottom right, perfect. With that our project is complete. I really, really, really hope that you learned a lot from this tutorial. If you liked the video, give a like share it with a friend and feel free to subscribe till then take care and I'll see you in the next video.

Channel: freeCodeCamp.org

Views: 338,989

Keywords:

Id: cT_ZYrS3tKc

Length: 199min 58sec (11998 seconds)

Published: Tue May 31 2022