1
00:00:11,110 --> 00:00:16,360
Now, before we do anything, let's just put up a boilerplate so that it is easy for us to return the

2
00:00:16,360 --> 00:00:23,920
result on a screen, so let's just create a box and we'll be adding last name to it later on when we'll

3
00:00:23,920 --> 00:00:29,560
be just figuring out our make styles and inside this box component, we are going to have a card component

4
00:00:29,800 --> 00:00:33,580
that we just imported from a module material.

5
00:00:34,660 --> 00:00:38,020
And inside this card component, we're going to have the card contained.

6
00:00:39,040 --> 00:00:41,410
OK, so we have a card component, card content.

7
00:00:41,440 --> 00:00:46,330
Now you might recall that there were two content in our card, right when was fired expense column,

8
00:00:46,330 --> 00:00:47,890
an advice for income column.

9
00:00:48,100 --> 00:00:51,520
The amount of money that we have left in that account, as well as the amount of money that we have

10
00:00:51,520 --> 00:00:51,970
spent.

11
00:00:52,510 --> 00:00:54,100
And that is going to return our total.

12
00:00:54,640 --> 00:00:58,810
So on the left side, it was then come in on the right side, it was the expense.

13
00:00:59,050 --> 00:01:06,400
So in our left card content, we will be having first or typography, and this typography is going to

14
00:01:07,090 --> 00:01:11,380
show the income, the amount of money that we have left in our.

15
00:01:11,800 --> 00:01:19,030
So the amount of money that we have earned and outside the topography will be just another type of topography.

16
00:01:19,510 --> 00:01:25,780
And this topography is going to show our income will be making up code that is going to dynamically

17
00:01:25,780 --> 00:01:26,500
render that income.

18
00:01:26,510 --> 00:01:28,840
But for now, let's just put up a hardcoded value.

19
00:01:30,970 --> 00:01:37,540
And we have to topographies and we'll be having another card component, so let's just copy this entire

20
00:01:37,540 --> 00:01:38,080
segment.

21
00:01:39,340 --> 00:01:41,500
And pasted just beneath it.

22
00:01:43,110 --> 00:01:46,110
But this time, rather than the income, will be higher in the expenses.

23
00:01:50,820 --> 00:01:53,250
And then again, it is going to have expenses.

24
00:01:58,580 --> 00:02:01,940
It needs to have a negative sign as well as this needs to have a positive thing.

25
00:02:02,480 --> 00:02:04,910
So we have successfully created our boilerplate.

26
00:02:04,910 --> 00:02:11,360
Now it's time to add functions to our app and this is going to be transactions.