1 00:00:00,300 --> 00:00:06,770 So now we will give these darling to our bottom component, but let us go to the next door, see us 2 00:00:06,780 --> 00:00:07,110 file. 3 00:00:07,140 --> 00:00:12,300 Now let me tell you, this will be the only file which will be responsible for all the global success 4 00:00:12,630 --> 00:00:13,860 across the application. 5 00:00:14,430 --> 00:00:19,710 We are not going to like, make separate or dedicated systems files for every other component because 6 00:00:20,280 --> 00:00:23,880 it's not as huge and so complex project that we should do that. 7 00:00:24,150 --> 00:00:27,510 Of course you can do it, and that's a very, very good practice. 8 00:00:27,780 --> 00:00:34,020 If you are creating a little big application, which is a little bit complex with like more than five 9 00:00:34,740 --> 00:00:39,690 components, if it has more than five components or even five components, you should definitely go 10 00:00:39,760 --> 00:00:47,400 and create like dedicated CIUSSS files for them, like the like, they could just separate styling to 11 00:00:47,400 --> 00:00:49,470 them inside of the components. 12 00:00:49,470 --> 00:00:52,770 For that, you can do that and then import it inside the main component. 13 00:00:52,770 --> 00:00:58,200 That is the very simple thing, and it's a very good practice and you should do it now. 14 00:00:58,590 --> 00:01:03,660 Coming to our application, we will be doing that inside the next door to see a ceasefire. 15 00:01:03,710 --> 00:01:05,940 And right now, you can see that it's completely empty. 16 00:01:06,390 --> 00:01:07,730 And let me minimize the. 17 00:01:09,550 --> 00:01:14,560 Yeah, now here we'll start styling our button component. 18 00:01:14,870 --> 00:01:15,160 No. 19 00:01:16,120 --> 00:01:23,170 Let me do that because this is the button and this does does not need any court, this is like native 20 00:01:23,170 --> 00:01:23,830 or default name. 21 00:01:24,330 --> 00:01:29,110 We we'll give it to the button on the side of this will be given. 22 00:01:33,620 --> 00:01:37,810 And that will be in hex code, that will be if. 23 00:01:39,070 --> 00:01:40,050 The if. 24 00:01:43,000 --> 00:01:44,650 Yeah, we have we have. 25 00:01:46,530 --> 00:01:47,520 Like a white collar. 26 00:01:49,440 --> 00:01:50,790 We'll be having a one size. 27 00:01:52,890 --> 00:01:54,750 That will be off point it IDM. 28 00:01:58,780 --> 00:02:02,650 Next will be having like water, we don't want any water that should be none. 29 00:02:05,350 --> 00:02:05,890 We save it. 30 00:02:06,670 --> 00:02:09,430 And when we check if there is something happening here. 31 00:02:12,750 --> 00:02:14,700 And it became too small. 32 00:02:17,010 --> 00:02:19,280 Doing what he will give, some would do it. 33 00:02:22,210 --> 00:02:24,060 But here or there is none. 34 00:02:24,610 --> 00:02:25,690 What Radius will go? 35 00:02:27,520 --> 00:02:29,830 And that will be of three audio. 36 00:02:33,230 --> 00:02:38,720 And will give the modern and that will be off point tourism. 37 00:02:41,340 --> 00:02:41,730 OK. 38 00:02:43,950 --> 00:02:45,300 Next, we'll be having the background. 39 00:02:47,320 --> 00:02:52,900 Just the background and the background color, and here will be will be giving the color, so that will 40 00:02:52,900 --> 00:02:54,890 be zero e. 41 00:02:55,870 --> 00:02:58,390 It'll be fun. 42 00:02:58,730 --> 00:02:59,020 Be. 43 00:03:00,590 --> 00:03:01,460 Would be the school. 44 00:03:02,700 --> 00:03:05,610 And let me save and see if there is at least something. 45 00:03:07,330 --> 00:03:11,920 It is it is what that's too small, we'll give it like size. 46 00:03:14,020 --> 00:03:15,040 Let's go back here. 47 00:03:17,710 --> 00:03:25,660 Let me get something to it, like the minimum with some men, with just the minimum men with simply 48 00:03:25,660 --> 00:03:28,540 means the minimum bid that will be of 80 pixels. 49 00:03:30,900 --> 00:03:31,520 OK. 50 00:03:33,380 --> 00:03:36,230 Let me save it and see if there is any changes. 51 00:03:38,210 --> 00:03:38,370 Are. 52 00:03:40,150 --> 00:03:47,760 And I warned the council to the point that whenever I like bring my closer to it, they should change 53 00:03:47,770 --> 00:03:48,240 to point. 54 00:03:49,280 --> 00:03:50,590 So let me do it. 55 00:03:54,710 --> 00:03:55,100 First. 56 00:03:58,030 --> 00:03:58,480 Point. 57 00:04:01,440 --> 00:04:02,370 There certainly is a bit. 58 00:04:04,250 --> 00:04:04,820 And. 59 00:04:09,200 --> 00:04:16,100 Is like nail biting them, but this is not we won't actually go on a different thing. 60 00:04:16,670 --> 00:04:21,590 For now, we cleared some more crises like the button, but a not so. 61 00:04:22,580 --> 00:04:23,480 Thebarton rapper. 62 00:04:26,030 --> 00:04:28,270 So here we will be hitting the button. 63 00:04:32,450 --> 00:04:37,130 But to put it inside of this, that will be a display of flags. 64 00:04:38,650 --> 00:04:42,750 And after that, that will be the line items. 65 00:04:45,710 --> 00:04:47,900 We'll be aligning the items to this end to basically. 66 00:04:50,920 --> 00:04:54,340 Benton and justifying the content to senator. 67 00:04:57,860 --> 00:04:58,220 OK. 68 00:04:59,090 --> 00:05:01,100 And we'll be giving the padding as. 69 00:05:02,240 --> 00:05:03,110 Two audio. 70 00:05:05,980 --> 00:05:06,570 Tourism. 71 00:05:08,390 --> 00:05:09,650 And we have to see it. 72 00:05:10,800 --> 00:05:18,780 And all I can see that is happening, not there, because this class is being created somewhere else, 73 00:05:18,780 --> 00:05:24,000 not inside the bottom component, but that is the active class name actually so. 74 00:05:25,240 --> 00:05:25,810 Or that? 75 00:05:26,850 --> 00:05:31,170 Like this, this is where this pattern will be imported and wrapped around. 76 00:05:31,690 --> 00:05:37,680 So right now, we have just imported inside the U.S., but that is not how we will import. 77 00:05:38,040 --> 00:05:41,280 That will be a different way of using context and all. 78 00:05:41,490 --> 00:05:45,550 So right now, we are just giving the CSIS that perspective of how will imported. 79 00:05:46,410 --> 00:05:47,700 So let me get that. 80 00:05:50,280 --> 00:05:52,080 Joe Barton. 81 00:05:55,860 --> 00:05:56,490 But Apple. 82 00:05:58,870 --> 00:05:59,410 Barton. 83 00:06:01,370 --> 00:06:01,560 The. 84 00:06:03,520 --> 00:06:04,570 And instead of that. 85 00:06:05,480 --> 00:06:06,480 That will be a color. 86 00:06:08,480 --> 00:06:09,740 And that will be seen. 87 00:06:09,770 --> 00:06:10,430 We'll see, you will see. 88 00:06:11,960 --> 00:06:13,070 Not always easy to see. 89 00:06:13,610 --> 00:06:13,880 Yeah. 90 00:06:14,300 --> 00:06:17,180 This will be declared next that it will be a background color. 91 00:06:21,240 --> 00:06:22,780 Background color. 92 00:06:23,890 --> 00:06:25,200 And that will be seen. 93 00:06:26,210 --> 00:06:31,550 The thing we have you no, we have not ruled that, will we see nine? 94 00:06:32,650 --> 00:06:34,360 And CC A. 95 00:06:35,900 --> 00:06:42,470 Similar to white and grayish color, we'll be having a border of one pixel border. 96 00:06:45,250 --> 00:06:46,750 One pixel solid. 97 00:06:48,370 --> 00:06:49,900 Remember, the model bought a solid. 98 00:06:52,290 --> 00:06:57,690 And then we have the other 060 see this one right here. 99 00:07:00,520 --> 00:07:03,940 That's completely fine, because. 100 00:07:05,960 --> 00:07:07,130 It doesn't matter much. 101 00:07:10,190 --> 00:07:12,560 This looks something like this, you see. 102 00:07:16,160 --> 00:07:16,550 This one. 103 00:07:17,670 --> 00:07:18,390 Completely fine. 104 00:07:19,260 --> 00:07:22,260 And I say it, and of course, this will not be rendered on the browser. 105 00:07:23,940 --> 00:07:30,330 Now, you know, the reason why I'm doing this, not only because I we will be creating the active status 106 00:07:30,330 --> 00:07:36,270 to the button inside the context, and that time we don't need to come back again and. 107 00:07:37,520 --> 00:07:39,770 Style buttons again and again. 108 00:07:40,310 --> 00:07:42,710 So that is why I am doing it right now. 109 00:07:43,250 --> 00:07:53,360 Now let me just show you a guide to which you'll be using to get the lake effect of. 110 00:07:55,120 --> 00:08:03,460 React like the countdown timer, because we'll be using this hazard that we show you. 111 00:08:10,040 --> 00:08:15,590 You basically get this this you will be using this package from npm. 112 00:08:16,780 --> 00:08:23,680 So you can see here this is the package reducing the so-called reject countdown timer published two 113 00:08:23,680 --> 00:08:24,310 months ago. 114 00:08:25,210 --> 00:08:27,760 And you can see the downloads are like. 115 00:08:28,780 --> 00:08:29,190 OK. 116 00:08:30,760 --> 00:08:32,860 So you can see this is how this works. 117 00:08:34,310 --> 00:08:40,790 This is all we will be looking at the data, and you can install it by just one simple command. 118 00:08:41,660 --> 00:08:44,980 That is npm install the account countdown timer. 119 00:08:45,590 --> 00:08:46,060 OK. 120 00:08:47,130 --> 00:08:50,160 So this is the this is the command. 121 00:08:51,140 --> 00:08:53,870 So let me see their documentation. 122 00:08:56,190 --> 00:09:00,120 There's the basic usage, like the colors and all all of that you can get from here. 123 00:09:00,610 --> 00:09:07,800 There's just no like extra styling from the SS for this, and the styling is done here only like basically 124 00:09:07,800 --> 00:09:09,600 the colors and all, you'd be done here only. 125 00:09:10,910 --> 00:09:17,330 You can see that are many, many options and many, many designs, which you can choose. 126 00:09:17,930 --> 00:09:23,510 So what you can do is you can just copy this particular command from here by clicking on this and you 127 00:09:23,510 --> 00:09:26,600 can see the copy to clipboard message will pop up. 128 00:09:27,110 --> 00:09:29,360 And now you can just come here. 129 00:09:30,710 --> 00:09:32,150 And opening up the terminal. 130 00:09:33,720 --> 00:09:35,550 And they're always running. 131 00:09:35,790 --> 00:09:37,110 Let me open the door. 132 00:09:41,400 --> 00:09:46,350 Then you need to go to the project folder where your project is there, so for me, it's project and 133 00:09:46,350 --> 00:09:47,010 then this. 134 00:09:48,420 --> 00:09:50,190 You can check it also by the Alaskan mine. 135 00:09:50,670 --> 00:09:56,280 Now what you will do is you will base that particular command, which you copied from there and you 136 00:09:56,280 --> 00:09:57,540 can see this and PM. 137 00:09:57,810 --> 00:10:02,820 I, for instance, you can write, install or you can write what will do the same job. 138 00:10:03,240 --> 00:10:06,240 So install the get countdown timer. 139 00:10:06,330 --> 00:10:06,990 And that's it. 140 00:10:07,320 --> 00:10:11,280 So once you hit enter, it will install this package on your project. 141 00:10:11,700 --> 00:10:16,540 Now I have only done this, so I know to like, do that again. 142 00:10:17,340 --> 00:10:20,580 It will just take like two to three seconds, or maybe just five seconds. 143 00:10:20,880 --> 00:10:21,930 And that will be installed. 144 00:10:22,440 --> 00:10:24,990 And you can see that is like not too much. 145 00:10:25,530 --> 00:10:27,810 Over your tester, only to give me. 146 00:10:27,900 --> 00:10:31,230 So there's not like so bulky package. 147 00:10:32,130 --> 00:10:39,480 So that is what just install this and then we will do the next of the things and we will meet in the 148 00:10:39,480 --> 00:10:47,070 next review where we'll be making use of this particular like we have done on timer and we'll be implementing 149 00:10:47,070 --> 00:10:49,050 that to our project for. 150 00:10:50,390 --> 00:10:57,480 This is like a very easy thing to do, but you need to understand like the basics and on how to configure 151 00:10:57,480 --> 00:10:59,960 it and how to use that in our website. 152 00:11:00,590 --> 00:11:03,410 Otherwise that could have been done using the in Dallas could. 153 00:11:04,700 --> 00:11:06,070 The package hasn't made our work. 154 00:11:06,080 --> 00:11:08,060 So what do you think we'll see in the next video?