1 00:00:00,900 --> 00:00:08,580 OK, so next, we'll be creating the transaction component to how to add transaction and all. 2 00:00:09,120 --> 00:00:12,660 So for that, we create another file that will be. 3 00:00:14,140 --> 00:00:16,150 A transaction, Dargis. 4 00:00:20,820 --> 00:00:23,100 That guard is. 5 00:00:27,060 --> 00:00:27,760 Are there? 6 00:00:32,690 --> 00:00:38,540 Now we create a form basically for being just. 7 00:00:39,620 --> 00:00:40,580 We don't need to do. 8 00:00:41,670 --> 00:00:49,630 Understand took sugar from of this that walks next will and each bring your age to, so that will have 9 00:00:49,630 --> 00:00:51,400 everything like add. 10 00:00:53,070 --> 00:00:53,700 New. 11 00:00:54,910 --> 00:00:56,440 Or relatively small only. 12 00:00:57,620 --> 00:01:00,680 On the channel transaction. 13 00:01:02,360 --> 00:01:05,510 After each three will be taken off form, basically. 14 00:01:07,260 --> 00:01:07,850 All right. 15 00:01:08,460 --> 00:01:14,850 So in the form, right now, we are not adding any functionality, we're just adding a phone for the 16 00:01:14,850 --> 00:01:19,920 sake of the UI and everything else we do like neutrons inside the form. 17 00:01:20,370 --> 00:01:24,690 We have IBM, which is in the form control. 18 00:01:27,590 --> 00:01:28,010 Okay. 19 00:01:28,220 --> 00:01:37,700 Inside the form, going to them, we have a label basically, so it will contain labels like what? 20 00:01:37,820 --> 00:01:38,900 What is the label right? 21 00:01:39,320 --> 00:01:45,920 So what is the title of the of the transaction, which I showed you in the introduction to reduce what 22 00:01:45,920 --> 00:01:53,780 we will have a label and its HTML four is a text basically text inside. 23 00:01:53,780 --> 00:02:01,060 This will provide the heading for the label to be displayed, so that will be name, but it. 24 00:02:02,850 --> 00:02:11,460 So after that, we'll have an input field so we can have an input field in this type, ex only value 25 00:02:11,460 --> 00:02:14,310 and everything will add later, later on as well. 26 00:02:14,790 --> 00:02:17,070 For now, we'll just add a placeholder. 27 00:02:17,820 --> 00:02:22,140 So placeholder is whatever the text which is displayed when the form is empty, right? 28 00:02:22,380 --> 00:02:26,390 And we have not typed anything but whatever we see in that form. 29 00:02:26,400 --> 00:02:29,500 So that is the place we laid the. 30 00:02:31,100 --> 00:02:32,450 And the label. 31 00:02:33,540 --> 00:02:34,640 All right. 32 00:02:35,180 --> 00:02:44,090 So now this div is basically complete, so next we'll move to another div, so that will also be of 33 00:02:44,330 --> 00:02:45,260 some control. 34 00:02:47,830 --> 00:02:51,910 And this will mean this will be for like adding, right. 35 00:02:52,330 --> 00:02:55,260 So we'll have this for the amount one. 36 00:02:55,700 --> 00:03:01,420 So next, we will have a label another for is to mail for come. 37 00:03:05,270 --> 00:03:07,540 And you can enable also. 38 00:03:09,870 --> 00:03:15,720 Well, for a moment and in the label, you will right amount for. 39 00:03:17,680 --> 00:03:26,560 Found and but what I need to show is that I need to give the user information that for adding the income, 40 00:03:26,560 --> 00:03:34,600 you will need to provide a plus sign with like before the amount and before like spending or when we 41 00:03:34,600 --> 00:03:38,080 provide the expense before that will provide a negative signs. 42 00:03:38,200 --> 00:03:40,540 Negative sign like in the beginning. 43 00:03:40,570 --> 00:03:40,900 All right. 44 00:03:41,350 --> 00:03:49,060 Let me just type it out so that I, whether I like before it, amount every day of this. 45 00:03:49,960 --> 00:03:55,500 Inside this, I will type a negative sign in that point of time so that will I will provide in the beta. 46 00:03:55,510 --> 00:03:58,600 So B is that all it will make the text forward. 47 00:03:59,110 --> 00:04:03,640 So I will close that this thing later and excited to a slash. 48 00:04:04,310 --> 00:04:08,920 So like the plus and minus and would be a bold but the slash, the normal boring. 49 00:04:08,930 --> 00:04:12,550 That is why I am providing like to be tagged with your. 50 00:04:12,580 --> 00:04:13,600 So I copy this. 51 00:04:13,960 --> 00:04:17,080 Oh my God, what I've done, you just copy it. 52 00:04:17,650 --> 00:04:24,790 And next, I'll paste it and I'll provide the plus sign as simple as that. 53 00:04:25,150 --> 00:04:28,990 So after that, we'll provide the information. 54 00:04:30,420 --> 00:04:36,810 So I'll provide some space here, so as you all know that in a statement, if you provide like one space 55 00:04:36,810 --> 00:04:40,790 or two or three space, it counts as the one space only. 56 00:04:40,800 --> 00:04:46,180 So if you provide one space or more than one space, it will count it as just one space. 57 00:04:46,200 --> 00:04:51,960 So if you if you want to provide more than one spaces, so then you need to ride this, which is the 58 00:04:51,960 --> 00:04:53,040 non-working space. 59 00:04:53,040 --> 00:05:01,740 So eight percent and non breaking space and and BSB, what does it stand for? 60 00:05:02,640 --> 00:05:06,850 Non breaking space and then us in my column. 61 00:05:07,270 --> 00:05:12,470 And I want to provide one more, so it will be non breaking space and semicolon. 62 00:05:13,080 --> 00:05:15,390 Okay, after that, I want to provide that information. 63 00:05:15,390 --> 00:05:17,160 So negative is for. 64 00:05:18,710 --> 00:05:24,760 Expense and plus is for income, basically. 65 00:05:24,990 --> 00:05:29,270 So, all right, and then of course, this is tax, OK? 66 00:05:29,300 --> 00:05:31,280 This is nothing like adios under dawn. 67 00:05:31,280 --> 00:05:32,630 Confused with that? 68 00:05:33,650 --> 00:05:34,690 This is just a label. 69 00:05:34,700 --> 00:05:35,960 OK, so after that? 70 00:05:38,590 --> 00:05:41,830 After that, I'll provide basic like input field. 71 00:05:43,410 --> 00:05:47,040 Input and hype is next. 72 00:05:48,060 --> 00:05:50,190 That is basically no more text. 73 00:05:51,340 --> 00:05:55,240 Gore's head, no user will enter the amount. 74 00:05:55,300 --> 00:06:00,190 OK, so it's a no, and the placeholder will be. 75 00:06:02,860 --> 00:06:03,820 And that amount. 76 00:06:05,970 --> 00:06:06,780 Straightforward. 77 00:06:07,650 --> 00:06:09,150 And I'm on. 78 00:06:10,890 --> 00:06:14,840 OK, so we are done with the amount like foam. 79 00:06:15,150 --> 00:06:16,530 Next, we will have a button. 80 00:06:17,400 --> 00:06:25,050 So after this, they will have a button or button would be will also provide a class name for button. 81 00:06:25,080 --> 00:06:30,530 Now we are providing this class name because we want to tailor components according to that only and 82 00:06:30,540 --> 00:06:38,640 providing the goss names because I designed this app earlier and I know like what is the class news 83 00:06:38,640 --> 00:06:39,000 about? 84 00:06:39,150 --> 00:06:43,080 So that's why I am providing this class in that class name. 85 00:06:43,080 --> 00:06:43,920 Would it be in? 86 00:06:45,940 --> 00:06:50,590 And how do you write AG transaction? 87 00:06:52,240 --> 00:06:59,830 And then we'll just save it for our work is done, so do is just I'm hard doing things right now, OK, 88 00:07:00,400 --> 00:07:03,480 now I'm not providing any logic or script. 89 00:07:03,580 --> 00:07:05,410 This is just pure GSX. 90 00:07:05,950 --> 00:07:09,520 I'm not providing any JavaScript or any function or calling something like that. 91 00:07:09,820 --> 00:07:12,190 We will do it in the coming like time. 92 00:07:12,560 --> 00:07:13,720 So don't worry about it. 93 00:07:14,530 --> 00:07:16,240 So this component is done. 94 00:07:16,710 --> 00:07:21,010 Oh, now what we should do is we should create another component. 95 00:07:22,270 --> 00:07:28,210 The next will create a string component, which will contain the history of our transactions, so for 96 00:07:28,210 --> 00:07:33,280 that, I create another component that will be transaction list. 97 00:07:34,830 --> 00:07:36,110 Transaction. 98 00:07:37,260 --> 00:07:38,540 This started, yes. 99 00:07:39,510 --> 00:07:44,420 I'll import the boilerplate gold, and that will be the AFC. 100 00:07:45,570 --> 00:07:47,460 And here I'll write. 101 00:07:48,730 --> 00:07:52,360 Basically, an east tree, so that will see history. 102 00:07:54,270 --> 00:08:03,780 And after the H3, we'll have list unordered list inside the on order list, we'll have art history 103 00:08:03,780 --> 00:08:09,450 and also right now, I'm just leaving it something any, any random number. 104 00:08:09,540 --> 00:08:15,980 And so because in the coming time, we'll adding, we'll be adding a functionality like we'll add two 105 00:08:15,990 --> 00:08:16,590 components. 106 00:08:17,100 --> 00:08:19,140 One will become containing the history. 107 00:08:19,140 --> 00:08:23,370 And now from that from that, we'll be mapping the data hub. 108 00:08:23,890 --> 00:08:25,290 So that will do so. 109 00:08:25,290 --> 00:08:32,640 We are leaving it like this for now, but we'll work on it in like we'll work on it. 110 00:08:33,450 --> 00:08:38,490 OK, so now when you're done with this and next, we will create our. 111 00:08:39,720 --> 00:08:41,410 Index two. 112 00:08:41,970 --> 00:08:46,080 Let me just show you how this app is working in the browser. 113 00:08:47,110 --> 00:08:49,170 How things are looking. 114 00:08:50,770 --> 00:08:51,940 But as a member of the. 115 00:08:53,760 --> 00:09:01,410 And it is right now we see nothing, and it is because we have not important components in the Abdel-Aziz 116 00:09:01,410 --> 00:09:01,740 file. 117 00:09:02,430 --> 00:09:04,710 Let me just import them here. 118 00:09:05,670 --> 00:09:07,320 Inside there's death. 119 00:09:10,610 --> 00:09:15,760 Okay, so here, when the import for first of all, we need her does. 120 00:09:18,900 --> 00:09:23,850 I wondered why it's not important like our polls, you know? 121 00:09:24,920 --> 00:09:26,970 But it's not doing it. 122 00:09:32,270 --> 00:09:38,960 And we because we are providing inside the so let me try to this true, and I cannot provide this. 123 00:09:40,300 --> 00:09:42,790 But now they import. 124 00:09:45,210 --> 00:09:45,500 And. 125 00:09:50,280 --> 00:09:51,510 What is wrong here? 126 00:09:52,350 --> 00:09:54,300 First of all, let me just provide this. 127 00:09:56,400 --> 00:09:57,000 I heard a. 128 00:09:58,980 --> 00:10:00,240 Well, I hope it is. 129 00:10:00,420 --> 00:10:04,050 It's important, no, it's not on board, I have to import it manually. 130 00:10:04,050 --> 00:10:07,530 Sometimes what it does is it auto imports import. 131 00:10:08,700 --> 00:10:10,680 And from. 132 00:10:13,000 --> 00:10:16,840 Components and civic. 133 00:10:17,830 --> 00:10:20,970 Let us just see things that. 134 00:10:22,960 --> 00:10:24,190 On the browser. 135 00:10:26,950 --> 00:10:29,350 OK, we have a problem. 136 00:10:29,750 --> 00:10:34,930 But what is the problem because it shows it does not have a default for export? 137 00:10:35,980 --> 00:10:37,340 Let me go to the head of. 138 00:10:38,840 --> 00:10:39,630 Oh, OK. 139 00:10:39,970 --> 00:10:41,270 Export before. 140 00:10:42,950 --> 00:10:47,670 To avoid default here or if I can just go grab produce. 141 00:10:50,110 --> 00:10:50,390 OK. 142 00:10:50,650 --> 00:10:53,050 Had I heard a word or. 143 00:10:55,930 --> 00:10:57,160 And now when I save. 144 00:11:03,490 --> 00:11:05,710 What I can do is I can just provide. 145 00:11:06,850 --> 00:11:07,990 Currently, this is out. 146 00:11:09,230 --> 00:11:14,810 It will work because in here we have not provided our default export. 147 00:11:15,440 --> 00:11:21,620 Believe me, I have created this function of this component using the fact that all one. 148 00:11:21,720 --> 00:11:29,660 OK, if you provide a nice normal function and we just provide the beef export default behind like in 149 00:11:29,660 --> 00:11:35,330 the beginning of the function, so it does automatically like exporters as a default function. 150 00:11:36,120 --> 00:11:37,820 So now when we go to the browser. 151 00:11:39,690 --> 00:11:41,530 We see each one. 152 00:11:41,580 --> 00:11:46,530 Obviously, it's not in the right place, but we'll make it right way. 153 00:11:47,630 --> 00:11:52,040 Don't worry about the styling, we will do the styling later on for. 154 00:11:53,680 --> 00:11:58,480 Next, first of all, let me just wrap it inside this. 155 00:11:59,760 --> 00:12:04,920 OK, and next, we will have the balance component, I guess. 156 00:12:13,340 --> 00:12:15,410 My auto import is not working. 157 00:12:15,680 --> 00:12:17,420 That's the all time consuming. 158 00:12:18,710 --> 00:12:19,020 Yeah. 159 00:12:20,780 --> 00:12:21,670 Oh, if I save. 160 00:12:26,070 --> 00:12:26,750 Who? 161 00:12:29,340 --> 00:12:30,380 There's an error. 162 00:12:32,280 --> 00:12:36,800 What I need to do is I don't to just call this component to. 163 00:12:39,880 --> 00:12:41,130 It auto imports. 164 00:12:41,310 --> 00:12:42,240 Once you click it. 165 00:12:44,260 --> 00:12:44,560 Yeah. 166 00:12:45,740 --> 00:12:47,780 And you need to grab this inside this. 167 00:12:49,040 --> 00:12:55,610 Dave, like it's a sin tactic to go form, so you can just provide this instead of a live. 168 00:12:57,040 --> 00:12:58,180 So that will work for. 169 00:13:05,410 --> 00:13:06,640 Oh, OK. 170 00:13:06,700 --> 00:13:07,600 Why is swinging it? 171 00:13:11,530 --> 00:13:15,620 I do okay because I deleted it by mistake. 172 00:13:17,150 --> 00:13:21,710 I want to read this closing back now when I go to the browser. 173 00:13:22,460 --> 00:13:25,730 You can see the life balance component has also been rendered. 174 00:13:26,570 --> 00:13:31,160 Now we want to know something else that is. 175 00:13:32,890 --> 00:13:33,910 Income expense. 176 00:13:35,070 --> 00:13:39,330 So really important, uh, income. 177 00:13:43,360 --> 00:13:49,090 If you wait for like one or two seconds, it gives you an option to automatically like while you're 178 00:13:49,090 --> 00:13:56,140 typing on something like this one with this icon, just click on it or head and it'll ordering 14 or 179 00:13:56,140 --> 00:13:56,260 so. 180 00:13:56,260 --> 00:13:57,640 That will save a lot of time. 181 00:13:58,420 --> 00:14:05,860 Then I just close it, and when I go back to the browser, you can see that is something similar to 182 00:14:05,860 --> 00:14:06,910 what we have. 183 00:14:08,410 --> 00:14:10,840 So things are going pretty well so far. 184 00:14:12,890 --> 00:14:19,340 Next, we will have this transaction list, so we'll import this. 185 00:14:21,300 --> 00:14:23,580 Transaction list. 186 00:14:24,120 --> 00:14:32,880 And I'll save it, and I'll go back to the browser and you can see that is something called as history. 187 00:14:33,840 --> 00:14:36,210 So things are going pretty well so far. 188 00:14:36,840 --> 00:14:41,340 And now Connect will create context, a global context.