Placeholder Image

字幕表 動画を再生する

  • and this project, we're gonna create a budget complication.

  • Now, this project is going to be special because we're gonna be using classes instead of construction functions.

  • So now let's look at what we're going to be creating and this complication.

  • Well, as you noticed, we're gonna have a budget.

  • So whatever money we have, then whatever expenses we are gonna accumulate on what would be the ending balance?

  • So let's say we have two forms.

  • One is going to be for the expenses and the one the other one is gonna be 40 about it.

  • If I tried to insert, let's say 5000 on, I'm gonna press, submit or calculate.

  • I'm gonna have a budget on the balance because obviously there's no expenses yet.

  • Now, if I would want to change the budget, if I would say, you know what, I'm actually getting to grant more.

  • So instead, I'm just going to say that this is gonna be 7000.

  • You notice how automatic money my budget he's invaded on DSO is my browns.

  • How are if I'm trying to insert the value there's gonna be empty or negative under, so I'm gonna have feedback and it's gonna be complaining that it's not possible on if you notice the zero hasn't been passed to my budget or to my balance.

  • Once we set the murderer, next is gonna be the expense.

  • What would be expense?

  • So let's say start with a fix a car.

  • Some was going to say that fixed the car is gonna be 200 bucks.

  • So now I have the budget of seven grand, still 7000.

  • Then expense is gonna be 200 on the balance is gonna be shown off 6800 because we're gonna take into account off expenses off 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 removed and again my balance is gonna be to a 7000 because they removed my $200 expense.

  • But let's say that we have another rent, so another expense and this would be a 2002nd.

  • We're adding the expense and you know it just to show you that that everything is working Fine.

  • We can have two of them on next month came along and we need to fix the car for 1000 marks.

  • So again we're calculating.

  • Whatever our expenses are in our case, this is gonna be 3000.

  • Now, our balance is only gonna be 4000 because we have spending $3000.

  • And you know what?

  • Our landlord showed up and he said, You know what, buddy?

  • The rent is not gonna be.

  • 2000 is actually gonna be 3000.

  • So now I can click at it and I can say painfully that instead of 3000 I'm paying 3000.

  • I'm sorry.

  • Instead of 2000 paying 3000 so mad at 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 that you're getting seven grand instead off your let's say, getting a 2500 he says.

  • I don't know what you were smoking, but there's no way you're making that much money I'm gonna press, calculate.

  • And now my balance is actually negative.

  • So no need to reach for credit cards or something because my budget is a low off 2500 for 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 depending on that either or 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 you're selling went up again.

  • So now we have a balance of 6000.

  • So, like I said before, we're gonna be using classes instead of constructive functions.

  • So that's gonna be really, really interesting.

  • And like I said, yeah, enough of me talking and let's start working on the project.

  • The project set of files are located on my get hub.

  • 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 off the video.

  • Now, hopefully you downloaded a set of folder on You are as eager as I am working on this project.

  • So whenever we have a download folder or set up full available, we can just open it up and we can notice what we have regarding the HTML Insidious is now There's not gonna be any functionality.

  • So it doesn't matter what I'm pressing.

  • You noticed that I'm just gonna be submitting the empty form on.

  • I could just add expense.

  • Nothing is happening on.

  • Also, there's no feedback so I can click everything.

  • But nothing is happening.

  • So now this is our job to add general script to this HTML unsee assess So gonna have a working up.

  • So in this case, we're gonna just maybe close it because we really don't need it.

  • Let's open up this folder in our favorite texted her now, as always, probably 40 45th time You're 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 indexation, Mel, where we're gonna have the forms on.

  • We're gonna have a list.

  • We'll have two types of form this time now in the main CSS.

  • This is where our classes are and noticed that we were just selecting styles.

  • So I'm just using a main styles on just the flying them as a classes.

  • And then we also have the address now because this is a bigger project.

  • You noticed that there's quite a few things that I already right away at it to the actress and let me go over this just to make some clarifications.

  • Well, first things first.

  • Prior to this project, we have been setting up a constructive function that was responsible for all our instances in this case, if we would wanna have a constructive function for you, I we created a constructive function.

  • And then we added all the properties to a president and if we had some other constructive function, and if you would want to add some time of properties in there, we added in the parameter.

  • And then we said it equal to this.

  • So this side of D was equal to i d.

  • And here we passed Eddie.

  • Like I said, this project is gonna be different because we were gonna make use off the E s six and we have the classic text.

  • 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 you are.

  • You knew you are class instance and then we would be getting the instance off this class whenever we have class, we also have an option off having a constructor method that's gonna run every time we're gonna.

  • Instead, she ate the class and we have two options.

  • We can either pass the parameters again.

  • Let's say that we would say I d.

  • So every time we would be passing this idea would say this I d.

  • So for every instance, obviously, this I d would be different.

  • We've just said equal to I d.

  • Or in our case, we're gonna be using this constructor and we're gonna have preset the properties.

  • So I already know that I'm gonna have property of this budget feedback and I'm just going to use a document career 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 off selecting something.

  • So I don't think that we need to right this for, let's say, 20 minutes.

  • Because this should make all sense those Obviously, as I'm working, we will gonna be switching my Krishna Mel, 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 i.

  • D of budget form.

  • So this is the form that I'm talking about than the budget.

  • Then put 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 constructed that we run every time we century to close, 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 gonna use this instance and we're gonna run the methods most of our work we're gonna be doing in the class.

  • In fact, we're gonna be just adding these methods to our event listener function.

  • And then world's gonna be calling this function once the dump loads.

  • So let's do that first, because later on, only thing we're gonna be doing is creating methods, and we're just gonna be making use of the fact that we have access to these variables.

  • I'm sorry to these properties.

  • So this budget feedback waken right away, grab it.

  • So we were gonna be working with the function on.

  • We're just gonna grab this.

  • It's a variable or 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 off this class.

  • The 1st 1 is gonna be the function off 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 would just say document Hey, had event listener.

  • Now we're gonna be listening for a dumb content loaded and wants this event fires.

  • We're gonna have a callback function.

  • And within this callback function, we would run.

  • We would want around 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 off this you high class.

  • And then, like I said, I was gonna be listening for a three events in this event listener and everything else we're gonna 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 going to be listening for those moments.

  • And let's make a new instance off this.

  • You likely so?

  • First things first, let's get a budget form.

  • We're going to set this into our variable of budget form on again.

  • We're gonna do this by Andy, get document get element by Andy, and we're gonna be oh, listening or looking for a budget form.

  • I d.

  • Now the budget for my i.

  • D is the one with a green porter also would want the expense form some.

  • This wouldn't be in this warm on here.

  • How is that?

  • We're just going to change this around a little bit is not gonna be budget for him.

  • This is gonna be expense form on.

  • The last one is gonna be the expense list.

  • We're gonna have a title on the expense value.

  • So again, let me copy and paste this.

  • This is gonna be expense list.

  • So here, like me, delete form on.

  • Also, let me delete the list.

  • So here, this would be a list.

  • So we're gonna have budget for, um, expense form and expense list.

  • So these are gonna be my three variables that are gonna hold the elements that I'm getting back from the dump.

  • Then let's create a new instance off the u A.

  • Y class.

  • So instance off your eye class on If you would want to create an instance, we do the same thing as we're doing with a constructor function.

  • So can't you?

  • Why on this would be knew who you are?

  • And like I said before, if we would be passing something in a constructor.

  • Since we're running this constructor every time in extension of the class, who would pass it over here like I did an example with an i d.

  • So obviously, for each and every instance, the idea would be that these properties would be different.

  • Well, since I only have one instance on, I just want these properties that would hold these dumb values on.

  • I could just place them in and constructor without passing any premise.

  • So now, sure enough, I'm gonna have access to all these properties.

  • And more important than that, just properties to the methods that we're gonna 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 100 lines down and I can still have a constructive 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 going to 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 on then.

  • Once we have the new instance of you are like I said, we would wanna add three event listeners.

  • One is gonna be for the budget form.

  • The other one is gonna be expense form, and then we're gonna have expense list.

  • So let's do a budget budget form submit, submit on, then Maybe, let's just create this budget from submit so budget form submit on ad listener.

  • So we're gonna be listening for a submit event, and then this is gonna be a callback function now for now, Well, it's gonna be passing the event, and we're just gonna ignore everything because we don't really care.

  • We haven't created these methods it.

  • So the only thing I want to do is just set up the bones on from basically the structure of my event listeners function.

  • And then once we're gonna 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 on the 3rd 1 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 gonna be attaching these events to expenses that we're adding.

  • Whether this is gonna be a leading We're editing or something like this.

  • So this would be not a budget form.

  • The 2nd 1 should be expense form.

  • And I'm assuming that you already have watched quite a few projects already with me or done so Quite a few project 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 that had So this is not like three hours long something.

  • Let's do expense lists or adding the click event instead of submits will have to submit evidence and then we'll have one click of it.

  • Now why?

  • I'm passing for the first to the event object because we know with the form this is gonna be automatically submitting, and we would want to prevent that.

  • 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 to tell you that we can start working in our U Y.

  • Class off creating the methods.

  • Now, the first method that we're gonna be creating is when we are submitting before, I would wanna make sure that the value is not zero or less than zero, and if everything is fine, I would wanna show the balance on.

  • I would also want to show the budget.

  • So let's go ahead and let's start working now within the classes.

  • And yes, six we can skip right now any kind of function, Let's say declarations so that we can do on lee a comment, if you would want to So submit budget method.

  • And we could just write the name of the method that we were gonna be creating.

  • So submit budget for this is gonna be the method that we're gonna 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 Consul log on hello from mere six.

  • Since now we're using a six on Let's go to budget form, submit event and let's run this.

  • We have the instance off you.

  • I And sure enough, we have what we have.

  • Submit budget form.

  • The only thing we need to do is just run this method.

  • So as you can see, a lot of things are the same.

  • How are 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're going to start creating the methods.

  • So once we save it, let's open up the ghoul developer tools because this is where we're gonna be spending the last warms our next 10 hours.

  • Kidding.

  • Uh, hope limb kidding on here.

  • Let's do calculate, since only thing we have to do is submit the foreman we have Hello from a six on.

  • As you notice, nothing is refreshing because we prevented the default behavior.

  • So, so far, so good.

  • Now, this is great.

  • We have the submit budget for method, Then we can start working on 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 i d.

  • Off budget input and already have assigned it to this again.

  • Property.

  • Now again, with the 1st 1 we're gonna go back, and we're gonna look att in exceptional amount later on.

  • I'm just gonna assume that if you have issues, then just go back to indexation email and you can find it.

  • Now you can press.

  • Come on, F if you want to find it faster.

  • So let's say I'm looking for a budget input.

  • Could just write budget budget on the name would be input here.

  • So now let's see that we have no values because probably I misspelled it or something.

  • So we have budget.

  • This would be the name on this would be the input.

  • So budget input on.

  • Yeah, sure enough, 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 i d, then I need to use the dash is so Therefore, if you're confused about something that you're getting out, 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 with 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 have Jess.

  • And first, I would want to get the value.

  • So account's value is gonna be equal to this.

  • Now, since I have again access to the property, I'm using this on.

  • Now the name off, this would be budget in front, the one that I was trying to find with my command.

  • If with find.

  • And here, let's just get a value.

  • So what would be devoured now?

  • Since we have done this quite a few times, I'm not gonna Consul log it.

  • We can just do right away value.

  • And we can just check whether value is gonna be empty or so here.

  • This would be the owner operator.

  • The value is gonna be less than zero.

  • I was less than zero.

  • Now, if this is the case, then again we have access to a feedback.

  • 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 the speed, like so is due this budget feedback.

  • Now it's again used the class list with the class list.

  • We have an option off, add or remove or I believe it was contained.

  • Now, in this case, we just want to add show Adam because, like with other projects, all we did is we created this budget feedback I gave it in the main CSS off budget feedback and expense fee, that 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, which is dynamically adding this.

  • So let's do add show of mine.

  • Um, and also, let's add some text inside here, so I would say this budget feedback, we're on the same property.

  • Then let's add as an intern html.

  • And since we're using the inner HTML, we can pass the HTML tags on four days, will using the template materials, so back ticks.

  • And then we could just write that we wouldn't want to pass the paragraph the paragraph would contain value cannot be empty or negative.

  • So pretty standard what there have been writing before.

  • So negative.

  • Then we can close the paragraph on again.

  • We were able to do this because we're using the latest email.

  • You wouldn't be able to do this with text content because then it's going well, you wouldn't be able to do it, but this is going to show the actual tags and this is not what you would want to do.

  • So, so far, so good.

  • Let's just get out.

  • Would we have Now, as I'm submitting the form, I'm purposely gonna put zero and now my feedback is gonna be showing.

  • So now we selected the feedback and we added the class of show on.

  • No, obviously again, like the previous project.

  • We would want to hide it after three seconds.

  • Four 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 liked to work with a bunch of functions in the project.

  • Just so you get to know them on dhe, 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 time out, and we're gonna have a set time.

  • Now, this is gonna be a function.

  • Now, this function is gonna require a callback function on this would be the callback function passing in, and then the second parameter is going to be How long this how long this function is going to 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 Feed that class list.

  • So budget, um, budget feedback on 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 going to remove the class, what's gonna happen?

  • Well, we're gonna go back to the default.

  • What was the default?

  • The fault was a display of So let's remove class on the class is gonna be the same off shelve item, and I wanna let you know right away.

  • If everything is correctly, this shouldn't work.

  • But let's just test it out.

  • Someone's We're on it now.

  • Let's again I want to test with zero value.

  • So now I run it on.

  • 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 I don't know what I'm saying.

  • Two times, correct.

  • Everything is correct.

  • So we have this budget feedback class list.

  • I mean, we have the Knox is literally one line up.

  • Now, what is the issue?

  • Why we can't access this and again, the same thing like we had with a constructive 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 of this is pointing to a go.

  • But when the object, it's looking for the method on this I'm sorry for the property on this little window object, and it's trying to have the classless, and it's saying that 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.

  • You are.

  • 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 dysfunction within this method now, this is not pointing any more 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.

  • On again, I'm going to yourself.

  • But you can write whatever very blue one, And I'm going to set this equal to this Nam grabbing the value of this that is gonna be pointing back to the class and just to show you, let's do a log on.

  • Let's do this from 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 off.

  • And let's also cancel lock this So if everything is correct, we should have this.

  • That's pointing back to our class.

  • Then we're gonna have this to the mobile object and then self is again gonna be pointing back to a class.

  • Let's check it out again.

  • Mt.

  • Value.

  • And sure enough, we have few things.

  • We have the u I So this would be the you are now.

  • The 2nd 1 is gonna be what now?

  • The 2nd 1 is gonna be div more here, and then we have the 3rd 1 That's basically not gonna make sense.

  • So we have a div expense feedback alert, and then we're gonna have a phone call type error can read property off.

  • No.

  • So obviously this wasn't working as we expected, even though we had the u I A FEMA.

  • Now, this wasn't pointing to a correct Ah Wei.

  • Obviously, I can't have run these actually because they I have run this after I called Ari this budget feedback.

  • So this is not gonna make sense.

  • Let me fix this.

  • This is why we can't see anything.

  • My apologies, because you know what?

  • Is there a 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 concert alone.

  • So we're gonna have a budget feedback.

  • So I'm gonna have you.

  • I should be our first this.

  • Then we're gonna have the budget input.

  • And sure enough, after four seconds now we have the window.

  • Not as this is the window object that I was talking about.

  • This is why we're trying to access it when we cannot.

  • Andi, next again, we have the you are.

  • So like I said, we have the u I.

  • Then we have the window object, and then we have you.

  • And again, I'm 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.

  • Now we're reassigning this 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 that this is gonna be empty value.

  • Now this is gonna console lock this on over here.

  • You can see that several.

  • I mean, this is not what I wanted keep on making mistakes, but that's great.

  • Um, Jack lied again, trying to add negative value.

  • And in four seconds, this is gonna be caught because everything is working for 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 form and added to the budget.

  • And also, I would want to remove and make this value empty because obviously I would wanna later on may best among their value.

  • So I don't want the value to stay there, and the 3rd 1 is gonna be show balance.

  • And this is where we're gonna be doing a little bit of calculation.

  • So we're gonna call another method that we're gonna create in you.

  • I class.

  • Like I said, most of the work is gonna be in your class, so I'm 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 going to keep on adding other methods from the same class within this.

  • Submit a budget for months because again, I find it important to understand how we're working with a key word of this to here.

  • Let's do a first budget amount.

  • And what is budget amount I'm selecting budget about Get element by Andy.

  • This would be the amount.

  • Or here, so budget amount.

  • Then let's have it as a text content and who's gonna pass the value.

  • So if there is some kind of AL, you're gonna pass it here.

  • It's a simple as it gets.

  • If the value is gonna be zero or less than zero, then I would wanna show them or tell the person, tell the user that they need to fix something.

  • Eve, the values there, the rate was gonna pass the value after that.

  • I also like I said, I would wanna remove whatever I have the Indian put.

  • 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.

  • And this is important so that forms have the value on 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 on.

  • We're gonna do what we did before.

  • What's going on?

  • Right, counselor?

  • Now, in this case, I have that this and this is not inside some kind of other function that we're running it so everything is fine.

  • They ski where now is gonna be again, pointing back to a class from now.

  • In this case, I can use this show balanced this not your bounds 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 ah function.

  • Keyword screen could just write, show balance on for now.

  • We're going to do very simple again.

  • Consul log I'm going to do Hey, I am really where?

  • I don't know why I'm doing this.

  • We can just do a Mac ticks template liberals.

  • Hey, I'm getting a hold off this key word.

  • Well, I mean this keyboard yah, This key word on once I said, I hope we don't make, like, 10,000 mistakes with this key word.

  • Otherwise, this is gonna sound very cocky.

  • And you know what?

  • Let me just calm until this.

  • Now, keep it for your reference on always.

  • If you have any questions about this one of the best ways, it's just ah, concert.

  • Log everything out.

  • So let's add some value since we have tested already quite a few times with zeros calculate for 1000.

  • And now, sure enough, I'm running the method, So so far, so good.

  • Now we need to create the method off show bounds, right?

  • Correct.

  • Because the first thing that we did was just called the methods and how we need to write something within this method.

  • Okay, first things first.

  • Now we have the method of show bounds.

  • 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 on here.

  • We're gonna write expense.

  • No, here.

  • Basically, all I'm trying to do is calculate the expenses, And I'm going to create a method that is going to do this for me.

  • So we're gonna have a little total on 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 vase.

  • Total expense.

  • Or, to be more correct, we can just do comment off total expense on Let's write it.

  • This is gonna be total expense.

  • This is gonna be our method.

  • Now again, we can do a consul 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.

  • 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 is 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 moved here.

  • And once I calculate 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 gonna We're gonna be using this later on on.

  • Let's just said it.

  • I don't know 2 400 something like this.

  • So we always have this Valium.

  • 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, just kind of definitely makes sense.

  • So let's have this.

  • And now we know that this expense should have 400 because we have total expense and were just returning detail so good enough we have a hard coded value off 400.

  • Next, we're gonna be working with a total so we're gonna have const.

  • I don't know.

  • This is gonna be the variable.

  • Now here.

  • I would want a farce in't.

  • So I'm gonna use this method that I have with Parts and Turner.

  • And the reason for that is because I would want to grab the value that's gonna be in the budget from whatever value has Bean passed in the budget and again remember important thing.

  • I'm only running this after I have added already in the budget.

  • This is another stumbling point.

  • Now we need to Onley call this call back whenever already there's some value.

  • Otherwise, this is not gonna make sense.

  • You cannot get some value back from the dumb 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 going to use the properties we have and will have a budget amount text content.

  • So only thing I'm doing here here, I'm passing the value.

  • So here I am saying this budget amount text content value is equal to this valley and then I'm getting it back.

  • So basically, with the show bands, I'm getting back now.

  • We could have set it up that I'm passing it as a grammar or let's say here argument, I mean, what 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, all expense 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.

  • A mom is gonna be subtracted from the expense, and now we 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 dumb element with a budget amount.

  • And let's do a text content is gonna be equal to total So very simple.

  • We just grab the expense that we're gonna chocolate later.

  • But for now, we have 400.

  • Then we grab the budget amount.

  • But since we're taking a text input, then when you start texting to text content, I want a power running through the parse indigenous.

  • I want to get the integer and then I would wanna get whatever total I have.

  • And now, since I have the total I used this balance amount, ex content, and again, this would be a balance amount.

  • So balance amount, or here and I would just wanna check if this value is gonna be less than zero.

  • Then we're gonna show it with the class of red.

  • So we're gonna have a red color, and then else, if it's bigger than zero, then we're gonna be green.

  • And then last one is going to be if it's equal to zero, then moving half a zero.

  • So let's write if and total.

  • So now we're looking for a total if total is less than zero.

  • So what we should do?

  • So we have a dis balance and class list again.

  • We first confined a classless and then we're gonna find what we have in the CSS.

  • So we're gonna remove show of green because I don't want to continuously keep on adding the classes from basic ideas.

  • Since this is gonna be changing, we can have more expenses and we can have bigger budget.

  • They're smaller.

  • 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 the balance on again.

  • This is gonna be balance class list on again.

  • Instead of removing now, we would wanna add red.

  • So whenever it is below zero, we would wanna add a color of red.

  • But we wouldn't want remove the show green of Show black if it was there before, because obviously we made it.

  • That this can always change now do things.

  • The balance is again.

  • The easiest thing is gonna be finding balance balance.

  • Now where we have the balance, the violence is gonna be here.

  • So we have the expenses.

  • This is zero, and then we have a heading six of balance than the balance icon and the actual class of balance is gonna be where we have the dollars.

  • Think 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 census, classes are very straightforward.

  • She'll read There's gonna be red from green Is gonna be grain show black.

  • I mean, we can guess it wasn't gonna be blue.

  • No, it's gonna be book.

  • So let's go back to app Js on.

  • Let's figure out So we have if the total is lessons here.

  • So now we have very easy task who can just grab this on?

  • We can just copy and first time here we're going to say else if and if the total is bigger than zero then we would want to do the opposite.

  • We would want to remove Ah, show red on show black and instead we would want ad show Green on.

  • After that, we have wonder where this is gonna be equal to zero on.

  • I don't know why, but I looks like a copy to times.

  • Hopefully I don't know.

  • I'm not just having some clean off.

  • I don't wanna say heart attack, but some kind of brain freeze or something.

  • There's no I'm show red show green.

  • So with zero, we would want add the black one shown lack on.

  • We would want to remove what we would want to remove shell red and sugaring again whenever class we're adding the other two's we would want to remove this would be the show balance.

  • 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 in expenses, so this should be all green calculate.

  • And sure enough, we have everything.

  • Green order.

  • Now, if I'm gonna have the adding on expenses this if everything is working correctly, this should be black.

  • I mean, we could just check it out with a black one.

  • This should be black with zero.

  • 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 gonna be working with an expenses, and this is gonna be, um Well, let's just put it this way.

  • There's gonna be a little bit more cold than this.

  • So let's start in our event, listener, since this was a submit a budget form and the next one would be the expense now, 40 expense form again, the method name is not gonna be very original.

  • Submit on.

  • I'm not gonna say budget.

  • I'm gonna say expense, because this is gonna be the most original, probably method name ever.

  • Now, here I have the submit expensed form, and now we can save it.

  • And obviously we need to go back.

  • And now it's saying that there is a well, now it's actually saying that there's just no snow slope that's no slow network on dhe.

  • Doesn't really matter to us.

  • We're more locally.

  • But now we had a what?

  • We had a submit budget form.

  • Now we need a submit off expense form because this is gonna be way more interesting.

  • So after a show balance and we can just maybe leave this, uh, total expense all the way in the bottom couldn't do a submit, Submit Ah, sub mitt expense form.

  • So this is gonna be our comment now within this method off submit expense form.

  • We were gonna be selecting few properties and we're gonna be creating the variable.

  • So first is gonna be const expensed value.

  • No expense value is gonna be very similar to what we had in budget.

  • Now, the difference is this is not gonna be budget input.

  • It's gonna be expensive, but we have expensive put in an amount in, but so whatever the actual expenses on, whatever the amount for that expenses, So this not expense he put on again.

  • I suggest if you are have confusion where we're getting this, you can use the come on and find.

  • And you could just find the class that we're searching for, const amount value, so amount well, you and this is gonna be equal to a input amount, so amount input and again we're gonna use.

  • 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 we really want, we can cancel 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 eggs, if expense value isn't gonna be zero.

  • So if you're passing something that, uh, well, passing with no name, then we're gonna have.

  • Or so in this case, we're going to say amount value, so amount value.

  • And in this case, we're going to say this is equal to zero.

  • Last one is gonna me if the amount is less than zero, because these both of them are type number, so we can also put zero, but less than zero.

  • But this wouldn't make sense if we're trying to actually set up our budget so again, or operator on amount value is going to be equal to less then.

  • 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 have the feedback.

  • So this, in this case this is not gonna be budget feedback.

  • This is gonna be expense for your back and again, this is set up in the property's off our constructor.

  • So Let's go down on 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, Now is going to show the item.

  • So let's say this on still is gonna be complaining about some slow network.

  • Andi, we'll have expense feed by class list.

  • Now, After that, I would want to work with a encouraged him.

  • Also, this expense feedback inner html.

  • And then let's look att a template literal, since we can use the inner HTML and we're doing the same thing that we had before.

  • So we have paragraph values cannot be empty or negative.

  • This is gonna be passing.

  • And then, since we're using temple rituals, we can just write whatever tags would want over here and again.

  • Since we're doing the same thing as before, we need to reassign, so have constant self on.

  • This is gonna be equal to this because we're gonna be calling the same thing.

  • We're gonna have a sect time out.

  • Function on this.

  • Like I keep repeating, this function is going.

  • Expect a callback function.

  • All this callback function is gonna be run after specific amount of time, which is a second primer.

  • Get in our case, 4000 milliseconds, which is four seconds.

  • And since we already have covered the self on expense feedback again, we're still accessing the class or the instance of the class on.

  • We have a class list, and now, in this case, we would want remove, remove what we were doing.

  • Remove.

  • Well, it's simple enough.

  • We would want to remove the chauffeur item.

  • So as we say this, everything should be working 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 cannot be empty or negative, even though if only one of them is 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 2nd 1 So let's say that or let's try.

  • You know what?

  • Let's try adding a negative value.

  • So you fix the car on, still have the values kind of be empty or negative.

  • So basically, this is all we're doing.

  • We're just checking for the values.

  • Now, this was a first cold knock four leaf.

  • So this was if now we need to else because obviously there's gonna be cases more.

  • Hopefully, most time there's gonna be cases where all the values are there.

  • So let's do another variable.

  • This is gonna be a mouth.

  • Now we're getting back the amount value. 00:47:14.360 --> 00:4

and this project, we're gonna create a budget complication.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

Javascriptプロジェクトのチュートリアル。予算アプリ (Javascript Project Tutorial: Budget App)

  • 8 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語