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.