1 00:00:28,580 --> 00:00:29,000 Turn off. 2 00:00:30,550 --> 00:00:35,590 We boarding certain functionalities from material QR code that we need in our application, first of 3 00:00:35,590 --> 00:00:38,590 them is typography and the mixed dyes and a box. 4 00:00:39,160 --> 00:00:47,080 So let's just import typography and apart from typography, we need to make styles. 5 00:00:51,000 --> 00:00:52,260 As well as the box. 6 00:00:53,790 --> 00:01:01,930 So now if I see a made a typo in the word typography Devi, you added B actually, it should be right 7 00:01:02,340 --> 00:01:02,750 now. 8 00:01:02,910 --> 00:01:06,390 Let's just create the first imported from our materials. 9 00:01:10,500 --> 00:01:11,190 Material you 10 00:01:14,130 --> 00:01:18,420 now inside this, we're going to have a functional component, let's just name it, concert balance. 11 00:01:22,060 --> 00:01:26,590 And this is going to receive a parameter and exploded. 12 00:01:31,850 --> 00:01:37,670 Now, as you might recall, in an outdoor jazz, we are transferring your transactions right and a balance 13 00:01:37,670 --> 00:01:39,050 component of your transfer. 14 00:01:39,320 --> 00:01:42,710 We are transferring transactions, so that's what we're going to do, structuring our balance. 15 00:01:43,280 --> 00:01:46,130 So let's just restructure the props that we're getting. 16 00:01:52,140 --> 00:01:55,560 No, it is going to even have a written statement, right? 17 00:01:59,480 --> 00:02:05,960 Now, before we do any before we go any further, we would like to calculate the amount of money that 18 00:02:05,960 --> 00:02:08,540 we have in our balance so that we can configure it. 19 00:02:08,810 --> 00:02:11,360 So for that purpose prior to a written statement. 20 00:02:13,560 --> 00:02:20,310 We'll just create a constant and this is going to have the amount of transactions or the money that 21 00:02:20,310 --> 00:02:25,860 we have in that account, so let's just transactions and mapping it to get the amount of money that 22 00:02:25,860 --> 00:02:31,140 we have and inside it, we're going to have transactions that transaction. 23 00:02:32,250 --> 00:02:40,350 And there's going to turn us transaction dark among its save. 24 00:02:42,140 --> 00:02:46,430 You might recall in our approach is the amount of money that we have. 25 00:02:48,060 --> 00:02:53,640 Is going to have an I.D. property, a text as that amount, so this is the one that we're targeting 26 00:02:53,640 --> 00:02:53,780 with. 27 00:02:54,570 --> 00:02:57,900 So let's head back to a balanced address and. 28 00:03:00,190 --> 00:03:05,110 For some reason, my pressure doesn't seem to be working, but let us see that see to it later. 29 00:03:07,050 --> 00:03:10,620 So this is a function that we are currently processing now. 30 00:03:11,550 --> 00:03:14,130 OK, so now packing them up along. 31 00:03:22,210 --> 00:03:26,350 Now we want the total amount of money out, so let's create another constant and name total. 32 00:03:29,410 --> 00:03:31,240 And we will have an amount. 33 00:03:33,020 --> 00:03:33,950 Not reduce. 34 00:03:39,800 --> 00:03:41,780 And inside the reduced they'll be having. 35 00:03:45,270 --> 00:03:45,870 Amount. 36 00:03:47,060 --> 00:03:47,990 And item. 37 00:03:50,200 --> 00:03:55,480 And this is going to give us a function, and this time will just amount plus. 38 00:03:57,600 --> 00:03:58,940 Because I'm owned. 39 00:03:59,800 --> 00:04:00,670 Plus the item. 40 00:04:05,080 --> 00:04:08,650 And this is going to be zero. 41 00:04:23,860 --> 00:04:25,090 Two fixed to. 42 00:04:27,620 --> 00:04:29,030 No, just put up a. 43 00:04:30,590 --> 00:04:33,140 Now I will be having a box inside a written statement. 44 00:04:36,430 --> 00:04:43,810 And this box is going to close a closing parameter and typography, no, this is going to have a class 45 00:04:43,810 --> 00:04:45,610 name that we are yet to configure. 46 00:04:45,610 --> 00:04:48,550 So let's not put it right now and we'll give it. 47 00:04:50,430 --> 00:04:53,490 A total of our balance amount that we have. 48 00:05:05,290 --> 00:05:09,420 They've put up a dollar sign and curly braces and total. 49 00:05:12,830 --> 00:05:17,330 Now, if you look at the line number five, you will see that it is having to do something right. 50 00:05:17,630 --> 00:05:22,760 So if you are aware about JavaScript, then you might know what to do something does it execute? 51 00:05:22,760 --> 00:05:28,040 A user supplied reduced callback function on each element of the error that we are passing to it and 52 00:05:28,040 --> 00:05:31,260 passing a return value from the calculations on preceding elements. 53 00:05:31,280 --> 00:05:35,540 So ultimately, what it does is that it sums up all the elements of it. 54 00:05:36,020 --> 00:05:40,190 So what we are doing over here is that we are summing up all the amount of money that we have. 55 00:05:42,270 --> 00:05:47,190 And if you are wondering what that to fixes for, so ultimately what it is going to do, it is going 56 00:05:47,190 --> 00:05:52,620 to fix our decimal point or to, for example, if I am having in my daughter look on a balance of forty 57 00:05:52,620 --> 00:05:55,680 seven point seven, seven six and I made it fixed for two. 58 00:05:56,400 --> 00:05:58,290 So what it it is going to return us. 59 00:05:58,290 --> 00:06:00,630 Forty seven, forty seven. 60 00:06:02,650 --> 00:06:04,720 Point seven, eight. 61 00:06:04,990 --> 00:06:09,880 Because I just fixed the drowning numbers to do so all that, I'm going to be getting the two decimal 62 00:06:09,880 --> 00:06:10,300 points. 63 00:06:10,780 --> 00:06:12,730 So that is what this to expansion function is. 64 00:06:13,390 --> 00:06:16,690 So that we have configured it now, it's time to make stiles into it application. 65 00:06:17,140 --> 00:06:18,550 So let's add styles for now. 66 00:06:19,710 --> 00:06:28,050 So let's head back outside our function and we'll be creating a contest use style. 67 00:06:34,380 --> 00:06:37,500 And we will be making styles, make styles. 68 00:06:37,770 --> 00:06:41,100 And this is again going to have an object. 69 00:06:45,050 --> 00:06:46,580 And let's just name it. 70 00:06:47,180 --> 00:06:48,800 That's just mean the key is balance. 71 00:06:53,060 --> 00:06:59,410 And seizes properties that we want in our balance, just the fun size property want. 72 00:07:00,760 --> 00:07:04,090 So then we give it up on stays of, let's say, about. 73 00:07:05,450 --> 00:07:05,870 Twenty. 74 00:07:08,670 --> 00:07:13,860 Now just hit save, and next thing will do is they structure this. 75 00:07:16,420 --> 00:07:18,760 In the second set of classes. 76 00:07:21,650 --> 00:07:23,960 And it is going to use stealth. 77 00:07:25,940 --> 00:07:29,990 And now inside the box typography. 78 00:07:31,810 --> 00:07:34,660 Will you add a class name of classes or balance?