Javascript Project Tutorial: Budget App

and this project we're going to create a budget complication now this project is going to be special because we're going to be using classes instead of constructor functions so now let's look at what we're going to be creating in this application well as you notice we're gonna have a budget so whatever money we have then whatever expenses we are gonna accumulate and what would be the ending balance so let's say we have two forms one is going to be 40 expenses and the one that other one is going to be further about it if I try to insert let's say 5,000 and I'm gonna press submit or calculate I'm gonna have a budget and the balance because obviously there's no expenses yet now if I would want to change the budget and if I would say you know what I'm actually getting 2 grand more so instead I'm just gonna say that this is gonna be 7,000 you notice how automatically my budget is updated and so is my balance however if I'm trying to insert the value that's gonna be empty or negative I wonder so I'm gonna have feedback and it's gonna be complaining that it's not possible and if you notice the zero hasn't been passed to my budget or to my balance so once we set the budget next is gonna be the expense so what would be expense so let's say start with a fixed car so I'm just going to say that fix the car is gonna be 200 bucks so now I have the budget of 7 grand still 7,000 then expense is gonna be 200 and the balance is gonna be shown off 6,800 because we're gonna take into account of expenses of 200 now there's a couple of things that we can do first if we would want we can get rid of expense we can say you know what I don't need to fix the car it was a mistake the mechanic called and everything is fine so I remove and again my balance is gonna be 2a 7,000 because I removed my $200 expense but let's say that we have another rent so another expense and this would be a 2,000 so again we're adding the expense and you know just to show you that then everything is working fine we can have two of them and next month came along and we need to fix the car for 8,000 marks so again we are calculating whatever our expenses so in our case this is gonna be three thousand now our balance is only gonna be four thousand because we have spending three thousand dollars and you know what our landlord showed up and he said you know what buddy the rent is not gonna be two thousand is actually gonna be three thousand so now I can click Edit and I can say painfully did instead of three thousand I'm paying three thousand I'm sorry instead of two thousand and paying three thousand so I'm adding my expense and now my balance is even less because now my rent went up and I was able to edit it and now these are all my expenses and also another bad news came in my boss came in and he said you know what you're dreaming should getting seven grand instead of your let's say getting a two thousand five hundred he says I don't know what you were smoking but there's no way you're making that much money so I'm gonna press calculate and now my balance is actually negative so now I need to reach for credit cards or something because my budget is a low of two thousand five hundred or my expenses are way more now obviously we can add as many expenses as we want and we can set our budget our high or low we would want and depending on that either our balance is gonna be negative which is in this case or if our boss says you know what actually we had a huge investor and now her salary went up again so now we have a balance of six thousand so like I said before we're going to be using classes instead of constructor functions so that's gonna be really really interesting and like I said yeah enough of me talking and let's start working on a project 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 now hopefully you downloaded a set up folder and you are as eager as I am working on this project so whenever we have a download folder or setup folder available we can just open it up and we can notice what we have regarding the HTML and CSS now there's not gonna be any functionality so doesn't matter what I'm pressing you notice that I'm just gonna be submitting the empty and I can just add expense nothing is happening and also there's no feedback so I can click everything but nothing is happening so now this is our job to add JavaScript to this HTML and CSS so then I have a working app so in this case we can just maybe close it because we really don't need it and let's open up this folder in our favorite texture now as always probably for the 45th time you're already hearing me saying that my favorite editor is gonna be Visual Studio code however you can use whatever editor you would want now I'm already skipping a little bit ahead notice we have the index.html where we're gonna have the forms and we're gonna have our list and we'll have two types of form this time now in the main CSS this is where all classes are and notice that we were just selecting styles so I'm just using a main styles and just applying them as a classes and then we'll also have the app J's now because this is a bigger project you notice that there's quite a few things that I are already right away added to the app chairs now let me go over this just to make some clarifications well first things first prior to this project we have been setting up a constructor function that was responsible for all or instances so in this case if we would want to have a constructor function for the UI we created a constructor function and then we added all the properties to a prototype and if we had some other constructor function and if you would want to add some time of properties in there we added in a parameter and then we set it equal to this so this ID was equal to ID and here we passed the ID now like I said this project is gonna be different because we were gonna make use of the es6 and we have the class syntax now the class syntax is with a class keyword first so we need to have a class keyword then we would need to have the name of the class and then this would be curly braces so now again we would use a variable we're gonna set it equal to a new UI you new UI class instance and then we would be getting the instance of this class whenever we have class we also have an option of having a constructor method that's gonna run every time we're going to instantiate the class and we have two options we can either pass the parameters again let's say that we would say ID so every time we would be passing this ID and we would say this ID so for every instance obviously this ID would be different we'll just set it equal to ID or in our case we're going to be using this constructor and we're gonna preset the properties so I already know that I'm gonna have property of this budget feedback and I'm just gonna use a document query selector and I'm just gonna set a budget feedback or expense feedback and this is what I skipped so I skipped all these selections because by now we for sure should have a good handle of selecting something so I don't think that we need to write this for let's say twenty minutes because this should make all sense to us and obviously as I'm working we will going to be switching back to HTML maybe just to show you where exactly I'm getting this but we already should have a good handle of this where we have the form so if I have for my obviously have the ID of budget form so this is the form that I'm talking about then the budget input the budget amount so the input would be the input field the amount is what I'm getting at so the budget amount would be here and so forth and so on now after that since we have the construction constructor that we run every time we instantiate the class this is gonna be added to our instance and basically what we're gonna do is we're gonna set up a methods on this class and we're going to use this instance and we're going to run the methods and most of our work we're gonna be doing in the class in fact we were gonna be just adding these methods to our event listener function and then world's gonna be calling this function once the Dom loads so let's do that first because later on only thing we're gonna be doing is creating methods and was going to be making use of the fact that we have access to these variables I'm sorry do this properly so this budget feedback we can right away grab it so we will going to be working with a function and we're just gonna grab this let's say variable or not variable the property we're gonna grab this property and we're gonna make use of the property so like I said there's gonna be two more things outside of this class now the first one is gonna be the function of event listeners event listeners listen nurse and we would want to run this function as the Dom content loads so let's make that other thing that I was talking about and we will just say document hey add event listener now we're gonna be listening for a Dom content loaded and once this event fires we're gonna have a callback function and within this callback function we would run we would want to run this event listeners function so this is gonna be very straightforward and once within this event listeners we would need to create a new instance of this UI class and then like I said was gonna be listening for a three events in this event listener and everything else we're going to be doing within the class so first let's select three things in the event listeners function because we will still gonna make use of that because we're gonna be listening for those demands and let's make a new instance of this UI class so first things first let's get a budget form and we're gonna set this into our variable budget form and again we're gonna do this by ID get document get element by ID and we're gonna be listening or looking for a budget form ID now the budget form ID is the one with a green border and also we would want the expense form so this wouldn't be in this form and here our slope we're just gonna change this around a little bit this is not gonna be budget form this is gonna be expense form and the last one is going to be expense list we're gonna have a title and the expense value so again let me copy and paste this this is gonna be expense whist so here let me delete the form and also let me delete the list so here this would be a list so we're gonna have budget forum expense form an expense list so these are gonna be my three variables that I'm gonna hold the elements that I'm getting back from the Dom then let's create a new instance of the UI class so instance of UI class and if we would want to create an instance we do the same thing as we're doing with a constructor function so const UI and this would be new UI and like i said before if we would be passing something in a constructor since we're running this constructor every time we instantiate the class we would pass it over here like I did an example with an ID so obviously for each in every instance the idea would be that these properties would be different well since I only have one instance and I just want these properties that would hold these Dom values on I can just place them in a constructor without passing any parameters so now sure enough I'm gonna have access to all these properties and more important and that is properties to the methods that we're going to be creating here in the event listeners and just be careful though whenever you're working with the function constructor you can place it anywhere I mean I can go hundred lines down and I can still have a constructor function and because it is a function this is gonna be available to me anywhere in document but since this is gonna be as a variable then be careful because you need to make sure that you declare it first and then you're making use of it so if I'm gonna use this if I'm gonna move this class you are somewhere down over here you're not gonna have access to it so just be careful and then once we have the new instance of UI like I said we would want to add three event listeners one is going to be for the budget form the other one is going to be expensed form and then gonna have expense list so let's do a budget budget forms submit submit and then maybe let's just create this budget form submit so budget form submit and add eventlistener so we're gonna be listening for a submit event and then this is gonna be a callback function now for now we're just gonna be passing the event and we'll just gonna ignore everything because we don't really care we haven't created these methods yet so only thing I want to do is just set up the bones and so basically the structure of my event listeners function and then once we're going to have the methods available then we can start passing them because otherwise this is not gonna make sense so this would be the expense form and the third one is gonna be expense expense list how are the expense list we're not listening for a submit we're actually looking for a click so click because we're going to be attaching these events to expenses that we're adding whether this is gonna be a deleting or editing or something like this so this would be not a budget form the second one this would be an expense form and I'm assuming that you already have watched quite a few projects already with me or done some quite a few projects with me so since this is already last project on a object so I'm assuming you have watched quite a few of them so I'm gonna be skipping few things ahead so this is not like three hours long so then let's do expense list so we're adding a click event instead of submit so we'll have to submit events and then we'll have one click event now why I'm passing for the first two the event object because we know with the forum this is gonna be automatically submitting and we would want to prevent that so you would want to prevent default so event prevent default and we would run a we would want to run this for method from the event object and this way this is not gonna be resubmitting every time because we're preventing the default so we're done with our structure so now I'm glad that we can start working in our UI class of creating the methods now the first method and we're gonna be creating is when we are submitting the form I would want to make sure that the value is not 0 or less than 0 and if everything is fine I would want to show the balance and I would also want to show the budget amount so let's go ahead and let's start working now within the classes and es6 we can skip right now any kind of function let's say declarations so we can do only a comment if you would want to submit budget method and we can just write the name of the method that we're going to be creating so submit budget form so this is gonna be the method that we're going to be creating and that's all we have to do so now we have the method and just to show you that everything is working so we have a submit budget form now let's do console.log and hello from es6 since now we're using here 6 and let's go to budget form submit event and let's run this we have the instance of UI and sure enough we have what we have submit budget form and the only thing we need to do is just run this method so as you can see a lot of things are the same however this just makes a way more cleaner code since we don't have to deal with the prototypes we just have class constructor that has all the properties and now we can start creating the methods so once we save it let's open up the google developer tools because this is where we're gonna be spending the last norm sorry next 10 hours I'm kidding hopefully I'm kidding and here let's do calculate since the only thing we have to do is submit the form and we have hello from a6 and as you notice nothing is rushing because we prevented the default behavior so so far so good now this is great now we have the submit budget form method then we can start warden the first thing I would want to get the value where I'm getting the value is from the budget input because this input of the form has the idea of budget input and I already have assigned it to this again properly now again with the first one we're gonna go back and we're going to look at index.html later on I'm just gonna assume that if you have issues then just go back to index.html and you can find it now you can press command F if you want to find it faster so let's say I'm looking for a budget input I can just write budget budget and the name would be input here so now let's say that we have no values because probably I misspelled it or something so we have budget this would be the name and this would be the input so a budget input and yes or no because this was a class that I was selecting I'm sorry yeah my property was with a capital letter because I cannot use dashes and then if I'm looking for the ID then I need to use the dashes so therefore if you're confused about something that you're getting on you can use the command F or make sure that you're not typing like this with my input but I was looking for instead of type of dashes and everything is gonna be fine so what you're getting back from is this form group that is within the budget form and then this would be the input so basically this is the money that we're adding so let's go back to app Jess and first I would want to get the value so Const value is gonna be equal to this now since I have again access to the property I'm using this and now the name of this would be budget input the one that I was trying to find with my command F with a fine and here let's just get a value so what I'm going to be devour now since we have done this quite a few times I'm not gonna console.log it we can just do right away value and we can just check what the value is gonna be empty or so here this would be the owner/operator the value is gonna be less than zero so let's do less than zero now if this is the case then again we have access to a feedback the feedback is gonna be showing I believe somewhere here I mean again I don't want to go back to index.html because we can spend whole day like this so basically we have the feedback that I have selected and I have access to this feedback so let's do this budget feedback now let's again use the classlist now with the classlist we have an option of add or remove or I believe it was contained now in this case we just want to add show item because like with other projects all we did is we created this budget feedback I gave it in the main CSS of budget feedback and expense feedback display of none and now I would want to add this show item so this would be the show of block so this is all we're doing we're just dynamically adding this so let's do add show of meinem and also let's add some text inside here so let's say this budget feedback again the same property then let's add as an inner HTML and since we're using the inner HTML we can pass the HTML tags and for this we'll using the template literals so backticks and then we can just write that we would want to pass the paragraph and the paragraph would contain value cannot be empty or negative so pretty standard what we have been writing before so negative then we can close the paragraph and again we were able to do this because we were using the inner HTML you wouldn't be able to do this with the text content because then it's gonna well you would be able to do it but this is gonna show the actual tags and this is not what you would want to do so so far so good let's test it out what we have now as I'm submitting the form I'm purposely gonna put 0 and now my feedback is gonna be shown so now we selected the feedback and we added the class of Shore now obviously again like the previous project we would want to hide it after 3 seconds 4 seconds 10 seconds I mean I would want to hide it now you could leave it it's not a big deal but I just always like to work with a bunch of functions in the project just so you get to know them and I would want to hide it I mean long story short let's just hide now how we're gonna hide this we're gonna use again the set timeout and we're gonna have a set time oh now this is gonna be a function now this function is gonna require a whole back function and this would be the coal-black function it'll pass again and then the second parameter is gonna be how long this in how long this function is gonna run so again let's do 4000 seconds and now let's do a this now we know that we have the access to a budget feedback classlist so budget budget feedback and let's do class list and remove so here we added this class to a feedback now we would want to remove the class so the moment we're gonna remove the class what's gonna happen well we're gonna go back to the default and what was the default default was a display of none so let's remove class and the class is gonna be the same off shell volume and I want to let you know right away if everything is correctly this shouldn't work but let's just test it out so once we run it now once again I want to test with the zero value so now I run it and interesting I have the value cannot be empty and after four seconds I have some kind of error well I mean everything is correct correct I don't know why I'm saying two times correct but everything is correct so we have this budget feedback class list I mean we had the Naxos literally one line up now what is the issue why we kind of access this and again the same thing like we had with a constructor function we can make a great use of this but we always need to be aware of it what is actually pointing to so if you have been watching the previous tutorials or projects you know that there is an issue where at this moment this is pointing to a global window object and it's looking for the method on this I'm sorry for the property on this global window object and it's trying to add the class list and it's saying that it's it cannot read this property because there's no such thing there's no property on this global object because obviously the property is on this UI so again we need to make sure that as we're running this function within this method now within this method still this is pointing back to the class everything is correct however since we're running this function within this method now this is not pointing anymore back to a class it's pointing to a global object so again we need to do something with a self or you can name this really whatever you would want so basically what you would do you would say Const and again I'm gonna use self but you can write whatever variable is one and I'm gonna set this equal to this so now I'm grabbing the value of this that is gonna be pointing back to the class and just to show you let's do a log and let's do this so in this case let me show you what is this pointing to now let's also have a look at what happens within this function where this is pointing to just so you don't think that I'm I don't know making this stuff up and let's also console.log this so if everything is correct we should have this that's pointing back to our class then we can have this to the global object and then self is again gonna be pointing back to a class so let's check it out again an empty value and sure enough we have few things we have the UI so this would be the UI now the second one is gonna be what now the second one is gonna be div over here and then we have the third one that's basically not going to make sense so we have a div expense feedback alert and then we're gonna have a on call type error can't read properly off now so obviously this wasn't working as we expected even though we had the UI of feedback now this wasn't pointing to a correct way now obviously I kind of run these actually because they I have run this after I called already this budget feedback so this is not gonna make sense let me fix this this is why we cannot see anything my apologies because you notice the error runs and so we're not able to see this so let's do this one more time let's calculate and let's see it's more interesting what we have in so long so we're gonna have a budget feedback so I'm gonna have you I this will be our first this then we're gonna have the budget input and sure enough after four seconds now we have the window notice this is the window object that I was talking about so this is why we're trying to access it in we cannot and next again we have the UI so like I said we have the UI then we have the window object and then we have the UI and again I'm spending probably way more time than I should but I find it really really important whenever you're working with a Java Script to understand what is this because this is really helpful but you need to know where it is pointing to so anyway long story short we need to change this so instead of this we're just gonna use self so now we're reassigning this so now in this case everything is gonna be working fine and in four seconds we're gonna remove it so again let's go up let's say then this is gonna be empty value now this is gonna console.log this and over here you can see that seffle I mean this is not what I wanted I mean keep on making mistakes but that's great calculate again trying to add negative value and in 4 seconds this is gonna be gone because everything is working fine now after we have removed the feedback now there's two more things that I would want to do first I would want to grab the value that I'm placing in the forum and add it to the budget and also I would want to remove and make this value empty because obviously I would wanna later on maybe pass some on their value so I don't want the value to stay there and the third one is gonna be show balance and this is we're all gonna be doing a little bit of calculation so we're gonna call another method that we're gonna create in UI class and like I said most of the work is gonna be in UI class so I know that maybe this is gonna be frustrating for somebody but we I mean most of the work here is just gonna be passing one or the other method now here we have one method but then we're gonna keep on adding other methods from the same class within this submit budget form method because again I find it important to understand how we are working with a keyword of this so here let's do a first budget amount and what is budget amount I'm selecting budget amount get element by ID this would be the amount over here so budget amount then let's have it as a text content and we're just gonna pass the value so if there is some kind of value I'm gonna pass it here it's as simple as it gets if the value is gonna be 0 or less than 0 then I would want to show them or tell the person tell the user that they need to fix something if the value is there the rate we're just gonna pass the value after that I also like I said I would want to remove whatever I have the in the input so for this we have a budget input property now this is also gonna have a value since we're selecting the Dom element and this down element has a property of value since this is a form in it this is important so the forms have the value and we're gonna set it equal to zero and the last one we're gonna call this and show balance and again for now I'm not gonna write anything in this function I'm just gonna call the function and we're gonna do what we did before what's gonna write console.log now in this case I have this and this is not inside some kind of other function that we're running here so everything is fine this keyword now is gonna be again pointing back to a class so now in this case I can use this show balance this natural balance because I know that I'm gonna be creating another method now the method is gonna be well surprise surprise show balance so now I have access to it so now again like I said we don't need to use any kind of a function key word screen we can just write show balance and for now we're gonna do very simple again console.log I'm going to do hey I am really or I don't know why I'm doing this we can just do a backticks so template literals hey I'm getting a hold of this keyword well I mean this keyboard yeah this keyword and once I said hopefully I don't make like 10000 mistakes with this keyboard otherwise this is gonna sound very cocky and you know what let me just comment out this now keep it for your reference and always if you have any questions about this one of the best ways is just to console.log everything out so let's add some value since we have tested already quite a few times with zeros calculate 4000 and now sure enough I'm running the method so so far so good now we need to create the method of show balance right correct because the first thing that we did was just call the methods and now we need to write something within this method okay first things first now we have the method of show balance however like I said this method is gonna be interesting because from this method we're gonna call another method so we're gonna have const and here we're gonna write expense now here basically all I'm trying to do is calculate the expenses and I'm gonna create a method that's gonna do this for me so we're gonna have total total and expense as you notice I'm not selecting the properties that I had on my constructor I'm not doing that I'm actually selecting a method again with this the same as here however again we haven't created the method so here let's do a this total expense or to be more correct we can just do comment of total expense and let's write it this is gonna be total expense and this is gonna be our method now again we can do a console log just to check that everything's working but I think that after a few times of doing that this is becoming a redundant so we know that we're gonna have access to it and the way we're gonna have access to it that we're gonna add this to the value so basically this method is gonna calculate everything that we have in a list now obviously in our list we have nothing right now so right now we're gonna be working a little bit in the dark so we're gonna be writing a function that in maybe right now it's not gonna make sense but the moment we're gonna be starting adding the values this is gonna make way more sense than we think right now and here the basic idea behind this method is I would want to run through I would want to calculate whatever items I have over here and once I calculate the items I would just want to return them so let's do very simple let's do let and we'll just gonna call this total again and we're gonna be using this later on and let's just set it I don't know to 400 something like this so we always have this value let's do very simple return off total now again like I said later on once we're gonna have the actual values we will gonna make this functionality where this is gonna make way more sense but for now I don't see the point of going through if there is no values really I mean it just kind of it doesn't really make sense so let's have this and now we know that this expense should have 400 because we have total expense and we're just returning Dietl so good enough we have a hard-coded value of 400 now next we're gonna be working with a total so we're gonna have const tomorrow no this is gonna be the variable now here i would want to parse int so I'm gonna use this method that I have with parse integer and the reason for that is because I would want to grab the value that's gonna be in the budget so whatever value has been passed in the budget and I can remember important thing I'm only running this after I have added already in the budget now this is another stumbling point now we need to only call this callback whenever already there's some value otherwise this is not gonna make sense you cannot get some value back from the Dom element if there's nothing there if you're just running this function right away as the document content loads so we need a parse integer now here again we're gonna use the properties we have and we'll have a budget amount text content so only thing I'm doing here here I'm passing the value so here I'm saying this budget amount text content value is equal to this value and then I'm getting it back so basically when this show balance I'm getting it back now we could have set it up that I'm passing it as a parameter or let's say your argument I mean we could have done a lot of things so I just chose to do it this way and again don't judge me for this everybody can do however they want so here let's do an expense now what is an expense now like I said later on like Spence is gonna make sense because we're gonna be calculating all the values for now all we're doing is just returning to 400 since we're getting back this from the method and now let's do a this balance amount text content is gonna be the total because as you notice I have the expression where I have the budget amount is gonna be subtracted from the expense and now I just want to show it so whatever value I have in the balance so this balance amount again this is a property that holds the Dom element with a budget amount and let's do a text content this is gonna be equal to total so very simple we just grab the expense that we're gonna calculate later but for now we have 400 then we grab the budget amount but since we're taking a text input then when I'm sorry a text input text content I want to run it through the parse integer so I want to get the integer and then I would want to get whatever total I have and now since I have the total I use this balance amount text content and again this would be a balanced amount so balanced amount over here and I would just want to check if this value is gonna be less than 0 then we're going to show it with a class of read so we're gonna add a red color and then else if it's bigger than 0 then we're gonna be green and then last one here is gonna be if it's equal to 0 then I'm moving a half a 0 so let's write if and total so now we're looking for a total if total is less than 0 so what we should do so we have a dis balance and classlist again we first can find a class list and then we're gonna find what do we have in the CSS so we're gonna remove show of green because that I want to continuously keep on adding two classes so basic idea is since this is going to be changing we can have more expenses or we can have a bigger budget they're smaller but I don't want to keep on adding and adding and adding classes so every time I'm adding the class I want to make sure that I'm removing the other classes that I'm gonna be adding hopefully this makes sense and here we have this balance and again this is gonna be balance class list and again instead of removing now we would want to add read so whenever it is below zero we would want to add a color override but we would want to remove the show green of show black if it was there before because obviously we made it this can always change now two things the balance is again the easiest thing is going to be finding balance balance now where we have the balance the balance is gonna be here so we have the expenses this will be zero and then we have a heading six of balance then the balance icon and the actual class of balance is gonna be where we have the dollar sign so this is what's gonna be turning red or green or something like this so this is what we have now after that in the main CSS classes are very straightforward so red is gonna be red green is gonna be green so black I mean we can guess isn't gonna be blue no it's gonna be black so let's go back to app is and let's figure out so we have if the total is less than zero so now we have very easy task so we can just grab this and we can just copy in first time here we're gonna say else if and if the total is bigger than zero then we would want to do the opposite we would want to remove show red and show black and instead we would want to show green and after that we have wonder where this is gonna be equal to zero and I don't know why but I looks like a copied two times hopefully I don't know I'm not just having some kind of an when I say heart attack but some kind of brain freeze or something where's no show red show green so with the zero we would want to add name black one shown black and we would want to remove what we would want to remove shall read and show green again whenever a class we're adding the other twos we would want to remove so this would be the show balanced no like I said later on we're gonna still work on a total expense so this would be the case right now so let's save it and let's figure out what we have so for now there's not gonna be an expenses so this should be all green calculate and sure enough we have everything green over now if I'm gonna have the adding on expenses this if everything is working correctly this should be black and I mean we can just check it out with a black one this should be black with zero and this is black so I think that everything is gonna be working fine now as we have the show of balance now everything is working fine with a submitting of the form now the next one is gonna be really interesting because then we're going to be working with an expenses and this is gonna be well let's just put it this way there's gonna be a little bit more code than this so let's start in our event listener since this was a submit budget form and the next one won't be the expense now for the expense form again the method name is not going to be very original submit and I'm not gonna say budget I'm gonna say expense because this is gonna be the most original problem method name ever now here I have the submit expense to form and now we can save it and obviously we need to go back and now it's saying that there is a well no it's actually saying that there's no lots no slope and that's no slow Network and it doesn't really matter to us or locally but now we had what we had a submit budget form now we need a submit of expense form because this is gonna be way more interesting so after a show balance and we can just maybe leave this total expense all the way in the bottom we can do a submit submit sub expense form so this is gonna be our comment now within this method of submit expense we were going to be selecting few properties and we're gonna be creating the variables so first is gonna be const expensed how you know expense value is gonna be very similar to what we had in a budget now the difference is this is not gonna be budget input it's gonna be expensive but we have expense input in an amount in one so whatever the actual expenses and whatever the amount for that expenses so this not expense input and again I suggest if you or have confusion where we're getting this you can use the command find and you can just find the class that we're searching for Const amount value so amount value and this is gonna be equal to a input amount so amount input and again we're gonna use value and again since these are forms we can use this property value to get back to value now we really don't care what we're gonna become so logging if you really want we can console.log the amount value but this should be straightforward what we're getting back and again this is gonna be very similar to what we had before so we're gonna be checking for three things this time so it's if expense value isn't gonna be 0 so if you're passing something that well passing with no name then we're gonna have or so in this case we're gonna say amount value so amount value and in this case we're gonna say this is equal to 0 and last one is gonna be if the amount is less than 0 because these both of them are type number so we can also put 0 but less than 0 but this wouldn't make sense if we're trying to actually setup our budget so again or operator and amount value is gonna be equal to less then 0 so if any of them are true since we're using the or operator again we would need to work with this feedback we would need to add the feedback so this in this case this is not gonna be budget feedback this is any expense for you back and again this is set up in properties of our constructor so let's go down and an expense feedback let's do the same thing we had before class list now again we're gonna first show the item and then we're gonna add some text in there so let's do show item and again the setup was exactly the same like we had with a budget feedback where the initial was a display of none and now we're just gonna show the item so let's save this and still it's gonna be complaining about some slow Network and then we'll have expense feed by a class list now after that I would want to work with a innerhtml so this expense feedback inner HTML and then let's look at a template let's roll since we can use the inner inner HTML and we're doing the same thing that we had before so we have paragraph values cannot be empty or negative so this is going to be passing and then since we're using template literals we can just write whatever tags we would want over here and again since we're doing the same thing as before we need to reassign so have Const self and this is gonna be equal to this because we're gonna be calling the same thing we're gonna have a set timeout function and this okay I keep repeating this function is going expect a callback function now this callback function is going to be run after specific amount of time which is a second parameter again in our case 4,000 milliseconds which is 4 seconds and since we already have covered the self and expense feedback again we're still accessing the class or the instance of the class and we have a class list and now in this case we would want to remove so remove what we would remove well it's simple enough we would want to remove the show item so as we save this everything should be more than fine and we're gonna have where we can just test it out you know what let's do a first fix a car and that expense and sure enough we have a values can it be empty or negative even though if only one of them so you can already guess if both of them are gonna be negative then we're gonna have the same thing now after that let's do you know what let's do just the second one so let's say that or let's try you know what let's try adding a negative value so you'll fix a car and still we have the values can it be empty or negative so basically this is all we're doing we're just checking for the values now this was a first code block for Eve so this was if now we need to else because obviously there's gonna be cases more hopefully most times there's gonna be cases where all the values are there so let's do another variable this is gonna be ml now we are getting back the amount value now on the amount value we were getting back is against string so we need to use again parse integer so we need to convert it otherwise this is not gonna make sense so we're gonna have amount value and we're using the parse integer so now this variable is gonna hold whatever amount we're passing in however this is gonna be turned into number not like we had before as a string so here let's say this and this would be an expense value now the expense input sorry not expensive how you and we're just set it setting again equal to a empty values so if everything is fine we added an expense I would just want to delete the field so the leads the field should be empty and again I have the access to the properties because of a constructor and then this would be expense out input then I have the amount input so I have expense input and amount input and they were going to be cleared once everything works fine then I also want to set up first a object and we're going to create an object and then we're going to pass the object right here notice we have a item list which is the array that we have so I'm going to create a object that's gonna contain the value of expense and the amount expense and also I'm gonna grab the ID and I'm gonna add a 1 to ID and before that I'm just gonna add it to a item list so we're going to do a incrementation of ID so first let's create an object of let expense so this is gonna be our expense and this is gonna be an object now ID is gonna be equal to what well this dot item ID now we're we're getting back the ID I'm gonna scroll up this is gonna be our item ID so this is where we're getting daddy now second is gonna be what this is gonna be title title is gonna be equal to expense value so expense value is gonna be here we have access to it so expense value and here we have the expense well now for the amount I would want to grab the amount not the amount value because remember now this is a number so amount this is gonna be equal to month and just a quick note technically with es6 we could have just skipped this if the both names are the same we don't need to add property name and the value if they both match we can just skip it and just say amount since we have the access for this amount just that's just a side note and here we'll do a this item ID like I said we would wanna increment and this is gonna make sure that each and every item we're adding is gonna have a unique ID and then we're gonna do the same thing as we did in a previous project where we will grab the array the item list array and we'll just gonna add using the push method and what we're gonna be adding well the expense that we're creating so whatever we have here this variable and this object be more precise then we're just gonna be adding now after that I would want to do through two things I would want to call two methods again which we haven't created yet now the first one is gonna be show I'm sorry add expense I'm basically the display the expense and then I would want to show the balance so here we're going to call this first the add expense and again we have the access to it because we are within the method still we're not within some other function so this is gonna point to whatever method we have and this expense is going to expect a parameter of an object so since we have the object beyond expensive object we're gonna be passing it so we're passing in this as an argument that we're going to be expecting that in our parameter so let's just make sure that we are outside the previous method and let's maybe leave a come and just don't forget we also have a show balance I just don't want to create it right now so we'll have a show balance so once we create this we have a add expense so let's make a comment add expense and here again this is gonna be a method that expects to have a object so add expense and we can name this whatever we want again this is a parameter so let's just go with the same one as we had with an expense but we can name this really independently so again we're gonna create a div and again why we're creating this there however I'm gonna go back to index.html I believe this time I commented out notice we have the title value first we have the expense list this is this is where we have all our expenses then this would be the title and for the tile value and expense tile and then we'll have a single expense now each and every time obviously we're gonna be adding this sim single expense so only thing we can do is we can just grab this div this is gonna be my single expense because we're gonna be doing a lot of things that we did before we're gonna create a div we're gonna have this class and then we're gonna place everything within this day so actually you know what I'm selecting the wrong div because I only need this guy because I'm gonna be creating this parent if I only need whatever is inside so I'm gonna let me select this for a third time you're probably sick of watching do this but cons div then we're gonna do a document and we're gonna create an element so let's do create element we're gonna be creating a div now we know that this div is gonna have class of expense because I just show you so we'll have class list of add expense and just as a side note you can really do however you would want but I find it much more easier first in HTML now obviously you cannot see it because I commented out but in general you make it in HTML then you apply the classes and then at the end you can just comment it out and add it with a template literal and I think this is the fastest and best way to do this now again this is just my opinion I don't I'm not saying that I'm right or wrong I'm just saying what I prefer to do it you really can do however you would want and I just copy and paste this now I have the expense ID and also here I have the expense and now where I'm getting the expense I am getting back from the object so it's as simple as that now I could have left these empty but for now we already have done so many projects a lot of things are making or any sense where we're getting this from I'm getting back the object and I just want to have access to this ID and I'm gonna add this to a attribute of data ID to a edit icon and to a delete icon so basically every time I'm gonna be clicking icons I want to know the ID because this is gonna help me to filter out the list that we're creating and to make sure that we're getting the proper element and we're deleting the proper element most importantly deleting I guess well I think probably is also important so we have the expense ID and expense ID and we also need a title and we need the name out so let's find out where we have the amount so first this would be a amount so again we are using a template string so we can access the variable with a dollar sign expense title yeah and then no you know what this was the amount I don't know I am maybe having some kind of brain freeze right now title right here good one good going again we use it I don't know why we had now I know what this was the wrong dollar sign so this is fine oh you know what no it wasn't sorry so I apologize and just keep on seeing too many dollars right now expense title this is what we need so expense and this was gonna be an object and so once we say this now we obviously need to use the again some kind of method to upend this to something now since we're working within our class the method has access to one there's access to this property now this property holds the value the value is what the element that we're getting back from the Eddie let's scroll down let's look where is our method then this would be this expense and we will name this expense list and we're gonna do the method of guess what happened child and what we're a pending well I mean we can spend half an hour thinking about it but I would probably say the div since we created in there but I mean we can happen whatever we want really but let's just do the div I think it's gonna make a little bit more sense so we have the budget complete we have the expense complete because we're done probably to fix something so we have fixed car 400 that spends boom fix car 400 great well nothing's shown here well we haven't done anything right so that's where nothing is showing so fix car for running awesome now we still have an issue here why this is not empty we I thought we were working on this we had the expense input was supposed to be empty now also we had the amount input that was supposed to be empty so let's figure out what is an issue why we don't have the proper way of doing that the reason that is because we need to select a value so for now we're just targeting the whole input see over here we have the input now this is why it's important whenever we were working with a forms we need to use actually value this is kind of crucial otherwise you can see what's happening we cannot get the value it would be getting the value where we cannot set the value now in this case we're setting the value so let's try again let's try the fixing the car I mean let's do this time 5,000 and sure enough everything was fine we cleared it and I want to say boom again because we added an expense and I can keep on adding as many expenses as we would now like I said the second one that we are interested is showing the balance so again this would be the method that were interested so we have a show of bound now if you remember we already had this one time show of balance and remember the reason why we did not want to run the expenses is or add anything to the expenses that we were creating is because there was no values so I think now it's gonna make a little bit more sense if first we're going to add this show balance the method that we already worked before and again this method is what we used clearly when we were working with a budget so nothing has changed with this method so we can have the same method so this this show balance and now once we run this method then something should happen and that something is gonna be first of all budget so five thousand calculate then we're gonna have a forty six hundred and again the reason for it is forty six hundred because we run this show balance and we have hard-coded the values so every time I'm going to be adding this fix a car nothing is should be changing yeah you notice nothing is changing even though I'm running it so we need to go and fix this total form otherwise this is not gonna make sense we I mean total expense I'm sorry we have total expense so we need to fix this so first let's set a amount equal to zero because this is gonna be our starting point then how we want to check if the item list length so the item list is the element that holds all the items there's more than one item I want to start calculating this if there is no item I don't want to calculate anything so here I'm gonna say like this I'm gonna say if this and I have access to the item list because it is in my properties then I'm gonna calculate if the length of the item list is bigger than zero then I want to want to something other than that I wouldn't want to do anything other than that I'm just gonna say very simple I'm gonna say this and now I'm gonna use the expense amount it is gonna be text content so again we have the budget amount we have the balance amount so this would be the expense amount and one's gonna set it equal to total so all I'm saying is if there's no list item just an expense list this should be zero there's no reason for it to be anything other than zero because we haven't added any expenses and last thing I also would want to return the total which would be zero so this is all correct all we need to add the logic where we have the item list length is bigger than zero and what we're gonna do over here well well it's gonna be very simple we're gonna have a total then we're gonna set it equal to this that item list so we're gonna have a item list now what we're selecting this item list for we're gonna be selecting so we can run the method of reduce now why we're running the method off reduce because we want to calculate the values so this is all we're doing we just would want to get the values that we have over here so first things first maybe in this case you know what let's run the console log just so we can have a better understanding of what's happening so let's first let's do a console log of what we have in the item list and let's add some items just so we can see what's happening so we're gonna have item item list over here and let's just concentrate on this and let's do a I'm gonna fix a car 300 adding once an item list is actually not defined we have 0 1 9 well duh yeah obviously because we need to use this I'm selecting this again so let's do fix a car 300 expands so Norris empty array okay so why I'm getting the item list the reason for the item list is very simple vadym list is our array so every time we're adding something in the atom list what do we have sorry I said Dean's not empty we have one value sorry I misspoke but there is every time we're going to be running this and we're going to be adding this to a item list remember the item list not push now we have access to it this is the whole purpose of the creating array so what I would want to do right now if the length of this array is bigger than 0 I know that there's some items the only thing I'm doing is I'm just gonna use the reduce function and I'm just gonna count all the values for the amount property because I know that I'm setting the all my amounts to all the objects that I have so let's do another one just again I don't know buy milk something redundant buy milk and what would be the expense I don't know let's say note went up the price in it's 200 bucks two items two items perfect good amount 300 and 200 so again the idea is I'm not gonna be looking this in a Dom I have access this in the array so only thing I'm doing is just getting my reduce method then I can use and I'm going to just count all these values together that's all it is so let's do again total now we're gonna set this total equal to what we're gonna set this total equal to reduce now unlike the Billy for H and the filter in the map this is not gonna it can return more than just or not more than just not just an array it can run using the reduce method we can return whatever we want so in our case we just want to return zero so the number I'm sorry not the zero and we're gonna start with zero just the number we want to return the number so let's do a reduce now reduce function and it kind of gonna take a callback function and this callback function is gonna take two parameters now a lot of times they're called accumulator and current now you can really name them however you want but again I'm just gonna use the accumulator and Accord now we can also set it maybe this one to total then this would be a function block so the callback function block and then for reduce we need the initial value so this is what I was saying with zero so all I'm saying is I can write here whatever i want i can write array I can write object however what I'm looking for is number because I'm setting this total to number so each and every time I'm gonna be adding these values I would want to get the sum of it and display whatever I'm getting back and also Kalpa like my balance no how do I do this so first of all whenever we're using the with the reduce we need to return the accumulator so what what needs to be understood that every time we're running this reduce we're gonna loop through this array and think of this as a total that it's gonna be returned each and every iteration so we have access to this accumulator and we're gonna probably may be doing let's do some console logs just so it gives us a little bit better idea but here let's do first a console log and let's do a console log off accumulator so let's call this I don't know a I mean this is not totally correct but let's say just total so row and let's do template strings this is gonna be a little bit easier so total is now we're gonna access the accumulator so first let's look at a converter and then let's say and the current value is and now let's do again access T value of current so let's do a first of console.log then let's do right away our one where logic we would want and here all I'm saying is that with each of iteration I want to grab the value that I'm accumulating and I just want the add the current amount that I have now I'm getting the current amount because I'm looping through this array item list now the item list has the atoms of objects correct so current reflects the object now where I have the value in the object I have the in amount properly so this is why I'm gonna say current so current object then iterating through that I'm using in my iteration and I would just want the ADI amount and like I said last thing I remember always return the amount otherwise I'm sorry the accumulator otherwise this is not gonna make sense so let's save this and now we're gonna run this every time we're gonna be adding values so I'm sorry I'm gonna be sticking with the fix in the car because it's saved here I just saves me typing add expense now I have the total is zero and the current value is an object not all this because I made a mistake I'm not looking for a current I know that this is gonna be an object I need a amount this is what I need and this is what I'm saying is as we're going through this we're getting these values as an object because we have stored them in the item list as an object so again let's do fixing the car for the forty-fifth thousand times so here we have total is zero so we start with zero and the current value is 400 now what do you think here the amount right now is because we added this 400 this should be 400 right so in the next iteration we're going to start the total should be 400 and the current value is gonna be sembly so let's try this out let's do another fixed car because we really don't give a damn about it whatever name it is and let's just add hundred hundred add expense notice the total is 400 calories 100 so this is gonna be added again to any 400 iterations we're gonna have 500 so this is how we're getting back to values I mean the reduced function is extremely extremely powerful I mean I mean this is one of those things if you want to learn something or energies because this is gonna save you tons of time it's really one of the in my opinion one of the most definitely out of the all the array methods the most powerful method let's say this now we have the one of those total expense done so now it kind of made a little bit more sense as we were adding the values and now we need to figure out what we're doing so we have everything set up so we have submit expense form and we have the balance and if I'm correct everything is working correctly right so we're gonna have a five grand when I calculate and we're gonna fix a car again I'm gonna have a two thousand so everything's fine so we have two thousand and the balance is three thousand so if I'm gonna change this to a grand now this should be a expenses is still gonna stay 2000 and now the balance is gonna be negative thousand because obviously our budget is one thousand now we have the submit expense form done now the last one is gonna be working with these icons with a edit icon and with a delete icon so let me go up and let me show you what do I have so now I would want to select them somehow because I still want to have functionality I would want to remove it or meaning delete it or edit it and that is it is gonna happen like this again we're going to remove it from the Dom we're gonna remove from the list and then we're gonna place the item here so if you want to add it and then we can be able to edit if you would just want to remove we're just removing which is deleting from the DOM and from the item list now this we're gonna set up within an expense list because as we're added again we could have technically done this as a callback function as we're adding the items here but in our case were just gonna do a event propagation where we can just use the event target this would be another option again it really doesn't matter how you do it I just for the sake of the tutorial I just thought if you do another callback that might be confusing so let's just skip this and let's do it with event listener the only thing we're doing is since we don't have an access to it normally since we run the function because the items we're adding dynamically I would want to do the click handler I wouldn't wanna attach the listener for a parent the parent is gonna be expensed so anywhere I'm gonna be clicking on an expense list I would want to get back what I'm clicking on and the moment I found out what I'm clicking on then I would want to do some kind of action so this is gonna be happening in the event listeners now again we can do the simple event target and I don't know why I'm not actually doing the event why I'm so brave I'm trying to find the event target without actually getting the event so we need the event object first and then let's do again a console log of target this is gonna because this usually clears everything up because the event and event target sometimes can be a little bit misleading so we always can do a console log now obviously this is not gonna make sense now I'm pressing on the titles this is not what I want what I would want is get back the element that I'm clicking on once we have added the items and this is like I said we can do dynamically because there's no way for us to select those classes just I mean there is with a callback but not let's say not to write a function here we're all gonna be clicking where you're going to be looking for the edit or delete item class 500 that expense so now this is more interesting now we have the expense to fight expenses $500 and now we have these two icons this is what I'm looking for so I'm looking for this icon edit and in fact I'm actually looking for the T element the not not the actual icon I'm not looking for the icon in fact I would want to get a link that is a parent of this so we're actually gonna be using again the parent element property and the second one is gonna be I am the trash icon so this is all good we just need to use the parent element because the parent loan has the class so this is the case we're gonna be going back to a index.html and notice what I have all right we could have looked this in objects since we're obviously adding them but anyway we have the edit this is the icon that we're getting back what I need is this edit icon I want to make sure that the parent element of the element that I'm clicking on has this class because then I know that I'm selecting this icon or delete icon these are the two icons that I have so I should be listening to it and the way we do this we use the parent element now again we have done this before so we're not gonna be going crazy with the console logs anymore we can just use a parent element console.log not console.log the property now if you have confusion about this again I suggest just console.log out the event target parent element and everything is gonna be way more clear than if I spend another half an hour explaining this so we're gonna have a target and like I said we are looking for a parent element and what is the parent element this is gonna be a link now the link has what link has class now the way access the class we can use the classlist property now what class list we we can use we can use contains so what contains contains offers us to check whether this element the has the class of whatever we're running here or not so again this is really really useful property of class list and I obviously have contains and now we're looking for the Edit icon this is obviously what we want as one option and the second one is gonna be Delete icon now here I can do the if so this is gonna be my first if and then we can just do the elsif so let me just grab copy and paste this and here let's say else and if now I'm not gonna be looking for edit icon this is where I'm gonna be looking for a delete icon now what do you think we need over here we need some function because obviously for now we're just always saying as well if it is or if it's not I mean we can write something here that might be fun but we need a function now what is the function well we can get the function from the method of our class instance right so we can do UI then let's write what method we're gonna be creating edit and we're gonna write expense expense now this method again I created obviously before and this expense is gonna take one parameter and that parameter is gonna be the parent element so basically a link so here we're gonna do the same thing so if we're looking for the element that has the class I also would want to select the same element so I'm just gonna use an event target and parent element it so I'm basically getting back tooling now this would be the other Hill expense and the same is gonna be for to delete expense now here we're just gonna use a different name so delete expense and again the same thing it accepts the parameter of event target parent element so some kind of object or my apology is some kind of element now obviously since we're working with Dom we're all gonna be getting back an object but now we will gonna go up again to a class so total expense was our last one then I don't know either underneath or above it doesn't really matter whatever it makes sense to you it's sometimes it's hard to for me to decide for the tutorial where to place everything but yeah we just need to create these methods and we're done now these methods might be a little bit lengthy but we're gonna be fine added expense the name of the method expense and expensive first of all I need to learn how to properly write everything and here this is the element so this is the element that I'm getting back now so this is a parameter and here this is an argument there I'm expecting the element here I'm passing the element now the second one is going to be delete expense where I'm gonna do the same thing we're just gonna write delete expense and again we're gonna pass the element so some kind of down Dom element that we're getting back and first you know what we're just gonna write the first edit I had it expense this might be a little bit longer and then we'll have a delete expense so we're almost there I mean we all we just have pretty much two methods that we need to work on this is gonna be low but maybe probably comp complicated than before but the lead expense now comments done the methods done great so let's work on it remember again we had that idea correct remember we passed this Eddie so we're gonna make use of this ID how do we access this attribute well we need to use data set so we will use a data set and we're going to access this by using data set dot ID now this is important because again this is gonna help us tremendously because otherwise then we really need to do a lot of a Dom traversing so we need to have access to this ID now how do I have access to this ID first I'm gonna create a very long and I said this is gonna be equal to ID then what I'm gonna be getting back is gonna be string again so again we're gonna use parse int so parse integer now what I would need I would need element now element has what it has the data ID attribute now I could use a data set like I said properly now for the data set only thing that matters is what name it is since this is data ID I'm using data dot ID because I couldn't write like this this is not gonna make sense I need to write it as a object property so I'm getting back the ID then I'm gonna work with a parent and I'm gonna remove this parent from the list again why am I getting the parent because look at the expense list I have the expense list and I need to go up the Dom traversed at home all the way up to the expense list and make sure that it deletes whatever parent element of my icon now it's not gonna be direct parent element because notice again the icons are sitting within a div then this div is sitting within something so we need to kind of hop up to the Dom get the proper parent element and just delete it and trust me whenever you're working this is a lot of pretty much console logging you just okay parent element okay what is the point okay next parent old okay now I got to the point where I need okay let's just get this sucker out of this expense list so let's go up and again we'll just going to be doing very simple we're gonna say let's parent and now we just need to hop few steps up so the first one is going to be element I'm getting back the element then I'm getting back the parent element and again if this is confusing just console.log it it's gonna make way more sense so again another parent element another hop above and then another one so basically we hopped three times so I'm gonna have a element whatever element we got back but remember already within this element we did the parent element so technically we have four hops we're doing first here with the parent element property and then we're doing three more so we have element one more two more add three more so here we're selecting the parent parent which is actually this whole item and then after that we would want this expense list so the list that's holding all the items we just want to remove it now we know that we can remove it by first of all first probably it's gonna make sense if we're gonna having a from Dom the comment this expense list this is the grandfather of all these elements you can call it like this now how does a stitch thing doesn't exist but let's just call it grandfather and we just want to remove the parent so whatever parent we're getting back we will just want to remove from the expense list then the second one is way more interesting this is again using the filter where we would want to remove from the parade that we had remember we even though we remove it from Dom we still have this in the array because remember we place the item whenever we had the expenses so remember we had the item now I also would want to filter this out and I would want to filter out for two reasons first I would want to filter out so i get the value so I can place whatever I have within the item let's say the value and the amount so I can add it and the second one is I would want to return the array without that item so first things first let's get the value my friends so we have the remove from the list and we have completed already remove remove from the list remove from the list and I'm sorry sometimes it's hard to talk and type so sometimes I'm gonna talk I'm just gonna stop and type so let expenses expense this item list again this is the array that holds all our values now we can use the filter to find and what we would want to find I would want to find the item so have a function the item that has the ID D has the ID of this ID so whatever item in our array that has this ID we would want to return it and we would want to turn it to this specific variable so here we're gonna have item but remember the filter is gonna return the new array so again we're gonna have to select a 0 parent not 0 parent sorry I've been talking about parents too much 0 item so 0 index item not not just this is not gonna return the variable this is gonna return and you are a so callback function now within the callback question we're iterating through the whole array and I'm gonna say like this if the item that I'm iterating through so that that exact item in my array if this item ID matches whatever ID I'm getting back from my element dataset then I'm solid and I just wanna return this if not then I just move on and in the perfect world if everything is correct since the all the IDS are unique this should return only about there should be no other value so first of all gonna get expense now the second one is we would want to work with a rest of the list correct because we have a one that is the item and the second again we need we need to remove this item from the list at least temporarily because what is the point of editing if it was going to be adding a new value so how do we do this we're gonna say remove from the way I'm saying list is done sorry list no relation and again we're doing filtering now what is the filter in this time now I'm gonna set a variable so I'm gonna say let and this is gonna stand for a temporary list so temp list I can name this whatever so this item list again selecting the same array again using the same filter now this time I don't want to return this one item I don't care about that I already got that I'm fine I would need the rest of the list and then I'm gonna use this template and I'm gonna assign this to a my list right now so filter again callback function within a call varnish on the parameter the parameter I refers to every item in the list and here we're gonna say return and I only want to return what I wanna return the item item that does not have the same ID so rest of the items that does not have the ID so that ID can stay in original list but in the temporary list we're just gonna remove all the items that don't have that ID and now it's very simple we're just gonna say you know what since we have this mo doesn't say this item list so whatever original list we have we'll just reassign it and was gonna say temp list BAM here we go so now this item does not exist anymore at least in a list right now now once we're gonna again press an expense once we have added everything is gonna be fine however right now we don't want it and also what we want is we want to show the balance because remember that every time we're changing something in a list we would want to run the show the balance otherwise we're gonna be updating something and this is not gonna show up over here so we're gonna run the ad of balance I'm sorry show the balance that we had before and now we have the item list and this would be the template now the last thing I just want to add the values here because remember as I'm editing I would want them to show up over here so again we can do this in the bottom we can do this after we have selected the item doesn't really matter here we're gonna say show value and remember what I was saying with the filter the filter is gonna return the array so if I wouldn't access this item because I know this is an object now obviously because I place it as an so I'm getting back in the lab but it is an object as a zero index in the array so now I'm going to set this expense input now this is I'm getting back from these selections or the property's value and we're gonna do expense since this is what I'm getting back zero so zero index value and you're gonna say tile and again we can do a bunch of console logs here alone but just to skip a little bit ahead let's just do this without console logs and if you have any issues again you can just count along and you'll see what I'm talking about so we'll have a expense and now instead of title I would want to select the amount so this is all that's happening so we have the expense which is an array which is gonna hold one object and again you can console.log it and you'll see and what I'm saying is true and then we're gonna be getting back the titles over here so let's least test it out so everything is working so let's do a budget of five grand let's calculate fix the car for a thirty three thousand time adding expense sure enough we have three hundred so this is gonna be forty seven hundred now if I'm gonna click Edit what's gonna happen notice first I'm getting the values back this is the last thing that we did expense zero dot title great so we have these values now also we removed from the expenses and now the balance is back to the five thousand so again this was the reason for the show of balance that we were on and if I'm gonna change this expense to let's say eight hundred boom now I have to fix the car is gonna be eight hundred and everything is calculated correctly now the last thing is the delete expense so newly it explains however the good news is a lot of this is exactly the same so we can do a first of all that I'm moving the parent so this is gonna be exactly the same we just want to remove from the Dom so let's just copy and paste it then I don't know why I've removed from down ties I guess I messed it up again with my comments which is pretty typical remove from the list this is not from the list we're moving from the list and again we're gonna do the same thing we're just grabbing the items whatever we have removed from the list temp list ID again temp list and reassigning and showing the balance that's it so the a the deletion is actually very simple just fix it in like what 30 seconds without me well imagine without me talking then that's what i'm talking with me yapping this could be another three hours yeah so I think everything works correctly and I want to feel brave and I want to actually open up in the browser and I'm probably gonna regret this because there's gonna be mistake and you're gonna be laughing like your heads off but anyway yeah what's this they're out so we have the budget budget is great I mean it's great if you're probably positive not negative but anyway 5,000 great awesome five grand you know what let's do ten ten is even better let's add zero well no way buddy okay expenses let's start with the zero let's say there's no expenses well there's not possible okay fixing the car but you know what mechanic actually paid me no way you didn't pay you let's do maybe negative budget because I forgot this is a negative budget again yep no can do awesome great everything is working fine we probably you know what we should you know now we're gonna leave we could technically add input where it's zero right now if we add the incorrect value but I don't think it makes sense so we have fixed car let's just leave it so let what the user actually fix it if it's his mistake then you should fix it no I have fix a car removed from budget blah blah blah budget nine nine nine seven nine expense value is 21 let's add another one let's do the same of this is a buying of the milk by them buying or buy the milk by the milk I'm gonna want three hundred mm let's make some fun milk expenses budget balance BAM six nine seven nine and yeah so we have expense value what we can do we can delete if we want to delete goes back to 21 if we would want to edit again it removes temporarily and now let's do fixing the car of twenty-one thousand and sure enough poor sucker is in the death not that death depth yeah so this would be it for the project guys I hope you enjoyed it and I hope you I hope to you next project

Channel: freeCodeCamp.org

Views: 186,332

Keywords: javascript tutorial for beginners, website, programming, web, javascript, javascript tutorial, javascript tutorial for beginners with examples, javascript for beginners, tutorial, javascript introduction, 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: m_HJ3juuFvo

Length: 91min 30sec (5490 seconds)

Published: Fri Dec 21 2018