Okay, I guess uh we can kind of start. So what I'll do first is I hope everyone has a Git hub. Um What we'll do is we'll download the project folder and I'll just tell you what exactly we will be doing. So before I share my screen, let me go ahead and give everyone this um get help folder and let me see everyone in meeting. Yes. Okay. Hopefully everyone got that link. You can download the folder from get hub and you don't need to necessarily use command line or you don't need to use uh the Git hub desktop app. If that's what you're using, the way to do it is to go to get a job and basically where it says code um just download the zip file. Hopefully that makes sense to everyone. Is anyone who's confused? So you can always ask questions. It's an informal session if you're feeling kind of overwhelmed or whatever. Ah you want to interject. Go ahead. So um what kind of code editor are people using? So I've got adam, right, I've got Adam's lime and this code, so if there's anyone who has a preference for, I mean um Editor, just let me know um I do tend to do a lot of unity stuff in my visual studio code, but I'm just setting things up. But um let's start soon. Mhm. Has everyone downloaded the folder? Yeah. Okay, so once you download it, just open it up in your court. Editor of choice and it seems like I have it here. So I need to just put it in my folder. Okay. There you go. So okay, zoom and I'm just going to share my screen as well now. So share screen adam. Okay. You can use any quote editor. It really doesn't matter. We're not using any frameworks or libraries except for the bootstrap framework, which is front and responsive framework. I've tried to make it so that we're not depending on javascript frameworks. The idea is that javascript frameworks evolve and change a lot. So right now react as popular view is popular. You know, angular was really popular. Swelters coming up. Javascript frameworks are always gonna be around front end frameworks because there's a lot of state management at the front end at a car delete from cart move from wishlist to cart um, you know, removed from wishlist. So we're trying to make it less crazy for ourselves in a way, I'll show you why because let me just share my screen. Hopefully everyone can see my screen. So if you open up index dot html in your browser, this is what it looks like. Excuse my design skills, but we've got nothing going on here. Um you know, it's just a, like someone said, you know, it's a single page application. So we've got three products. So I've got this um, crafter icons. Let's assume that we're selling digital products and we're not dealing with, we're not dealing with shipping right now. Any products. Okay, we're dealing with digital products and you're a single owner like you've got a small shop and you're not on Etsy Ebay any of that. Maybe you're just kind of sure, let me just give the guitar blink too. We have. Okay, thanks. And okay, so let's just suppose you're not on Etsy or whatever, you've got a small shop and you are selling stuff. The idea, I got this idea from assuming, let's say you're also learning marketing, okay. You're gonna have auctions, people are going to bid on some items. Um and these people are going to be geolocation near you so you can hold auctions in that case you just, you know, maybe you're just having a moving away say or whatever and people need to buy stuff and you need to sell them quickly, you have an auction and you just want to do it the least resistant way so fast. So instead of setting up Shopify and or Ebay and you know putting an auction there, you could have a single page shopping application like this. A single page application, have, you know, use your kind of S. C. O. Skills and marketed on facebook or whatever and just do your thing. So anyways, let's just have a user story to this application. So what's going to happen is that you'll be able to add stuff to the cart. Everything here on this web page is hard coded. So what I mean is that on this page, let's just go over the html before I start really before we go into the javascript. I'm not going to like write any html it's given to you but I'm just going over this static html. We have only the shopping cart is dynamically created or we can say inserted into the dom. Uh Nothing else is dynamic. Okay, so we have a header section and just to go over this again, we're using a bootstrap library if you do not have experience with the bootstrap framework, this front end framework, don't worry. What is important to know about bootstrap is that it uses utility classes to make your life easier. You want to make something responsive on a mobile phone? Well there's a class for that. You want to make your image responsive. That means it should scale up and down in relation to your devices um size the screen width, there's a class for that. So we've got a header section and then we've got a nav bar section, we've got an about section. We never touch any of these sections. We've got about this by button section here, we've got this painting picture section. Now this is the one to pay attention to. Maybe I'll just say product section. I think that is a nicer name. So this is the product section and this is what we are seeing on our web page here in the middle. So we've got these three about buttons. Okay, so we've got these products and what you need to notice from here is each of the three products has a button. Class button button outline a success. This is a bootstrap class which makes a green button by default for me. I never have to do CSS for this but I've extended the class name by adding this add to cart class. This is my own. You can think of this as first name given by bootstrap and certain basically whatever you want you could call your classes anything. It really doesn't matter. So if you've got the add to cart class for each of these items and you've got this um this notification thing here the notification is just a pop up that lets the user know. Hey you've added something to the card. That's it because the card is dynamically inserted towards the end of the page. So unless the user was cognizant enough to scroll down maybe they miss it. So that's why this uh notification thing is here. It's not really that big a deal. Another thing to notice is I've created the container for my shopping cart which does not exist as yet. No one has added any items. But what you should notice here is I've got an I. D. Card container and then another div nested within this card container. Div. Which has an I. D. Card call. That's it. So these are the 3 um the one class which is this one sorry uh This one that you need to know and these two I. D. S Okay that's it. You don't have to memorize. We can like come back to it. We've got some CSS stuff going here. You can change the CSS do whatever you want now what I've also done is in anticipation of yes so someone just wrote a message that is correct. Okay so in our CSS I've also created some styles in anticipation of the cart. So what color should be the remove button, be what color or what should be the width of the products which will be in the cart. You come back and add the stuff in your CSS after you actually do the job of script portion. Okay. Everything in your index. Html is done for you. I've linked the cart dot Js file basically everything is done. You don't have to do anything here. And with that being said, this is where we are going to be working. Has anyone done a bit of dom manipulation? Yeah. So one thing about a dom manipulation is it's the thing that makes you appreciate and like frameworks a bit more otherwise if you're doing react and you might say, my god, like why this big fuss over a button component, right? Uh you know, it kind of it's better I would say in my opinion to know about dom manipulation and then move on to a framework if you're attempting to do frameworks without dom manipulation. You might not appreciate why frameworks came up in the first place. Right? You might be single reactor is very popular in this market. I'm gonna learn react. Right? Um So knowing dom manipulation always is kind of nice. So everything we'll be doing is just javascript. There's no frameworks and the reason is because I want the S. P. A. The single page application really to have built those payment integrations, the payment components rather than focus on just the front end of frameworks. Okay, so the first thing we the first thing we do is and let me know if I'm going too fast for people, it would be nice if everyone types with me. Uh it'll make it less boring for you. Okay, so we're declaring if you public variables now public or I should say global, we have public and C Sharp fridge, I am currently doing with global variables, let's call them. Okay. Global variables are those variables which are declared outside of any local scope, which means blocks of code functions, They can be accessed by any of the functions and blocks in our code. So what are some of our but variables? Let's say let add to cart button Now, this one is an important one because this is the this out here, I'm referring to these three buttons. So now I'm getting a reference. Where did it go, yep, I'm getting a reference to these three buttons because those are the buttons which are adding stuff to the cart. Right? So I've got this card going on here. I need to grab a reference to these buttons because that's where the action begins. So out here I'm going to say add two button and I have to get this um I have to get these elements by class names. So document dot get elements by class name and if you remember the class name is out here add to cart. Okay so that's what I'm doing. So I'm saying AD two just notice the camel casing. I tend to use the camel casing more than any hyphens or underscores kind that kind of stuff. Okay now I'm also going to get my card containers so that's where the card is going to be dynamically created. And for this I have to get hit by I. D. So hey document object use your get element by ID. D. Method and they get element by ID method takes as an argument the I. D. Which is card container and this is out here. So this is what I'm getting. Now. I'm getting my card container and next I'll get my card call. So basically this is inside of here is where you're going to upend all your products which are added to the cart and you remove them as they are removed from the card out here. Okay so out here I'll say okay let card call is equal to and the reason why I've called it call is because it's column. So div class is equal to something uh That it was it column. No so it's a role but all these dips which are going to be added here, they're gonna have a class of column something. Uh huh. So that's just some reasoning. Um But like I said it's just in name so get element by I. D. And I'm getting element by I. D. My card call. Okay so these are my global variables for the dom references. Now I'm going to make another variable which is product product out here refers to any product which is going to just be added to the cart. It could be crafty crafters, icons and business melodies or whatever. Food mood icons. So product just refers to a single product. Now to manage the state of my uh card, I've got an object called card object. So cut object is a global variable which is going to be an object that has the following keys and values. So items are going to be an array of items. And let me say items, not items, items, not item items. Yeah and then I've got total which is the cart total. No this is the bare minimum. If you decide to build upon the project later on you could add shipping countries, you could add shipping rates, you could add discount codes which are hard coded. So you could dynamically create the codes but let's just suppose it's you know you're just hard coding but anything which has to do with a cart is going to be in this object. Okay. It maintains the state of the cart because remember front end is a lot about state management frameworks intend to make state management easier, That's their core intention. Okay so out here just to manage the state of the card, I've got a cart object. Okay so that's all for this part. Now we'll start the next part. Any questions so far? No questions. Okay you can always ask if you have questions or if you have a suggestion go for it. Okay so now we're gonna add an event listener two um add an event listener to all the card buttons. Okay I've got my reference to the add to cart button. I've got now kind of you know add an event listener. For example, I'm listening out for a click event on my desktop. Right? So when did the click event happen? So the event listener method. Again it's a dom method. We're using dom methods heavily dom A. P. I. Is um you know well documented, it's stable, they've got a ton of stuff, Media A P. I. S. And you can do a lot with just with vanilla javascript. Okay a lot. Anyways, so the event listener method. What it does is it listens out for an event in this case a click event which is associated with each add to cart button on the web page. So now the thing to notice out here is I've got three of these. Okay so I have to iterate through all of my um add to cart buttons and Single by single. Like one x 1 add something to them. The event listener methods. So I'm gonna say four you could use for each as well. I'm just using four so four let i is equal to zero. Hopefully everyone knows iteration. Is that fine? Is everyone comfortable with depression? Yeah so add to cart button and um one thing I wanna do out here is basically instead of typing this B B U T T E N O N. I'm just gonna say B. T N. I think this is a bit easier. So add two I is less than length of our buttons. I plus plus. And then out here I'm going to add this event listener method. And what it's gonna do is I'm gonna say well add to cart button at index dot I I want to use the add event listener method which is listening out for a ropes, click a function. Yeah sure go ahead the query selector. All I believe is in the newer specification. Yeah. And class name is the older one. You can use both. Yeah, there's no big difference now. Yeah, like you've got query selector and then query selector also query selector gets the first instance of that whatever class or idea, finding class. It has to be class because its first instance and then query selector all will get all of them which is so query selector all is like class. Okay, so I'm not using arrow functions here. I'm using the regular functions because I like the regular functions. I've also done a bit of back end and um you know it's kind of I like the I like my regular functions so you can use whichever one you want. And then what I'm gonna say is I'm going to say well let Britain is equal to add to cart button at index I Okay. And then now so inside of each of these event listener methods, what we've done is we have declared a local variable. Local variables cannot be accessed outside of your scope that encloses them. Okay, so we've added a local variable which is called button which references each add to cart button at the index I Okay, so we've got three buttons that means index 01 and two. Okay. And then we since we have a reference to this particular button at index I what we're going to do is we're going to pass it as an argument to a function which is called Kark. Okay so cart not card call but card function is going to take button as our as a parameter or argument if you will subtle difference between argument and parameter parameter is a placeholder for a real value which is passed into a function when that function is called parameters are passed into the function when it is declared. Okay, now I'm just gonna do alert here as well, you know why? Because sometimes we just want to know if what we're doing is even going like is even registering on the front end, it could be very small areas, you're opening like the wrong index file, like literally it could be things like that. So out here, you know this one? Yeah, so I'll care, I'm just going to real fresh and let's see, add. Okay, so out here you saw this alert which says hello? Right, so you can check that each button is being clicked like that. Um another way is you could alert, you could just alert your Britain or you could alert. I it doesn't matter. The reason why I'm doing this alert is just because I want to see always the is my click event or registering to each button, you can use console logs as well. It's a bit annoying. But anyways, I'm going to comment out this alert. Now, the main thing done here is I've got a click event registered to all my buttons. Okay. And I've passed each button at index I to a function which is called cart. Now what is the card button going to do? So what we're going to do first is I'm actually going to just declare function card. So you want to declare the function card. So function cart, like a soul and uh end of function we're doing a lot of um I'm just showing you kind of Dominic population kind of an insight into what is happening in state management and hopefully it will come together for you. So now that we've got the specific button clicked, okay, what we want to do is we want to get the parent of this button, What is the parent of this button? Well if we go to our H. T. M. L. And you see that the parent of this button is actually this diff class called small for right? All of these are the siblings off the dev parent, they're all nested inside of this deaf and all of these are the siblings of the button. Why do we need the parent of this button? Well if you think about it, what is gonna happen when you add to cart, when you add to the cart in your cart? If you've ever done online shopping, you'll know in your cart will display the name of the item you've added. Okay? The quantity that you've added, the price that you've added and maybe even a small placeholder pick right of the item that you've added. So the card is kind of just dynamically assembled from the parent of each button. Okay so back in our javascript, let's go back here. So I've got this function card and if you remember carter's gonna take an argument right? Because we passed in each button and it's an item. Right, so I'm just going to put item here. Yeah, go ahead. So if you have let's see the global variables are depending so the functions are depending on the global variables, right? So they should the global labels should always be added to the top. Yeah. And then the functions and the methods and anything else comes there because anyone who's reading through your code, it'll let them give them a reference of what's going to be accessible to the functions inside your code. What happens like out here just stays here. Right? But what happened? But all of the this stuff is shared. Yeah, so it's just convention to add the global variables right at the top because those are available to everything. They've got global scope. Right? Yeah, that's called global school. No problem. So remember that I added each each uh add to cart or cart button out here and I passed this as an program to the cart function. So I'm just calling it item here, you can call it button. But if you want to see what I'm doing, let's just alert item here. So remember this alert is commented out any alert that now shows it's going to be for this function. Okay, so back here and um rags there you go. So it's telling me that the that the argument that is passed to the card function is the html element. Okay, now we have to get the parent of our button. So how will we do that? Let parent is equal to item. So the britons right? Parent element. Okay, so we've gotten this apparent element by using this parent element dom property, which is going to return the parent element of some particular child element. In this case the child is the button, right? And whatever results we get from here, we've assigned to parent. Now, let's see what we get out here. Right? So let's alert uh parents. We've alerted item and now I'm going to alert parents. One other thing is I tend to put semicolons towards the end of my statements. Just it's uh just my habit, but the general kind of opinion is that if lines of koda's on a new statement, you don't necessarily need this