JavaScript Project Tutorial: Shopping Cart

in the shopping cart project we're gonna look at how we can add a JavaScript functionality to add items to the cart as you can see first we have the button that will gonna show the cart so we're gonna add the first functionality to show the cart itself and here you can see that we have hard-coded items and here would be a total so notice what do we have we have two items sent and 49 again hard-coded and then we would have $10 which obviously doesn't match the items that we have and if we're gonna scroll down and we're gonna see the items then we're gonna have the little icon that's gonna be showing up when once we're gonna click the card icon we're gonna have a alert that's gonna say the item has an added to the cart now let's add one more just so we can see then it's for sure working so again we have a time added to the cart and if we're gonna scroll up first you're going to notice that we'll have four items right now because we're counting all the items even the hard-coded ones but obviously later on once you're done with the project you can just delete the hard-coded ones and also we have the value so it's counting all the dollars that we have for the items and if you notice that we have the exactly two items that we selected from our store items list and they have been added to the cart the project setup files are located on my github so you can either go directly and just find by the project's name or you can follow the link that I have left in the description of the video once we get ahold of the social fonts we have the folder and within the folder as always we have all the images the CSS that's necessary for the bootstrap and also the font awesome so here we can just check it out first what we have in the index.html and so far since there is no functionality we can click all day long and the cart itself is not gonna be showing and also the items are not gonna be added to the cart as we're clicking on the icon because obviously this is the purpose of the project so now let's open up the same folder in our favorite text another and as you can see that I'm sitting in my index.html now I'm not gonna show now each and every ID or class and we're looking for because there's gonna be quite a few of them so as we're going along one's gonna switch back and forth and I'm gonna show you where exactly I'm finding the either ID or D class so now let's right away switch to MJS here let's make any comment but this is gonna be a show card so first let's start with showing the card and also as always we're gonna do everything in the immediately invoked function expressions because in this case you'll show that we're gonna separate the issues so first we're gonna work in our first immediately invoked function expression we're gonna deal with the card and then I'm gonna create another one which is gonna hold the items added to the card so we're gonna make sure that we're not sharing their global scope with our variables so let's start with declaring a immediately invoked function expression which is gonna have the syntax of parenthesis then the function keyword then again another set of parenthesis and then the curly braces for the block of code will gonna be working now here I'm going to invoke the immediately invoked function expression and now we're ready to start working like I said first we would want to select the card info which is gonna show our card so if we're going to switch back we are targeting this button and after that we're targeting the actual card so if we're going to switch back to index HTML and we can either use the command F so that way we can find and if we type card info we're gonna see that we're looking for the idea of card info so this would be the button which we would want to target now I cannot see this in a smaller screen this is why during this tutorial we're going to switch back and forth to a bigger screen and also we would want to show the card so the card itself is right here so this is below the header and here the card is sitting now we're using the position:absolute this is why we cannot see the card right now and the way we're going to do this we're going to target the card info we're going to attach the event listener and then we're going to use class of show card because if you notice we have for the card for the actual card that we're going to be showing the with right now is 0 and once we click the button we're gonna have this class of show card to the card and then we're going to be showing because notice that with the show of card class the width is 18 areum's so right now the width is 0 and overflows in this is why we cannot see the card also and then we're going to attach this class with a job so let's go back to the MJS first let's name our variable this isn't gonna be card info because this is the same thing as we're gonna be targeting so here we'll have a document then we would want to use document get element by ID and like i said the ID was cart info so cart - info and now once we have our object back since we know that once we're targeting something we're getting back return as an object we can do event listener and before we do an event listener let's right away select the card itself so for the card we're gonna have the element by ID of cart so the card is gonna be again the same thing document get element by ID and we're going to be selecting the card so the name of the ID is gonna be the card like I said right now we would want to attach the event listener to a cart info button so let's do a card info since that is the name of the variable then since we have the object we can use the method of add event listener and the first parameter we are expecting what kind of event were listening to which is gonna meet the click event and the second one is gonna be the callback function which will be executed once the event fires and like I said we're gonna do a very simple thing we're gonna select the cart that we have targeted before and we're gonna use the class list property and then we're gonna have a toggle now for the toggle we're gonna specifically write what kind of class we're gonna toggle so instead of checking whether the cart has the class off show cart or doesn't have we have an option of using a toggle now for the toggle we're gonna have to write what class we are looking for and then javascript is going to decide if the cart has the class off show cart then we're gonna remove the class once we're clicking there in icon and then if it's the opposite then I was still gonna be hiding so once we save it and once we're gonna go again to the bigger screen because this is we're all gonna be able to see this once I click it notice now the cart is showing and now we're hiding the cart now I add a few things in the CSS it's not just with now I also see that if we're rotating a little bit and some other things and obviously if you like to you can go ahead over here and explore what we're doing but now that we have the cart this would be your first thing that we would like to achieve and the second one is gonna be working within items now items all gonna have a little bit more code and maybe in order again to avoid naming the same variables and them colliding who's gonna create another immediately invoked function expression so here let's call add items to the cart so this is gonna be our comment and then we're gonna do the same thing well we have parentheses then we have another set of parentheses then the code we're all going to be placing more code and then we're gonna invoke it right away so again we can close it out and we can start writing whatever functionality would we would like now first let's select store item icon and what is store item icon well first I can show you in the HTML this would be this icon you notice here we have the cart and it's showing only as I'm hovering over the image of the store ID so let's go to index.html let's write the name so this would be store item and we have the icon now this this would be the store item like I said that is within the column then here we have the card then this would be the image then I'm sorry this would be the actually the image container then this would be the image that's sitting within the image container and then here still within the container we're gonna have the span and the span is gonna hold the value of font awesome icon which would be the shopping cart so what we're doing is we're targeting all of these spans with a class of store item icon and we would want to attach the event listener to them so here let's do a Const we're gonna call this a cart BTN and let's set it equal to document and we're gonna do query selector all because there's gonna be more than one cart icon and then we're gonna target again the class of store icon and we're gonna have the store item icon sorry store item icon so quite a long name with a two dashes we obviously could have maybe named it with a camel case but let's just go along with like it is right now so once we have selected the store item icons then we would want to attach the event was none before we do that let's open up the Google developer tools just so we can see that everything is working and since we're gonna be traversing a Dom a lot we will going to be using console.log today a lot now before we start typing all the functionality I just want to let you know right away that in general there is a way better way how to do this then what we were gonna do it and the reason for this is this is a JavaScript Dom project so therefore we're gonna be traversing a Dom more than we would want just so we can get a practice in general going to add some kind of attribute over here that gets hole D of the ID that's showing and then instead of just getting all the items with traversing the NAM which we will gonna do in this project you're just gonna get an ID annual is going to contact the database and get all the information and then place it in the cart so this is not technically the best way how to do it but again like I said since this is a JavaScript Dom project we were gonna do it a little bit long way so let's go back over here to have Jess and let's start working with a cart button now like I said for the cart button we would want to add a for each because we are getting back a gnome list so we wouldn't want to attach this event listener to all of them so what we're gonna do for each so we're gonna loop through all of them and here for each and one of them have a common function where as a parameter were passing the button that we're looping through so each and every element of this card mutton nodelist and here we would want to first figure out what we're getting at so why am i saying is what we're getting at well I would want to figure out what I'm actually clicking on so instead of event listener first let's do a BTN add event listener and let's do BTN and event listener so now I'm targeting the exact button each and every time as I'm looping through them right and now I would want to hatch attach a click event so for all of them we would attach a click event and here we're gonna write a callback function which will fire as the click event happens so if we're going to click on any of these card icons then the event is gonna fire and the callback function is gonna be the code so here let's do a code block and now let's decide what we're working now we passed in here the event has the object because we were gonna use this to traverse it down and let's start very simple but it's view console.log and let's do event target now we have the event object and we also have the property of target now the property of target is gonna let us know what element will click on so once I save it and once I'm gonna go back in smaller screen notice if I click it you see that I'm clicking on the pie which would be the phantasm icon however I also have the option of clicking on the span of the store item icon and what we would want to do is we would want to set up that we are reading only when we're clicking on the actual icon on the little font awesome icon over here because it's gonna be easier for us to set up the if statement that way because we only need to care about one thing now once we know this we know that if I would want to set up for the icon I would need to somehow check that the event target has the parent element that has this class so we know that we have the event target however also we can use the property of parent element which is going to look for a parent down and then we're gonna look for the parent element that has the class of store item icon so that way I'm just making sure that only the event fires if I click on the actual cart icon instead of somewhere here in span so let's do again the event target and then maybe let's comment it out so we still have it just in case you want to look at it and then let's do an if statement and then like I said we're gonna target event target so whatever element with clicking on then we're looking for a parent element and we're making sure that this parent element has a class list of store item icon so again this way we're making sure that the event fires only once we click on the icon so the class list we're gonna be looking for the class over here now we can either grab it from here or we can just write it so let's write a parenthesis and we have store item and icon so now we're gonna be firing the event only if we're clicking on the icon now once we have selected the icon now the interesting part start like I said this is gonna be a little bit a long way but this will gonna make us practice a traverse into them so first things first again let's start looking what we would need well I would need to get somehow the source of the image that I have right now so if I'm gonna go back to index.html we noticed that I have my span so the span has the font awesome icon now the next element right next to the span is gonna be the image so then we need to start traversing the Dom where once we click the icon then we would want to look for a parent element and then we would want to look for previous elements sibling so then we're looking for the sibling what is in the Dom because if you notice the image and the span are both children of image container the image container has two children and once we know that we can select the parent element of my font awesome icon I know that I can select a previous element sibling which would be sibling right next to it and previous is obviously because this is the first child and the second one and then we can select the source but it's gonna be maybe a little bit easier if we do it console.log that way we can see everything that we're doing so let me do again a log now within this console log we're gonna do event then we're gonna have a target so whatever we're clicking on then we're gonna have a parent element and then let's have a look what we have in a parent element so let's save this once I click on the icon notice that it says well parent element class list is not actually defined so let's go back over here and let's figure out where is the problem now the problem is that we have a class list that we need to make sure that this class list contains so we're using a property of class list and then we're checking with a contains so my apologies I had a little little bug so once I click it and again it says contains is not a function and over here again the problem is because I misspelled it so the name actually is contains and hopefully with a third time this is gonna be the charm and sure enough now I'm getting back this path so now I'm getting back to span however I know that there is a sibling for this plan which would be the image and let me show you by attaching one more time the property of parent element and now let's see what we have so we click the icon and then you notice I'm getting the image container and the reason for that is this is a parent container for our span so once I open it up notice I have the image and I have this plan now I know how to get to the span using event target parent element now I would need to decide how I can get to this image and grab the source so let's do a previous element sibling which would be another property so previous previews let me make sure that I'm actually spelling this correctly because this is not gonna work if it's not written correctly so element and then we're gonna have sibling so this would be a property name and here since I know that this is an image all right right away can do a source now maybe let's before we do the source let me just check that this property is written correctly and once we click it we have you seen we have the image so this would be previous elements now like I said arm wouldn't be interested in the source so let me click a source and I should be getting back the source so once we click it we should have the undefined because obviously again very clever from my part and let me save this and let me click it and sure enough now I'm getting back to source so if I'm gonna scroll down let's say the sweet item I'm gonna run it and this is showing us the sweets too so we know we're getting back the different source so now I would want to set it up equal to some kind of element so some kind of variable so first let's say that this is gonna be let and we're gonna call this full path so this is gonna be my variable and let me delete the parenthesis over here because now I'm just setting equal to whatever getting back to a full path now once we have the full path there is a little bit of an issue because you notice I'm gonna open up a side bar I have the image but I have the image card what is the reason for this image card well you see when we're going to be opening up the card I have a smaller images I have images that are only 50 by 50 there's no point for me to grab this massive image and place it in the cart so I have two sets of images one is going to be damn a big image that's showing within my items and the second one is the small one that's displayed in the cart so this full path right now is not good enough for me I would need only the part where it says what kind of image it is in here because I'm gonna change this first part you notice I have sweets too and cupcake 1 this is what I'm interested so let me close the sidebar and let me start manipulating with a string that I have back so here let's set up a new variable and I'm gonna call this position and now I'm going to use the variable that I have for the full path and I'm gonna find the position of the image of this string of image we're gonna have a pool full path this would be the name of my string then I'm gonna use the index of a method and this method is gonna help me to find what is the position of the image so if I'm gonna go back and if I'm gonna say image now I should be getting back to image so let's do again it console.log just so we can only see what is happening so if I'm gonna go back and click it on the item I should be getting back a 22 so I know that in full path I'm getting back the index of 22 so index of image is gonna be 22 now I'm gonna use another method which would be slice so here we're going to use the image that we're getting back and we would be slicing however before we slice the idea is that I would want to take off all the text that is including the image and before the image because if we remember the full path and maybe again let's comment this out just so it's a little bit easier to see so if we're gonna go back refresh the page and once I click it you notice I would want to do a slice which would be a method that I can use on a string and I would want to take off all this text starting from this forward slash so I don't want to take everything off and then I'm gonna switch this instead of image you notice that if we have a card image this is the folder that I would want to set it up for so image card now if we see index.html right now we're having image Suites one now in this case we're just gonna flip it so in the cart it's gonna be image cart instead of this folder so let's go back again to objects and let's change this and the reason why I added three these three characters because this image is three strings long so this string is three characters long so since I would want to remove everything then in this case I know that I'm just gonna use these three characters so I'm adding them more here and once we have the position now let's do the slice method and we're gonna have the slice method of partial path so we're going to name another variable so partial path and we're gonna set it equal to again a full path this time then we're gonna use the slice and a slice would need a index so where we would want to start removing and then the second parameter is how many characters however if I don't any characters I'm gonna be taking off everything till the end of the string so I think it's gonna be a little bit easier to show you so let's do again partial path and now let's have it as a console.log and partial path just so we can see for sure what's happening and once again we console.log it if I click it I should be getting back damage now here it says partial path is not defined and here you can see that I added H so let me fix that and now everything should be working some once I click it notice I am only getting back to sweets or I'm only getting back the cake now again the point for this number of three was if I would remove it notice what would happen so I'm gonna save it and now once we again refreshing once we click notice I'm getting back the image so I'm getting the index of the position and I can still do the slice however I'm including the image but since I'm gonna use the image card folder then in this case I would want to get rid of the image also so I'm just gonna add again three and then I'm just gonna be getting the name of the image that I have so let me close the side more and now we have the full path well the partial path after we have gotten a full path now over here again let's just delete this console.log because we have been console logging and then now let's set up a object that we're going to be placing in my card because if we're gonna go back and if you notice in the card I have the image which we just got image so we we good with an image however also I have the card name and here we'll have a price so I'm gonna set up a object that's gonna hold all these values so first let's just call this item and we're going to set it up to a empty object so the object literal syntax would be just a curly braces and once we create a object with a object literal we'll just gonna add a properties to it now obviously we can write the properties right away as we're making this object literal but since there is no right or wrong way of doing it we can just add the properties later so now okay suppose it's gonna add key properties later now I'm gonna call my first property an image now this image is gonna be equal to a template string then I'm gonna use the folder where I'm be getting the images from and now I'm gonna use again the variable since I'm using a template string we're gonna use in the option and then we're gonna look for this partial path because this is gonna be the image that we're getting back each and every time on a different icon where we're clicking so here let's do a partial and we're gonna call this path again just to make sure that everything is working correctly let's do a console.log only in this case let's do the item since there's gonna be other things that we're gonna be looking at so let me save it and once we're gonna click on the card notice I'm getting the image and now this would be the path that I'm looking for so we flipped around with an image now we have the image card now image would be one thing now next I'll be looking for a elements the name and then over here for the price and again we're gonna have to do a little bit of Dom traversing to get there so here we have the console.log item and let's just keep this item because it's all gonna be adding the properties later on anyway so we might as well have it right now so let's have it first as a name and we're gonna set it equal to let name know name is gonna be equal to 1 well first we're gonna start again with a event target then we're gonna have the parent element so we're first looking for a parent element which would be 1 which would be span so we have a parent element then we're gonna look for another parent element so we're gonna have another parent element and then we're gonna have a next element sibling and let me show you why we're doing it this way so we have a another parent element and then we'll have a next element sibling sibling go here and for now let's just put a semicolon and let's console log in just so we can see again what's happening so we have the name and if I'm gonna click it notice what I'm getting back so here I'm getting back the card body and what is in the card body well in the card body we have the name and the dollar sign we're gonna go back to index.html notice what happened so we started traversing from found awesome icon then we got to the span which was the parent element then we got to a parent element which was image container now the image container is a child of the card now the card has also a child of card body so I have two of them I have image container and card body so the same way how previously we were looking for the image we used instead of previous elements sibling now we're using next element sibling so now I got a hold of this card body now in the card body again we're gonna be looking for children because this text is sitting where it is sitting within the first child so we're gonna be looking for eight children and then within a first child we also have the first child of cupcake item so store item name and like I said let me repeat this is why we would use a different way when we're doing this normally but again this is a project on JavaScript done so we'll have to traverse the Dom so like I said now we have next element similar then we're going to be looking for eight children now children is gonna return in our case an array and I know that this is gonna be the first child well in fact this is gonna be the only child we're still gonna have a node list so in this case let's do zero so now we're selecting the card text and then since this card text also has a child we're looking for a first child I was over here the cupcake item so let's do a dot then again let's do children and then let's have it as a zero and here let's set it equal to text content so that text text content you know the text content should return us the property now if everything goes correctly I'm gonna save it and let's notice what we have so if I'm gonna click it what do I have I have the cupcake item then if we're gonna scroll down again we're gonna have the donut item so I'm getting back tonight so everything is working fine now what's left well I would want to setup again the item dot name so the property and all that added I would want to add it to the item so again let me do it the same way where we have the item and then we're gonna have the name so item name this would be the property and we're gonna set it equal tonight so both of the properties now once we console.log the item and maybe we can just comment out a log off name once we click it sure enough now we have not only the image card we also have the name and after that there's gonna be the price which is gonna have a very very similar way so we can might as well copy and paste now the only difference we're gonna be changing the children because remember this card body had first a child and then let me maybe show you in index.html notice we had card body which we got with a next sibling then we went to children which would be the first child with the index of 0 and then since we were looking for a text with a children 0 so first child of card text then we were gonna look here for a children 1 so this would be the second Indian Ovilus and therefore will then access it with the children so let's go back and let me just change this so let me grab this let me just copy and paste this however let's change around and here first of all this is gonna be the price so we're gonna be looking for a price and second we're not gonna be looking for children 1 we're gonna be looking for a second job so we're gonna flip this around and let's do again income so long just so we can see what's happening and let's console.log the price so again scroll down maybe to a different item and let's see what we have so far so as I click it now I'm getting back the value 15 so if I'm gonna go somewhere understand again let's click and here hoping to have it done so we know that everything is working however we have this dollar sign over here and also notice that I have the space now I don't want a space and I wouldn't want a dollar sign so there's a couple of things that I would need to fix around so let's do again maybe let's do another variable you know the variable name is going to be final final price so final price and this is gonna be equal again to a few methods we can use on the strings well first of all gonna be selecting the string so what string you would want well we would want a price string where we have the value of fifteen dollars or ten dollars in our case then we're gonna do again the slice so now we're gonna be slicing now since I know that a dollar sign he is gonna be the character of zero then the space over here is gonna be the character one how do you want to use the slice and if I'm saying that starting from the first one so I'd want to get back everything that I have starting from the index of one index of one is gonna be this place and then I'm gonna be getting back to 15 now just to make sure that I have no white space is also we're gonna add another method which wouldn't be trim which we're gonna remove all the extra whitespace so instead of price let's console.log the final price so final price let's save this what's maybe I don't know scroll up and down somewhere where we have our famous cart and I'm sure enough now I'm getting back to them so now everything is working I have the ten now the last thing again let's do the same thing where we have the item and instead of a price we're gonna have a final price so we can do item then price and the price is going to be equal to a final price so again we can do the same thing where we comment out the final price in the console Wong and now we're gonna be getting back what we have the Uniting so again let's scroll somewhere where is the first cake we're gonna click it now I have the image the name and the price now the price is still gonna be the strength but don't worry about it we're gonna fix it later we don't need to worry about it right now now next on our agenda is gonna be creating an element that we're inserting in our cart so you notice we have a structure over here and this is the hard-coded part but we're gonna use this so we have the element we have the name then we have the price and then we have the icon that's going to be used later on not in this tutorial but to delete this let's go back and let's figure out what we're doing well first of all we need to see what's happening well we have the log some log is fine maybe we can just comment it out so it's not in my way and now we would want to create a new item and what kind of item we're going to be creating well if I'm gonna go back and I'm gonna look in the nav bar where I have my items then I should notice that first I have the card info which was a mutton and then I'm gonna look have to look for the card and our oldest here I have the card so we selected the card and this would be the card item now this is the div that we would be creating now we're gonna be using a template string so we don't have to recreate everything that's the good thing of coding this in the HTML that now with the template strings we can just reuse a lot of things and just change the values over but I would first need to create that div so let me go back in the app jas and let me first create a div so const then we're gonna have card item so this would be the name off alright um and we're gonna do a document create element so we're gonna be creating an element and we're gonna be creating a div now since you noticed that within a div i have what i have few of the classes over here so first let me just grab this whole div with a whole comments and everything now we're going to be deleting them later but for now we should just have it and here let's do a template string so let's set it up over here like a template string and then let me just copy and paste this because we will gonna be reusing this so now like I said I have the div I'm gonna be creating a class list so I'm gonna select the same thing card item then we're gonna use a class list since I would want to add these classes because even though I'm creating a div I still want to add these classes now for the class list we can just rewrite the same thing so we found one a card item and we write over here that I would want card item then we can do comma then the next one is gonna be D flex and after that we're gonna have a justify content and between them I'm just making sure that I'm not missing something because it's going to painful to look for mistakes text capitalized and as you already know if you're watching my tutorials I'm quite infamous for making mistakes like that with a misspelling and the last one is gonna be my three so these are the classes that we're having now again like I said we were going to be using template strings ourselves so we don't need to retype everything I can just delete these comments because I don't need them in the template string and now I can just use a inner HTML and I can set this to it to the inner HTML so first let me close this and now I can say that I would want for the card item and I would want to set it to in inner HTML so we're gonna have the dot of inner HTML and we're gonna set it equal to the same template string so again maybe let me just save this so that way it's gonna be a little bit better format so notice now I created a card item I added all the classes that I had in my div they already hard-coded in my HTML and next I just used the inner HTML and everything that was already in my HTML I just applied in my objects because I can use the template string I can directly place whatever HTML I have so now the last thing that I would want is just change the values because obviously I don't want the hard-coded values we're gonna have a dollar sign then remember the item that we created the object that's holding all the values every time that's changing as we're clicking on a different item now we're gonna use that item so first we're gonna do item image since we're looking for the image then we're gonna look for a name so where's the name so here's the price and we should have somewhere a name so we have again I cannot find a name for some reason okay because it's sitting so sneakily over here so let's delete this and again let's use a dollar sign in this case let's do item and this would be the item name and the last one is gonna be the item price so again another sign and we're gonna be targeting the item and the price so now we have created this car item now the last thing that's left is to target the cart remember we have the card so the items are sitting within the card and then I would want to insert this in the card however we're not gonna do the append and the reason for that is notice I have the item I have the item and then I have the total so if we're going to use the method of appending the child then these items are going to be somewhere here in the bottom so instead we need to use the insert before so let's go back again and let's figure out what we have so we have the happiest and like I said we have the you know HTML now once we are done with inner HTML maybe let's do a comma where we have a select cart and now we would want to select the card so let's create a variable this is gonna be card document get element by ID the ID is gonna be the card then we're gonna have another variable with a name of total so we're gonna have Const total and here we'll then use a query selector document query selector and then the di the ID no not the ID the class is going to be card total container and I'm gonna show you in a second where I'm getting this from container and once I have selected like I said we're going to use the method of inserting before so I'm gonna use cart since we're selecting the cart then the method name is gonna be insert before so let's go down and let's use insert before I'm insert before is gonna use two parameters first is gonna be what item we would want to insert so we would want to insert the cart item and then we would want to say where we would want insert before we tried so here we're gonna use the total now let me save this and let me show you where I'm getting back to total and only if I'm gonna go down we have the cart item card and now notice we have the cart total so the point of this I want to insert before the cart or total so the card total is gonna be all the way in the bottom now maybe the last thing just show the customer that everything has happened correctly we're going to do add the alert obviously we could probably name something here better within the HTML it would be nicer if we would have some kind of element showing up over here but for the sake of this exercise let's just do alert and if some of you are annoyed by an alert you can obviously go ahead and create your own element or your enjoy and let's do item added to the cart so I'm just gonna use one of those alert boxes so if everything works correctly we're gonna go back we were gonna have items in our cart so let's go back let's refresh and let's scroll down so we're gonna have a sweet item now in the sweet item has the cart now once I click it something is wrong something is not working because I don't have my alert so again let's figure out where is the issue so either we're targeting something wrong or there is some kind of mistake somewhere so again let's check it out what we have in the console and let's check it out on the smaller screen because and here it says cart item class list is not a function so let's figure out where we have the issue so we have a cart item class list and this is not a function and here instead of class list we'll just need to have add so again my apologies we have the class list property and then I'm going to be using the method of ADD so we would want to add these classes over here and you see this is the nice thing about console and log so we know for sure what we're getting back because we can do all this code and then start scrambling for the answers where is an issue so again my apologies I should have added a method of that and then here the paradigm parameters are all the classes we're adding to the cart item so let's go back let's refresh and hopefully everything works fine this time so once I click it it says the item has been added to the cart again let's scroll down let's maybe do the sweets again let's click it and says that it's added to the cart now let's grow up and the moment of truth sure enough we have the sweet item which was 5 bucks and then we have the another sweet item which was 15 well that wee little bit suspicious so again maybe let's do a cake maybe let's do now the other cake maybe let's do a Dolman this time so now I have all these items so let's go up and everything is working fine so once we have figured out how to work within items there's one more thing that we would want and we won't want to display what is the total so the money total that we have and then we would want to display how many items so let's go back again to our app is let's scroll down and after dealer let's call this function let's say that this functions name is gonna be show totals however I'm not gonna write this function right now I'm not gonna write it within this event listener so here we'll just gonna call this function once we have added the items how are we gonna go all the way in the bottom so still within our immediately invoked function expression however all the way in the bottom so after the event listener and let's write the function so let's write that we would want add totals so show totals and let's maybe start very simple let's say that has a function then show totals unless just console.log and just for sure we know that everything is working because again we don't want to spend another 10 minutes writing something and then scrambling for the answers so hello and once we save it if everything is correct we should have a console log of hello so once we open it up and it says the alert you've seen the alert runs we're adding items in the cart and here would meet hello so now we know that we have the function so now we just need to figure out the functionality of the function then let's start first by creating an array that's gonna hold the total of my hours and how we're gonna do this well we're gonna set up again a query selector all so I'm gonna be looking for all these prices you notice I have the price price and all these prices now we will gonna be still counting whatever we hard-coded Oriya because this just makes sense now obviously if you want you can just go ahead and delete them for now since you already have all the items you have all the structure and everything but we're all gonna be still counting them so each and every time we're gonna be still counting them now we're not going to count as we refresh the page because we haven't set up anything in a local storage but as we add the item we will going to be getting the correct total and the way we're going to do this we're going to create an empty array then we're going to select all these prices and then we're going to loop through them and then we're going to add them to an array and then we're going to use the reduce function to get one value and then we're gonna do the same thing for this value so let's go back again and let's like I said first create an empty array so Const total now this is gonna be empty here but it's gonna be an array then let's look 40 items so the items and the items like I said is gonna be document then here we're gonna be looking for a query select all since there's gonna be more than one we know that we might be getting I don't know 20 values and the class name is gonna be card item price now again let me show you where we're getting back and let me make sure that I have the dot so that way I know that everything is working so let's save this let's look at index.html notice we have the ID of card item price and the class notice this is the item and here this will be the price so we're using the query selector oh to get all the prices so let's go back to the objects now once I have the items then I would want to loop through them so items for each so as I'm looping in the callback function we're gonna write what we would want to do with each and every item so the item is gonna be passed as a parameter and now we're gonna say total so the array that we have and we can use the push method and we can add the item text content and while we're getting the text content because the text content is gonna be holding the value know R so this is the hard-coded value as we're inserting them with our own JavaScript this is they happening dynamically so I cannot show you right now you can just see it here so this is what we're looking for now let's go back but the problem is that this is a text value whatever we're getting back from text one content is going to be the string so we also would need to use a method of parse flow which is gonna take a string and set it as a math operation basically it's gonna set it as a number now first let's do text item text content that we're getting back on and let's just count so log it just so you can see that what I'm saying makes sense so log and let's do total just so we can see what we have in a total so once I'm gonna refresh it in full scroll down and once again click on the item we're gonna say you see we have 1099 299 so hard coded values and the value that we add but you notice we have a quotation marks so it is a string so now let's do a parsed flow so that way we're making sure that this is gonna be the number so parse and float and since this is a method we're gonna add this item context content in the parenthesis and now in our case if we're gonna scroll down again we're gonna look for the value I'm gonna click it again we're going to add it and now we have the numbers so this is what we want so everything is working correctly now here we can again maybe comment out a total and let's keep on working now let's get a total money so let's do a connoisseur new variable total money now for the total money this is gonna be equal to a total so the name of our array and we're gonna have it as a total reduce and we're gonna use the reduced function now for tea I'm sorry method so for the reduced method we are looking for a callback function this is gonna be called however the reduce method callback function requires two parameters so the first one is gonna be the total or accumulator and the second one is gonna be the current or in our case is gonna be the item so the total is gonna be what we are returning at the end of the reduce and the item is each and every item as we're looping through because even though this is a reduce we're still looping through all the items that we have in total so let's go back and let's just add a curly braces and remember that with a reduce we need to have an initial value so since I'm going to be using numbers set it as a zero now what we're going to write in a code block well first we always need to remember that we need to return the total otherwise we're not gonna get our accumulated value and once we have returned a total knowledge is do what we're doing each and every time as we're looping through well it's gonna be very simple we're gonna say total so total whatever we have and just plus equals so we're adding we're not rewriting each time and then we're just gonna say item and then once we have the total money again we can just find out what is happening so in our case let's do a console log and let's call this total money since this is a name of our very move and notice that something's wrong I have one one I not money so let's save this and if everything is working correctly let's add one value and let's add another value I'm getting the totals however there is an issue you notice we're using the floats and using floats is nice we could have used the parson integer and then we wouldn't get these however let's imagine that whatever store will going to be using they were all going to be using some kind of sense not every store is gonna have the numbers so we could have used the parse int instead of float but it is better for using the flow I purposely use the phone and we need to fix this somehow we don't want to show in a card these kind of ridiculous numbers and the way we do that and again we're gonna do the new variable so counts final money and we're gonna set it equal to a total money so the variable that we have right now and we're gonna use another method and the method is gonna be two fixed now for the fixed we need to pass the parameter so how many numbers after the dot in my case I'm gonna use two and then we just can do instead of total money let's have it as a final money save this and now let's add again a few items over here let's add one to the cart and notice I have 30 198 instead of these ridiculous ten numbers behind the knot and now we have 36 so everything is working now the last thing what's left just insert these values so if we're gonna go back what I'm trying it to do is insert the value over here in the total and insert the value on the top and we're also going to use the items and here this is gonna be very simple who's gonna get the length of an array so who's gonna see how many items we have and then these would be D items there's our display now let's go back and let's just target these and then once we have target in them we just would want to insert the final money so here it's gonna be very simple let's do a document and there's gonna be documented by ID document query selector and another ID so that's last thing document get element by ID I'm looking for the cart total and I'm gonna show you all these values right now I just type them first and then we're gonna see where they're at so text content is gonna be equal to a final money so the final money I want to show like I said we'll get a copy and paste this because a lot of things are gonna be the same then we can do the item count so this is gonna be another ID and we're looking for and here the text content volge is gonna use like I said the array length so if we want to show how many items we have the only thing we need to show we we know that we have the array that's holding all the values so let's do total length since I know that this is going to be referencing how many items I have dinner right and last thing the final money text content however here we're gonna be looking for item total so the class of item total and since I'm using the class I would need to change this to query selector and now let's go in the index.html I'm gonna show you where I'm getting all this admit your show let me just fix this query so out there let's save this now if we're gonna go back to index.html now first things first let's scroll down to a total so car total so what I'm looking for you notice I have a clear card and check out however the cart total is the one that's holding the total so this is why an app GS we were targeting the element by ID of cart on now the second one is going to be where we go up and this is going to be the info so again we're gonna scroll somewhere this would be in the card we are too low notice we have the card info and then again we have the item total and like I said this would be in the class this why we have the class and therefore we're using the ID now let me see yeah item total I'm using the class so everything is correct however for the item count there has to be an ID so let me just check that it is an e so item count item yeah the ID is item count so now we know where we're getting all the values and the last thing is just to go and refresh and hopefully everything works fun like I said these are hard-coded values so obviously we would be probably putting 0 on 0 but I just wanted to put something like 2 items in 10 49 or whatever now let's scroll down and again let's maybe add like six items just so we know that everything is working correct another this guy another this guy and let's do another this guy now everything is working fine let's go up and sure enough we have the value of 56 do we have six items yes we do so one two three four five six and I'm now going to take my calculator out but I think that this should be a correct value if not obviously correct me

Channel: freeCodeCamp.org

Views: 138,189

Keywords: javascript tutorial for beginners, programming, javascript, javascript tutorial, javascript tutorial for beginners with examples, javascript for beginners, tutorial, javascript introduction, website, JavaScript (Programming Language), Programming Language (Literary Genre), javascript lesson, learn javascript, for beginners, javascript tutorial beginners, beginners, lesson, Web Design (Project), Web Development (Project), Web Developer (Job Title), coding addict, codingaddict

Id: q_TZhCWbS3I

Length: 54min 37sec (3277 seconds)

Published: Fri Dec 07 2018