beast. But everything after that is relatively simple. It's a shorter. What I mean is it's just a shorter. Um has anyone done a lot of like document dot get like append child stuff. Okay. So yeah, so okay, so this is one of the things which can be a little painful. Okay. But we always one thing you want to remember is that okay, Let's just take it back to basics in html. If I were to copy, paste this after the button, that's where it would show on my web page. So the same thing with what we're going to be doing now other matters. So if I copy this and I paste it after my Britain for the business icons, um, that's where it's showing. Right. So now you have the title after the button. The same thing we have to keep in mind with what we are going to do right now. Order matters. The things in which you insert stuff in your dome is going to matter a lot. Okay, so coming back, let's just control Z so that I am back to where I was. Okay. Now in the last part we sorry, we did build a dorm function and I am going to now declare function build dumb. Okay. And there you go. And then end of Bill, john function. Okay, so each function is I'm not passing functions as arguments. I'm not using function assignments. I'm just using simple old like plain old function declarations and each function is called from inside of another function. Okay, so I have my function. Bill dom And the sole purpose of dom is well let let us console dot log cart object dot items. The sole purpose of our build done function is to iterate through the items array of the cart object. Get the property, get the values of the properties for each object and insert that into the dawn. So now control us and let's ahead here let's see this. And here you can see I added one object and at index zero of the items array. The product name of that object is business icons. Product price is 1.5 and then I have the product image property with the source at the value of the source attribute is like where that image is located. So if I were to add food icons now I have two items in my items array of the card object and this is where we are. So we took things from html. Which is hard coded. You might get something from the designer. It's hard coded. You don't change anything there. You just take note of the classes and the I. D. S. You take that static html And then you are grabbing values, putting it into javascript And then basically um putting you know these product names. Images and price into our cart object. And now from the cart object is where you will build the dawn. Okay so build the door means build the cart which will be displayed to the user. When a user removes a cart item, you will remove it from the items array of the cart object. And then build the dorm again. So two things you have to keep in mind when you're making these applications, you have to manage both what is shown on the front end and some kind of object data types that we're using at in our code. Um you can think of card object maybe as a database for our cart items. Okay, so here now try not to get frustrated with this part because it can be a bit frustrating because this is a bit uh it's a bit repetitive. Okay, Because you'll see why now out here just to be verbose. Okay, I'm just being verbose out here, which means I'm just going to say let cart items is equal to a card object dot items. And the reason why I did this is because I don't want to keep typing out card dot card objects dot items, dot card objects, dot items again and again. So I've just made a very simple local variable to reference that. Um Now I'm going to iterate through each of the properties for each of the products In the items array of the card object. So four Let I is equal to zero i is less than a cart items dot length. And uh I plus plus in this part, we're not using any like this function. We're not using any. Like great uh kind of logic. We're just basically going to create elements, append elements, create element, append elements, that's like it's pretty repetitive. So end of four. Okay, now the first thing that I want to do is I want to create a diff so each product item has its own diff inside that div we put the product's name. Price a removed button. Okay and maybe even the like title, title I've already said. But image. Well kind of like this right? You have a div you have the items, the products details, you have the H. Three tag, you have the image tag, you have a P. Tag, That's what we're doing now. Okay so now I'm gonna say elective is equal to document object. Use your create um element. Method to create an element which won a div element. Now, bootstrap framework comes with inbuilt classes which is one of the reasons people like using it, you don't have to use that much CSS So what I'm going to do is I'm going to use I'm gonna set the gives attribute to basically set the class attribute. So I'm gonna use a class attribute and the class that I'm going to use is a again it's given by the bootstrap framework. I didn't come up with this, these are just utility classes that you use to make things responsive. So once one of the classes is I'm gonna use column a small eight D. Flex. Okay and then um justify, it's a pretty big class name content. The content between Okay, so all of this is given by boot struck. All of this is given by bootstrap and then I'm going to add in my own kind of if you will um suffix to this, I'm gonna say cognitive and the reason why I like just use my own thing here is to select it and CSS and style it. That's it. Okay, so this is given by uh this is given by bootstrap. You don't have to kind of um worry about that. Okay, after that I'm going to say, well let the product title. Okay, so let product title is equal to document object create element. And for the title we can maybe have some kind of each tag. So you can have each one H two H three, whatever. I'm just using H five. Now, what is the product titles um value going to be? So we're going to say product title got inner html. Okay, so in our html always refers to like this stuff here in between opening and closing tags. Inner html is going to equal to card items. Okay, so cart items at index. I got product name. So out here, I'm saying That the title of the product, this H three element that we're creating right, its value or its inner html is going to be basically the value of the product name property. So this is where this all of this is coming from. We're building our dom from this items array of the object. Now you don't have to like, just forget about the html. We are making everything separate. Okay. The person who does the html, they can do whatever they want at the front end, you are just concerned with your card object right now. Obviously if they change the classrooms and the ideas, that's gonna be an issue. But anyways, so after that, why don't we create? Okay some image? We have like a small uh company will if you will, so we can say let image that I am is equal to document a dot create element. And I'm creating this I M G tag again, we're just like creating elements and then we're using inner html because this is going to be some image. Then I have to set its source attributes, I M G S R C. You can either do it set attribute method or you can just do S R C. Is equal to, sorry, not product, bread cart items, right. Card items at index I and what we call it. I believe we call it product I N G like that. So now we've got this image for that. Okay, now we're going to give this image a class. Why am I giving it a class? Because I can be bothered to do anything in CSS and bootstrap gives me classes to easily style my elements. So I can or I can even do like image dot class. Well, I won't give it. Um Okay, so I'm giving it my own class here because I did something in CSS if in bootstrap you want to make an image responsive? I believe the class's image dash fluid. Okay, so that is that here? So what I can do is control the sea here and maybe just leave it as a comment for you. So that is one of uh the bootstrap classes for images and out here. I'll use style dot width. So style is an object. Okay, so we have a style object and we're using accessing the width property to set the width of the image to 20%. You can certainly do CSS and javascript. You have to basically enclose the values in quotes. It's not as common just because of separation of concerns. You want to make sure your html CSS and javascript are as separate as possible. Just to make it easier for you to manage stuff. Now let's create a p element which is going to hold or display the price. So the way to do that is let product a price is equal to and a document dot create element. And I'm gonna create element P. Okay. And then what am I going to insert inside this? Well, product price dot inner html is equal to cart items at index. I access the property which I believe we called product price here. Okay, so we've got the product Price, we've got the image, we've got the title. I believe. We've almost gotten everything. But one thing we need to do here, we can even do the I. D. So we can do we can show I. D. So I can say let product I. D. Okay so let product I. D. Is equal to another uh documented dot create P. Element. So I'm using P here. So create element and it's going to be P. Okay. And out here I'll say product I. D. Dot inner html is equal to cart items. And at index I start cried oops dot product ID. Okay. What kind of long long function long like just doing dom manipulation, creating elements and then we will append the elements to the dump so to the document on our page. Now remember we also have a removed button? We want to have a removed button so that people can remove stuff from our card. So let so for each product in the items array, we'll have let remove of Britain is equal to it's a reference to a dom element. And the dom element that we are creating is the button element. So we've created a Britain element out here. Okay nice. Now we can set the remove buttons attributes so we can have a class. The reason why I do these classes is because now if I want to select the remove like I want to style the remove button, I'll just use B. T N B T N dash danger. This is coming directly from Bootstrap frameworks there's lots of frameworks, each of these frameworks gives you their own utility classes to um style stuff and make it responsive. So as you get acquainted with your framework of choice, you just kind of start remembering these classes and then the remove button, remember a button will not show on your web page even in html unless you give it some text right inside the opening and closing tax. So the same way we have to give some a text here. So I can use removed the word the string remove you could even put an X. So X means delete. Right, So you can do any of that. Now, a little interesting part here because this has been just being create element and then put the inner html all to do with this stuff here, which is basically this stuff. Okay, now, this is the interesting part, I would say more interesting. Uh we've got to remove a function, remove buttons on our for each item in the cart. Well they need to have some kind of function associated with them. That function will be called, which will remove an item. Right? So what we're going to do is we'll say remove button got set attribute. And what attribute am I setting? It's the on click attribute. So on click where do we use we use an html? Remember we have on click attribute is equal to some function. So that's where on click is coming from. So I'm using on click attribute and what we like what will be the function that's called? It's removed this. So I'm using this keyword here and of course um oh I have put this wrong, so small typo out here. Yeah, that's better. Okay, so we have an on click function assigned or attached to each removed button and this function is called removed. It takes this as an argument and this refers to a specific product at index I of the items array in the card object. Okay, now, if I control us here and basically I go here and I control r to refresh, I'm still not gonna see anything in my cart. Okay, Because we have created the elements, Okay, we've inserted values as inner html but we have not upended the elements to our dome. So there's two steps here, create an append so you have to create something but now you actually have to show the cart items as well. Now, one thing before I go there is a card container. Do I have a card container here? So let me just see my html CSS. Sorry, card container. Yeah, go ahead like said attribute and like this, No. Yeah, I'm just showing two different ways, like a lot of times people just find this easier. Like, like this is a bit more verbals, so it's conveying the intention but this is just easier to type. Right? Yeah, no problem. So by default, what I did was like um I have the card container I. D. Here. What is card container? The cart dash container if you remember. Is this diff So this diff by default. It is not shown on my web page. As you can see that the display property in CSS has a style of none. But when someone adds something to the cart, I actually do want to display it. It doesn't make sense to display the cart when there's nothing inside it. You want to display something when someone adds something here. So after the four loop. Okay I'm done with the for loop. Now I'm going to say, well if you remember card container, we got a reference to our cart container where where it's the div which contains all the items in the cart. So I'm gonna say out here. Well cart container. Okay. Got a style dot display again using style object and then display property and setting the display properties value to block. So that's how we show um something okay out here. And okay so we've shown the card container again and nothing is gonna happen because we have to kind of now append the elements, all the newly created elements. Okay so this is what I said. Other matters. Well what do I want to do first? I wanna say div Got a panda child. Okay append a child. So let me see if I should be able to see it before but let's just see okay dave dot append a child. And what am I a pending to my child death? I'm appending the product. Okay what did I call it? I call it the product name. So basically what I call it Product name. Product title sorry product title. Okay mm okay appending my product title against silly mistake and then to the same diff I'm appending child and what am I going to append? I'm going to append the image after that. I will depend I have to append the no not dispatch event append a child and what am I a pending? Well I have to append the product price. Okay so whatever you want the order of stuff to be displayed in, it's up to you in this um order you'll have the price first and then you you're having all. Okay anyways so I think basically we want yeah so we have the appended child after the price. Maybe one. We want to show the product I. D. Okay so product I. D. And lastly we need to show our remove of button. So dave dot append a child and I am going to remove append the remove button. Okay so right now lastly we want to upend this newly made deaf element okay which contains each individual products info into a raw element of the card container. So what I'm gonna do is this diff is going to be a child of ready to go off this deaf? So this is where I'm going to put each product groups, each product deaf. Where did it go? Yeah, so this is where I'm gonna put each product like product number one and then the div for product number two. So they're going to be Children of this role. Okay, so to do that, I already have a reference to my role if you remember it's here. Card call, I already got this div here I. D. Card call. Um So in CSS sorry, javascript I will say cut Polo. Okay, append a child and I'm appending to my card call each individual device which has all the elements of for our product. Okay, now let's see, so control s and now if I go here and Maj okay, so Dave is not, this is what I was scared of and I believe it's because it's within the for loop, I think that is happening. What is happening out here. I believe that might be happening. Okay, so what I could do is maybe move these elements that create elements outside of the for loop. So let's go here like that. So let me just check this first. Um Yeah, so that's what is happening. So hopefully I've not confused anyone. Remember I said that. Let and const variables have kind of scoped to their inner, like the closest curly braces in this case the for loop. So what you wanna do is you want to remove these declarations outside here. So anything which is let I just put it out here so that um it can access it basically. Mhm. That product praise. So let me delete that and lead product I. D. So whenever I see a declaration, I'm just basically red headed goal, moving it. Oops, what did I do there? Yeah, so let image and then oops that product price control C and remove it, put it here. Lead product I. D. Put it here and then let remove Britain and put it here and then okay, let's see this. Hopefully um we don't have an issue now but never say never. Okay, so there you go. So that was kind of doubted myself, but I should have done it then, but that's what happened. You have to remove the lead variables to the top of the scope so that they can be accessed by the four uh loop and your dev that you're going to pin them to, so we can add stuff here. Okay, so now if I do this, you can see something horrible is happening, okay? It's not basically being added to the cart object. Okay, But it is certainly being added to the web page, so when you're doing this kind of front and stuff, you have to, I kind of remember in state management there's two things you are managing, what the user sees and any of your data structures at the back. Now let's work on that next and then we will say bye to this function. Um, so we need a way to basically, even though only one of each product is added in the items array of the card object, we still have to maintain the state in the dome. Okay. There's two very different things happening in the dome and in our data structure, the cart object. So what we can do is why don't I out here after this? Why don't I do this? I can say while. Okay, so I'm just gonna use a while uh, statement. So while card call, Okay, Card call dot Children. Okay. Dot Children got length. Okay, so while the card element has Children, we want to remove the first child with the new child method for some individual products. So what we're doing is card call, okay? Card call dot remove child. And basically this remove a child method is going to say cart Okay, got Children at index zero. Now there's different ways to do this. Certainly. Uh, there's many ways to do this, but we, like I said, we're maintaining two different states at this 20.1 in the dome and one in the actual, um, our object object is taken care of, we don't have to worry about our object at all. Um, it is the dome that we are now messing up. So here I've added something and there you go. So now we are getting what we expect to see, kind of but not really. Now this stuff is happening, okay, so this is what we have to fix, so let me see what is going on here. Um let me put this right at the top, that's where I originally thought I'd have it, but it made no sense to put it like a kind of okay, so this is still happening, we have to work on this next. So let me see what could be happening here. I believe it's something to do with our appending. So let's take a break here and see um I think what I have to do is basically, maybe I need to append um I need to append inside of the for loop. I think that's what I have to do, I have to move this out here control, see it has to be inside of the for loop, I believe. Okay, let's see this. And now if I go here and I add no, hm that's very weird, let's see what's happening here. Mm and then do I do I really need this out here, if I'm going to basically use them inside the for loop. There you go. So, okay, so I removed things outside of the four loop and then I moved them back in. That's another thing sometimes you're anticipating something to happen in the future and then basically you do it the right way, But then when you're in the middle of stuff and you don't do it all the way through, you have to come back now, everything is inside the four loop because for each item, I'm creating a deV for each item, I'm appending it to that dev. Okay, just this card container dot style dot blog. Like this can be outside of the for loop because this is saying once you upend everything, then display the card, but everything else is inside my iteration because I'm doing it for each of my products except for this while statement, which is taking care of managing the state of the dome. So that I'm not adding like two of the same type, which like we saw was pretty bad. Now. We could also add like you can maybe we can come to this at the end. But basically, what you could do is remember I said like there's some notification system stuff going on here. Where was it? Where was it? It's something, it's somewhere here. Yeah. Notification. So you can see it's by default, it's hidden every time the build dome function is called, you can show it this is a kind of a small thing. Maybe we'll come to this at the end, but I think our messy function, which is, this is done any questions. Okay, So this is the messy stuff that no one likes about dom But everything else is pretty uh it's pretty, I would say it's less redundant. This is useful as well basically anyways. So we have done the build function, we don't have to call anything out here towards the end like we've been doing because remember we have the remove button now all I want to do is when someone clicks here, something should happen, it's telling me remove is not defined because that means we have to declare the function remove. Right? So after build drama function, let's declare function remove which takes some item or product right in your cart as uh end of remove as an argument. Okay, now we are going to be allowing a user to remove an item from the dom but once they remove it from the front end we also have to make sure that it is not inside here as well because this is the source of truth and once we delete it from here, we have our handy function called built dom which is basically just going to create everything and inserted on our web page. Okay, so we have a function removed item or remove. We can even basically if you're a bit confused, you could even say button out here, like you can add anything um as your program, so this refers to the button. Okay, you can use item, you can use a button now, I can do console dot log Okay, so I'm just going to console dot log Britain why am I console logging? But because I want to see if I'm getting the actual button the button and then we want to get the parent of that button and remove that parent and basically also remove it from our items are okay so very cool and add and then let me click here. There you go. So I've gotten a reference to my button. Okay so if I click here then and I click on the second removed button it refers to the button which is here. Um and then if I do this this okay so I've gotten a reference to my dorm button element. Now let's work on the logic which allows us to actually remove stuff so we've come across this before which is okay console dot log button dot parent element let's get the parents of our button and let me go here and then let's go here and add and then remove. Okay so it's telling me the parent of our button, is this okay? So now we've gotten a reference to the actual product in our dome. So similarly if I add food icons and I click on the remove button for food icons it's telling me well the parent element of food icons is H. 25 food icons. P number $22 I. D. Is 62 so on and so forth. Okay so what do we want to do next? Well next what we want to do is we want to get the I. D. Of a particular item. So we're getting the I. D. And then we iterate through the items array to find and remove an item with that specific I. D. Okay this is why we had I. D. Otherwise we don't really need, if you think about it, we don't need I. D. For three items. Um We don't even need to show the kind of the shopper, the person or the our front end user the I. D. But we using I. D. For ourselves as kind of a reference point specifically for this removed um function. Okay so now to get the idea of an item which is associated with a particular product we can basically we can go back to our build um function. Okay so go back to your build um function which is this one. And here you can see that we have a product I. D. Right? And um so we have product I. D. First and then the remove button. So what does that mean? It means two things. Right first we can say that the product I. D. Is the sibling of the removed button? It's the previous sibling. So in Dawn we have parent child relationships. We have sibling relationships. So the I. D. Okay is the sibling okay of the remove button? It's the it's the first sibling. Like it's the previous sibling and then we have the price which is the previous sibling of the I. D. And then we have the image. So all of these are basically siblings. And the parent is the div class called small eight. So again we are relying on these parent child sibling relationships in the dome so that's pretty handy. So what we can do here is what did I do there? Okay, so what we can do, let me just put for you. Yeah. So we can say let item I. D. Okay, so let item I. D. Is equal truth Parsons. I'm just gonna type it out and then I'll explain it to you exactly what I'm doing. So we want to get the buttons. Previous sibling. Okay. Uh Previous element a sibling. I'm not making anything up here. All of this comes from the dom properties and dom uh A P. I. S methods and we want to get the inner html of our I. P. Okay, so here what we're doing is we're getting the buttons. Previous sibling. Okay. Using previous element sibling property. And what is the previous element sibling property going to do? It's going to return the previous element in the same tree level. So dom a P. I is basically it's a hierarchy of element nodes Okay, represented as uh these child parent sibling relationships. Okay. And once we get this idea we want to grab its inner html And since this is a string, right? It's going to be a string. We can use parse and basically to pass the string and return and integer. The reason why we want to do like parse parse in and javascript does like type coercion implicit type coercion. So you always want to be a bit cognizant about our data types because we're not specifying the data type of each uh that each variable references. That's one of the things about javascript which is not common in some of the other languages. So that's one of the things. Okay then we can do this console dot log so I'm just gonna console dot log something as usual. Okay why? Because if we are making a mistake let us just know right now that we're doing something wrong rather than um coming back and then realizing oh no something went wrong. Okay so this is the I. D. So I'm just using this temperature in. You can use just concatenation. Doesn't matter. Okay so control s to safe and let us go back here and let us add something here. Okay and then let us click on remove. Okay now this is the I. D. Okay so not a number so that means not a number which means I am probably doing something wrong here. So I'm using parse into a method which should be fine out here uh button dot previous element. Can I do it without this item I. D. Let's just see without this doesn't matter control us I do want to use parse into so that I'm not drink strictly equal to like anyways remove this is the idea. So it's not getting me the I. D. For some reason, let's see what's happening here. Hm. So I'm getting the um I'm getting I need to get the previous element sibling. That is what is important because the previous sibling of my button is my I. D. And the I. D. Is what I'm going to use to iterate over the items array and basically remove some items. Hmm. Let's just see previous element. A sibling. So what I can do is uh okay, let me just do this. Okay, so it's a paragraph element. That's very good. So we know that the idea was inside a P. Element. Okay. And what is um okay, why don't I do this console dot log item I. D. Dot inner html. Let me just make it a bit easier for myself and let's add and let's remove. Okay, it's odd. Now it's not even showing me the idea what happened there. Oh did I remove the, no I didn't remove the I. D. From here. Mm One second. I'm wondering if I did control Z somewhere and then something went wrong because I'm not seeing my ID in my dome and I need to see it in my cart here before I can do anything. See I'm not seeing it here, that means I did something here. Give append a child. Product ID. Okay create element. Okay but where is a product I. D. S Inner html. See I did something here. Product I. D. Dot Inner html is equal to cart items? I remove something at my end when I did control Z. Maybe you didn't. So that might actually work for you. Product I. G. So here I'm just doing a bit of debugging and let's go here. There you go. Now. I see it in my shopping card. I think I did something like I deleted it by accident but I'm not in adam. I'm here. Okay so now let's try this. So now let me try this control? S okay and then come here add something to the cart and remove it. Okay there you go. So now I've got a reference to my I. D. And like I was doing earlier. Okay I was doing this earlier so parts ain't because of the string. Okay it's a number but it's still like a string data type. I was doing this and then item I. D. So I'm just gonna do that and out here if I go back here. So the idea is if you even, okay there you go. I've gotten it. If you notice the I. D. For each product is always random. Okay which is why I said at the beginning that let's just suppose it's some auction um geo like kind of what is auction near me kind of application which is running only for a certain amount of time. Now once we get the I. D. We've grabbed its inner html and since it's a string. Remember it's a P. Element. And the number is actually string data type. We've just used parse into method to parse the string and return an integer and we've verified what we're doing is correct with our console dot log. Now next part is that we want to remove the item with this specific I. D. Which is associated with the remove button. I removed button element from the items array in the cart object. Okay so we're going to iterate through the card object and search through each items array like element for this I. D. And if we find it then we use a splice method to just remove the array element. So now if you've probably maybe you've used spice method with a raise. The only difference here is that we've we're now going to basically be dealing with some dom element. Again coming back here. This is still happening in my remove a function so mm four hoops. Maybe it's Yeah so for that I. Is equal to zero. I is going to cut object. Okay got items dot length I. Plus plus. Well now I need to find this uh product I. D. So I'm going to structure my if else conditional statement. And my condition is if cart object. Okay cut object at index I Okay dot not sorry cut object dot items. Okay at index I got product I. D. Is strictly going to be equal to the item I. D. Of which is associated with that particular removed button then. What do I want to do? Well, I want to cut objects. Got items. Use a splice a method. Okay. And what am I spicing? Well at index I am going to splice only one object. Okay. The splice method is going to remove one item at index I. When it finds that product I. D. And it is one of those methods which does mutate or change the original array. So we don't have to worry about doing anything else out here. Like that's it for the card object dot items array. Now, once we remove it from the items array in the card object, we actually need to build the dome again. Okay, because we've removed it from a data structure but we also need to use this build dome function to basically iterate through the card object items array again. And basically build it. And the way to do it is to come out here. Okay, towards the end. So we want to basically, just towards the end, we are going to call build dom function again, build on function is I've tried to keep it as such, that it's only creating an appending. That's it. It doesn't like do it doesn't manage or mutate the cart object at all. Uh And the reason is that you could have wish lists, you could have other functions and you never have to like build stuff again, you just call the build on function. Okay let's see if this returns without error. Okay so now I've got two items. Let's remove business icons and there you go. So it's removed at so cart cart carta. So I've added all three. Let's remove business icons. There you go. Let's remove crafters icons. There you go. And let's remove this as well. So we've removed everything from a front end and we've also taken care of removing an item from the items around the card object by using splice method and the glue for us here. The important part was the product I. D. Okay so you could do it with product need certainly you could do it. I'm just using product idea, I'm just showing you a different way where you can use I. D. Now if one like disadvantage I see of using I. D. Is well we're not using local storage api out here that means if we refresh the page we're not storing the person's card items in their cart. So and because we're using math dot random function to randomly generate an I. D. That means the products I. D. Changes every time. Okay so that is one of the disadvantages of using I. D. And in that case you could go for something which is not going to change like product name. Okay now the next part of this is we're getting towards the end is the total. Okay, so after someone um, you build the dome and maybe someone clicks on remove button right? You want to basically um have total function Now, total function. I'm calling it after remove. But one other place you could call it is after build dom function because if I just call it after remove that means the total of the cart should only be calculated and displayed only if someone clicks on remove function right? But we want the total to be displayed even if someone doesn't um basically remove anything from the cart in that case you also call total from here inside of here. So totally is called twice if you remove something from the cart, you want the build down function to execute again. And you also want to calculate the total of the cart items once again. And if you remove something like I said, you know, you want to build them and basically do total again. But one thing is that if you build the dom function, you don't actually have to call her move from here. I don't see having to uh call remove here. You could basically just call it from one. But anyways, let's just roll with this now and change it later if need be function total. So this is one function before our Paypal function. End of a total. So we're almost there friends. Okay, so total function is not that horrible. We'll declare a local variable called a sum which is going to be equal to the sum total of all the card items. So I'm just gonna say let some. That's it. Okay so uh we've declared some. Now. What we wanna do is we want to basically uh iterate through our um card items. Okay get the product price and we wanted to add to the product price basic. Uh we want to basically then use addition assignment to add it to our sum total. So let's just do cut object dot items. Okay you can use a four each. Okay? And then for each it takes as an argument a callback function and the callback functions um has one mandatory argument which is the which is the item at the specific Yeah iteration. So anyways we have our for each. Now what I'm gonna do is I'll say well let item price is equal to parse float. So remember that our product in the dump and also in a product dot card object dot items array is a string right now. Okay so anyways and it's got that dollar sign as well. So we have to, this is why I'm doing this because I already took into account that I'm going to have that dollar sign that I need to remove. So product price. Okay so product or price dot a sub string and one Okay and then because we never know that if we are correct or wrong, we can simply just alert this for now just to verify so that we're we're catching all mistakes in kind. So with with what's happening with dom is even though you might not have a logical mistake, like your code might run okay in the front end you have this crazy stuff where you, in your mind you're thinking oh price. But then you also have the dollar sign in front of the price and you have to remember price is also a string, it's not a number and you know you want to basically take care of that. So what I'm gonna do now is control this to save and then just let's just say this so add two. Okay so two was my price. So I'm getting the number two which is that alert? So if I add 1.5 I'll say two and then I should see 1.5. So we haven't done the sum total right now I'm just verifying oh did I get the price? Am I getting the correct price for each item? So that's what I did out here. Any questions so far? No, is is anyone may be lost or board? We're almost towards the and where we can see some some kind of uh ray right with the with our remove and our total and now basically even our this thing okay now another thing that I just thought of is I don't want to let this be um undefined. Let's just give it zero because undefined means that oh it's going to be assigned a data type later on. We know javascript already does some weird stuff with type of coercion. So I just said oh let's sum is equal to zero. It's a data, it's number data type and that's that's gonna be that. Okay so after that what I want to say is some addition assignment operator. Okay it's equal to item of price. Okay so now the local variable to the sum, I'm adding each item's price. So to if I have two items like two plus 1.5 plus one. If there's only one item then which is of $2 then some is now two. Okay now after that remember card dot object? A card object has this property which is called total and total is a reference to the total of the cart object. It's nice and it's important to have this total property because um you could like you just anticipate other features, you could build into your card like what if you have a discount code? Right? And if you have a discount code you have to alter the total property and that total property should be defined in our card objects. So card dot a total is going to be equal to some Okay ralph I could do it out here. I think this just makes it it's a bit more lengthy but it's nicer as in we can catch what we're doing So create element So out here I'm not going to create ELEMENT but I can document dot get element by ID. So I'm getting the element by I. D. Which is called total P. So I already made this uh roll with this div class column small eight with this I. D. Called total P. For the sole purposes of inserting some total amount into the diff. You could certainly create this from scratch like we did up here. You could do that. Okay so each time total function runs, you could do that. Uh I just did it this way because again it's just shorter. So inner html is going to be equal to our cart dot we can basically we can say we can do a temporary string. You can use contamination. It doesn't matter. We could do a car. Total, right is and then plus the sum, right? And then something like that you can do, it doesn't matter. Okay now there's two things here, Number one, we're displaying the the sum in our front end and we've also taken care we are cognizant that the sum is assigned to the total. Okay, in our cart. So you could even do carta dot object dot total. It doesn't matter. Okay. Just two different ways. So now once we've done that, let's see if we can see it on the front end. So saving it and then uh coming back here so I forgot to remove that but here you go. So now let's add something else and there you go. Okay, so if I remove something. Mhm. There you go. And if I add this there you go. 2.5. So let's add this 4.5. Let's remove the 1 1.5 here. No useful. Okay, so state management once again, I think I was we did a good choice by calling a total also after removed because you have to calculate a total after you remove and then you're also building dom So that is for the total, we have one last function which is called Paypal. This is the one which is going to basically allow someone to pay with their Paypal. So Paypal has a different A. P. I like it has an A. P. I. And I'm pretty sure it has like more than one api So we're going to be using now. I already hard coded this here but I'll give you, I'll send you the documentation for this. But people, you can send payments through a form element with these hidden inputs. Okay, so you can sense something off and basically if you're receiving something inside your own paypal, you could change this to your email dot com, whatever. So I'll send you the form for sorry the link for that. It's a Paypal's document but what they're saying is for payments to be submitted through a form, you're going to be using this action attribute, whose value is this address here with the post method and you're going to be submitting some information with your um with via these hidden inputs. So out here I just have value currency code, you could use C A D or whatever out here. We have your email, there's tons of these input type helmet hidden. Um, other like there's others, I'm just using the most common ones. And out here you'll see there's nothing inside amount. Now. It's going to be up to us to pass from index dot html cart dot objects dot total to Paypal dot html. You can do this very easily if you're using back end. Right? So you, you're using a post and get requests from for html. Just think about it. We are passing something from here to here. So we'll have to come with come up with some creative way but it's not that hard. So let's work on our Paypal function. So that's the last function for us. So we'll declare papal function. So function, sorry, Paypal people function is only called after total. You don't allow people to see the Paypal button or to check out before there's actually something in the car Because if they're just like checking out with $0,000 it's it doesn't make any sense. Right? So we need to have a conditional statement here. So let me just do end of Paypal and then end of if so out here, I'll say, well if card object Your total is greater than zero Because the one of the items priced is one. Right? So maybe you have something that's for 50 cents. And you'll say, well if carts, if the total property in the cart object is greater than 0.50 or 0.25 whatever for us, it's greater than zero. Then we want to do something. Now there's two things we're gonna do out here. We're going to create the Paypal button element. We'll insert it into the dom. Okay, And then we'll append it to the dom. That's what I mean by insert. And then we're going to use this session storage A. P. I. Okay, so let's just work on this next. So what I'll do here is well, let okay, pal button, I'm just gonna create a button element. So let Paypal button is equal to document dot create element. What am I creating? Well, I'm creating a budget element. Okay, now I'm going to give my Paypal button element. Right, I'm just gonna, sorry, Paypal button, I'm going to set its attribute and I'm gonna set its class attribute to be B T, N, B T, N dash I think we can use a default or primary, B. T and B. T and dash Primary. Okay, why am I doing this? Well, because bootstrap is giving me this class to make a blue button if I didn't if I wanted to use my own class, then I would just give it whatever name I want and then come to uh CSS and then select this Paypal class and do something here anyways. Um, so coming back, so we've done that and we've also got another class to basically make it big a big button. So L G L G stands for large. So make it a large blue button. Okay then once I've done that, I'm going to create an anchor tag. Why am I creating the anchor tag? Well because the anchor tag nested inside the button is going to take us to the page, which is called paypal dot html. Okay. So document dot create element, what am I creating? I'm creating an attack. Okay. And then I'll just, the reason why I'm giving it this idea is because I've already accounted for the styles in my style dot CSS That's it. Okay. And then we'll see anchor. Now this is important dot HF attribute is equal to okay, pal dot html. So what I'm doing out here is remember in html you can have an anchor tag, ID tag nested inside a button tag or basically that's just what I'm doing in dawn. So after that anchor anchor dot inner html is equal to Paypal. Okay. Or you could just say, hey, whatever message you want the user to know that they're being redirected to pay. And after that I'll say, well I've got my anchor I've got my button tag. Well, uh sorry, the paypal button. I want to append the a tag to my Britain of the paper Britain. And now I wanted to upend this paypal button again. Just same thing here to the total P. So I've already got my total P. Tag and I'll say document uh dot get. It doesn't matter um if you're doing like it just the other matters. But if you just want to have an anchor tag it doesn't matter. You don't want to have a button tag. It really doesn't matter. We're just appending we're creating and we're appending. That's the kind of the pattern out here. So I'm gonna get this I. D. Which is called total P. And I'm going to append it to it. Okay I'm going to append a child to it. What am I appending to the child? I'm appending the paypal button Now. This could be a diff to be honest because usually we're not appending buttons to peace, right? So it could be a diff it is like that's why I said it doesn't matter what matters. Is the order just be cognizant of the order. Okay so let me let's just see if like what we've done so far is working because if it's not then we have to come back and fix it. Now let me come here at and maybe I should have just like ah they go so and let's do this okay so we've got this uh button with the paypal and it redirects to Paypal but I won't be able to pay as yet. So remember I said there's two things first we have to create the Paypal and the anchor. And then we have to append it to our page. This document out here. And the second thing we need to do is we need to use something called this session storage. Okay. So hopefully everyone is here so far. Any questions? Okay. So next, what we're gonna do is we're gonna use a session storage. So you have local storage and session storage Api which allows a user which allows the state of a page to be saved. Even if the user kind of refreshes the browser leaves the browser reopens the browser. So session storage, we're gonna use a session storage. Api is now session storage object. Okay. It's called session storage object. Has something called the set item method. Okay. And the set item method is going to allow you to set the value of some specific session storage object item. So while we're still inside of this conditional statement in our code, what we wanna do is we wanna say session storage. Okay. Object. It's an object as you know, methods are functions associated with objects. So this is the name of the method which is called set item. It has a key. It comes, you can save things as key value pairs. The key can be anything. I'm gonna call it Paypal total. You could call it whatever you want. I'm just calling it Paypal total. Okay now hama, what is it going to save? Okay, so it's gonna save Jason. I'm gonna use Jason a dot a string if I method. Okay and what am I saving? I'm saving the card object dot total. Okay, so in our Paypal function we need to use a session storage object which has a method called set item. Set item allows you to set the item which will be saved and it passed as argument to this set item method is a key value pair. The key here is a papal total and then we have, the value is going to be a cart object or total. We have to string defy the result. That is why we use this. Otherwise you're just going to see object object. Right? But we need to basically parts the object and get a string. So that's what we're using. Okay now if I control? S here, okay if I control S and I come back here to the web page and let's try this out. I add something and let's add something else. Okay? And then let's Paypal and now buy with Paypal. Okay, so basically it's not working as yet and to make this work, what we need to do is we will come back to our code. We're done with javascript this cart dot Js file we need to head to Paypal dot html because if you see that the amount Okay, this input type is equal to hidden. This amount is right now it has the value is zero. Okay, there has to be some amount here for it to basically um basically allow you to check out. Okay, now I'm just gonna rig out here above the closing body cat and I'm just going to put this small script thing. You could have another script file. This function is just like a 23 lines long so I'm just putting it inside Paypal. Uh this html page and also because the html for this is right here soft. What we'll do is we are now we're going to declare a variable called Paypal total. Okay, now this Paypal total variable has nothing to do as yet. But what we declared in cart dot Js you can't just share variables around files. You have to actually use export module if you want to do that. So this is different. You could call it whatever you want. So let people a total ok. Is equal to what Now we are going to use session storage object once again. And this time instead of set item method we're using a get item method to get the key called Paypal total and get its value read a session storage occur. It occurs in the browser. We're still using the same browser. So Paypal total is equal to session storage dot get item. What am I getting? Well, I'm getting the idea the key which is called Paypal total. Okay, how do I know the key is called Paypal total. Well remember this is what we did this key exists in the browser. So now you get out of like you stop, you can stop thinking about oh it's in this file and how is it going to reach in this file? Well as long as you're still in the same browser, it's okay. So let paper total is equal to session storage dot get item. And I've I'm getting this Paypal total now what I wanna do is I just want to console dot log. Okay Jason dot parse method. I'm gonna use parse method and I'm what am I passing? I'm passing this Paypal total variable course Paypal total. Okay and why am I doing this? Because I just want to see if the actual total is being a past on So control s and then we come back here and then let's add something to our cart. Let us go here. Okay so there you go. So I see number two that means from index dot h t m L. If I add an item 1.5 and I add another item so 1.5 plus one it should be 2.5. Now I'm going to go to my Paypal page and I expect that the card total of 2.5 should be passed from index dot html to my Paypal page because it's in the same session in the same browser session. Okay so Paypal. There you go. So now I know that this total is being passed. Okay now it's still not going to work. Okay? It's still not going to work if I do this, we need one more thing because if you remember that the value of this attribute, the value attribute for name is equal to amount right? Is still just an empty string. So what we're gonna do is we're going to use a document dot get element by I. D. And we're going to get this I. D. Which is called hidden input. So I gave it, I gave it this I. D. It doesn't come with the I. D. I just gave it an I. D. And this is something you can do. So what I'm gonna do is I'll say well document dot get element right, but I. D. And what am I getting? Well I've called it hidden input. Maybe that was not such a nice way because we already have this input type. Hidden input type hidden. And and then I'm just saying hidden input. Maybe this could be called Well hidden total. So anyways, so hidden input. Right. Dot value. So this element value attribute should be equal to now. Right? What should it be equal to? Well it should just be equal to this thing. Control C. Control V. There you go. So it should be equal to the Paypal, the Paypal's objects value, right? Which is in the session storage with session storage a P I, you have to use Jason dot parks and Jason, Jason dot string. If I methods because session storage, this is an object. Okay, so local storage and session storage are objects. Okay. Now one last thing also is you need your own email address, like you need an email address to which your payment will be forwarded to. So even if you have one thing, even if you have like alleged business, you might be thinking, you know, paypal is horrible. Well even if you have sometimes alleged business people just put holes to your account. Okay? So in this case this is why the use case we're taking this. Okay, maybe someone is receiving like 500, 5000 in the account and not like, you know, it's not massive. If you're doing massive then yeah, I think stripe might be better for this. We just assume we're doing micropayments so you can put your email, I'll just put my email and then hope everything breaks control? S out here too safe. Okay. And then let's go here and let me go back and then to And then 1.5 so I've got 3.5 going to paypal now and then this, this lets me know, Okay, you can buy now with Paypal and okay, so, so basically if I do pay now, it should allow me to pay. There you go. So it allowed me to pay now this annoying stuff has got nothing to do with me. If this is happening through paypal side. But basically now we've paid and you can, let's try return to merchants. Let's see if this works. I've not tried this. This might not work. But basically if I go back here and I go back here. Uh, yeah. So the payment has been made okay. And that's it. And we can verify if the payments being made, you can go to Paypal and see that. Yeah, we could see that. Let me just see if I remember my other people's password. Just one second. I have it in my computer. Okay. Maybe I can see it in my email. If some email has come through that you've received a payment. Mm hmm Yeah. So I received an email that says that. Yes. The paper like you have basically uh, received an email. Let me just check my email as well. Let me pause here. Any questions so far. Okay. You can talk now. We're done with with me talking. Mm Nice. So just to verify. Yes. We received the email which says yes. You have Basically gotten a payment of 3.50. If you're concerned about like paypal holding payments. This is why I said that paypal is okay if you're going to, you know, receive these micro payments. It's not going to put a hold on your account. Um, If you're doing like serious stuff then yeah, you stripe and you can use credit cards and hopefully we'll integrate that. Um, sometime soon and I will push, I'll push all this code to get up at the same um, at the same get up address so that you can basically reference it at any point. No problem. No problem. Yeah, for sure. It was, I hope, I hope it was fun for everyone and not too taxing. Yeah. Yeah. Yeah. I'm always, I like vanilla javascript because it's quite, uh, sometimes even the simplest things can do quite a lot. You don't have to like uh, get a hold of the most complicated things when all you need to do is basically maybe go from point A. To point B. Yeah. Okay. Friends. I think everyone might be hungry. I don't want to hold people back. Yeah. Bye. Everyone. Thanks for being here. See you. Bye. Huh. Huh