OK, so next, we'll be creating the transaction component to how to add transaction and all.
So for that, we create another file that will be.
A transaction, Dargis.
That guard is.
Are there?
Now we create a form basically for being just.
We don't need to do.
Understand took sugar from of this that walks next will and each bring your age to, so that will have
everything like add.
New.
Or relatively small only.
On the channel transaction.
After each three will be taken off form, basically.
All right.
So in the form, right now, we are not adding any functionality, we're just adding a phone for the
sake of the UI and everything else we do like neutrons inside the form.
We have IBM, which is in the form control.
Okay.
Inside the form, going to them, we have a label basically, so it will contain labels like what?
What is the label right?
So what is the title of the of the transaction, which I showed you in the introduction to reduce what
we will have a label and its HTML four is a text basically text inside.
This will provide the heading for the label to be displayed, so that will be name, but it.
So after that, we'll have an input field so we can have an input field in this type, ex only value
and everything will add later, later on as well.
For now, we'll just add a placeholder.
So placeholder is whatever the text which is displayed when the form is empty, right?
And we have not typed anything but whatever we see in that form.
So that is the place we laid the.
And the label.
All right.
So now this div is basically complete, so next we'll move to another div, so that will also be of
some control.
And this will mean this will be for like adding, right.
So we'll have this for the amount one.
So next, we will have a label another for is to mail for come.
And you can enable also.
Well, for a moment and in the label, you will right amount for.
Found and but what I need to show is that I need to give the user information that for adding the income,
you will need to provide a plus sign with like before the amount and before like spending or when we
provide the expense before that will provide a negative signs.
Negative sign like in the beginning.
All right.
Let me just type it out so that I, whether I like before it, amount every day of this.
Inside this, I will type a negative sign in that point of time so that will I will provide in the beta.
So B is that all it will make the text forward.
So I will close that this thing later and excited to a slash.
So like the plus and minus and would be a bold but the slash, the normal boring.
That is why I am providing like to be tagged with your.
So I copy this.
Oh my God, what I've done, you just copy it.
And next, I'll paste it and I'll provide the plus sign as simple as that.
So after that, we'll provide the information.
So I'll provide some space here, so as you all know that in a statement, if you provide like one space
or two or three space, it counts as the one space only.
So if you provide one space or more than one space, it will count it as just one space.
So if you if you want to provide more than one spaces, so then you need to ride this, which is the
non-working space.
So eight percent and non breaking space and and BSB, what does it stand for?
Non breaking space and then us in my column.
And I want to provide one more, so it will be non breaking space and semicolon.
Okay, after that, I want to provide that information.
So negative is for.
Expense and plus is for income, basically.
So, all right, and then of course, this is tax, OK?
This is nothing like adios under dawn.
Confused with that?
This is just a label.
OK, so after that?
After that, I'll provide basic like input field.
Input and hype is next.
That is basically no more text.
Gore's head, no user will enter the amount.
OK, so it's a no, and the placeholder will be.
And that amount.
Straightforward.
And I'm on.
OK, so we are done with the amount like foam.
Next, we will have a button.
So after this, they will have a button or button would be will also provide a class name for button.
Now we are providing this class name because we want to tailor components according to that only and
providing the goss names because I designed this app earlier and I know like what is the class news
about?
So that's why I am providing this class in that class name.
Would it be in?
And how do you write AG transaction?
And then we'll just save it for our work is done, so do is just I'm hard doing things right now, OK,
now I'm not providing any logic or script.
This is just pure GSX.
I'm not providing any JavaScript or any function or calling something like that.
We will do it in the coming like time.
So don't worry about it.
So this component is done.
Oh, now what we should do is we should create another component.
The next will create a string component, which will contain the history of our transactions, so for
that, I create another component that will be transaction list.
Transaction.
This started, yes.
I'll import the boilerplate gold, and that will be the AFC.
And here I'll write.
Basically, an east tree, so that will see history.
And after the H3, we'll have list unordered list inside the on order list, we'll have art history
and also right now, I'm just leaving it something any, any random number.
And so because in the coming time, we'll adding, we'll be adding a functionality like we'll add two
components.
One will become containing the history.
And now from that from that, we'll be mapping the data hub.
So that will do so.
We are leaving it like this for now, but we'll work on it in like we'll work on it.
OK, so now when you're done with this and next, we will create our.
Index two.
Let me just show you how this app is working in the browser.
How things are looking.
But as a member of the.
And it is right now we see nothing, and it is because we have not important components in the Abdel-Aziz
file.
Let me just import them here.
Inside there's death.
Okay, so here, when the import for first of all, we need her does.
I wondered why it's not important like our polls, you know?
But it's not doing it.
And we because we are providing inside the so let me try to this true, and I cannot provide this.
But now they import.
And.
What is wrong here?
First of all, let me just provide this.
I heard a.
Well, I hope it is.
It's important, no, it's not on board, I have to import it manually.
Sometimes what it does is it auto imports import.
And from.
Components and civic.
Let us just see things that.
On the browser.
OK, we have a problem.
But what is the problem because it shows it does not have a default for export?
Let me go to the head of.
Oh, OK.
Export before.
To avoid default here or if I can just go grab produce.
OK.
Had I heard a word or.
And now when I save.
What I can do is I can just provide.
Currently, this is out.
It will work because in here we have not provided our default export.
Believe me, I have created this function of this component using the fact that all one.
OK, if you provide a nice normal function and we just provide the beef export default behind like in
the beginning of the function, so it does automatically like exporters as a default function.
So now when we go to the browser.
We see each one.
Obviously, it's not in the right place, but we'll make it right way.
Don't worry about the styling, we will do the styling later on for.
Next, first of all, let me just wrap it inside this.
OK, and next, we will have the balance component, I guess.
My auto import is not working.
That's the all time consuming.
Yeah.
Oh, if I save.
Who?
There's an error.
What I need to do is I don't to just call this component to.
It auto imports.
Once you click it.
Yeah.
And you need to grab this inside this.
Dave, like it's a sin tactic to go form, so you can just provide this instead of a live.
So that will work for.
Oh, OK.
Why is swinging it?
I do okay because I deleted it by mistake.
I want to read this closing back now when I go to the browser.
You can see the life balance component has also been rendered.
Now we want to know something else that is.
Income expense.
So really important, uh, income.
If you wait for like one or two seconds, it gives you an option to automatically like while you're
typing on something like this one with this icon, just click on it or head and it'll ordering 14 or
so.
That will save a lot of time.
Then I just close it, and when I go back to the browser, you can see that is something similar to
what we have.
So things are going pretty well so far.
Next, we will have this transaction list, so we'll import this.
Transaction list.
And I'll save it, and I'll go back to the browser and you can see that is something called as history.
So things are going pretty well so far.
And now Connect will create context, a global context.