1 00:00:00,550 --> 00:00:05,350 OK, so now let's move to the north component, which we left and complete. 2 00:00:06,160 --> 00:00:12,280 So inside of here, inside the north component or bust, let us create the basic structure. 3 00:00:12,790 --> 00:00:15,580 And later on, we'll give some functionality to it. 4 00:00:16,150 --> 00:00:16,360 Yeah. 5 00:00:17,650 --> 00:00:20,920 So inside the rotunda, what we'll do is we'll have our day. 6 00:00:21,220 --> 00:00:24,850 It's obviously there and we'll have these bring back. 7 00:00:25,180 --> 00:00:26,980 I'll spend back. 8 00:00:30,170 --> 00:00:34,700 Inside of a spent, I will have some text we'll just provide next. 9 00:00:35,640 --> 00:00:43,860 And here and after that, we'll be having our dev, which will be for the footer like footer of the 10 00:00:43,860 --> 00:00:45,750 node component, so that will be active. 11 00:00:47,080 --> 00:00:51,760 And inside the do, there will be a small, more tag. 12 00:00:53,430 --> 00:00:56,310 OK, small, and that will be responsible for showing the dead. 13 00:00:56,790 --> 00:01:04,110 Let me just hardcoded right now, that will be 20 may be it or well. 14 00:01:05,350 --> 00:01:06,260 90 to 10. 15 00:01:06,580 --> 00:01:09,570 IT 2021. 16 00:01:10,300 --> 00:01:15,310 What about this a dummy date, which I came up with is not to this night, to more or less nothing. 17 00:01:15,640 --> 00:01:16,990 I just came up with this, OK? 18 00:01:17,620 --> 00:01:20,140 So yeah, it will be having the date. 19 00:01:21,070 --> 00:01:25,690 And next, it will be having a button to delete the review. 20 00:01:26,470 --> 00:01:28,810 The next, we'll be having a button. 21 00:01:29,050 --> 00:01:31,150 Let me push the button from Italia. 22 00:01:31,270 --> 00:01:32,800 Let me copy that button thing. 23 00:01:33,310 --> 00:01:34,420 Yeah, this one. 24 00:01:36,260 --> 00:01:37,760 But I was I was here. 25 00:01:38,000 --> 00:01:38,270 Yeah. 26 00:01:38,990 --> 00:01:40,220 So let me be straight in here. 27 00:01:40,730 --> 00:01:44,890 And after these small tag, I will have a button. 28 00:01:44,900 --> 00:01:46,910 So on we come here. 29 00:01:48,640 --> 00:01:52,450 And that will be bottom like that. 30 00:01:53,750 --> 00:01:57,320 It will also give me the closing back closing tag is important, remember? 31 00:01:57,710 --> 00:02:00,770 Now I will need an icon, which is the delete icon. 32 00:02:02,020 --> 00:02:03,310 So let me see. 33 00:02:03,520 --> 00:02:03,790 Right. 34 00:02:03,910 --> 00:02:06,720 And I find it, so I'll go to materialI. 35 00:02:06,730 --> 00:02:12,130 Obviously, there's only one place that I can find it and actually not the only one place. 36 00:02:12,140 --> 00:02:14,200 There are other places, but I like to use this. 37 00:02:14,810 --> 00:02:22,060 Okay, so inside this, we'll have the details here, and it will show me all the icons letter to the 38 00:02:22,060 --> 00:02:22,560 delete key. 39 00:02:22,560 --> 00:02:25,960 You know which ones we are going to use? 40 00:02:26,440 --> 00:02:31,840 Okay, basically, this one looks better now because it has an outline, so I'll copy the import. 41 00:02:33,050 --> 00:02:33,830 And I will go back. 42 00:02:35,210 --> 00:02:43,820 And so I am sure that that bit of good and inside of this inside the button, I'll delete. 43 00:02:45,720 --> 00:02:47,940 So that is the lead, I can describe it. 44 00:02:49,300 --> 00:02:55,570 That's even easy, and that's accurate because I don't want to get typos. 45 00:02:57,130 --> 00:02:57,610 OK. 46 00:02:58,030 --> 00:02:58,840 I say this. 47 00:02:59,680 --> 00:03:07,810 And now we have the button, which is delete button and let me just read embedded inside their bodies 48 00:03:07,810 --> 00:03:09,310 to see their talk and find. 49 00:03:11,520 --> 00:03:12,240 Import. 50 00:03:16,590 --> 00:03:17,340 Import. 51 00:03:19,500 --> 00:03:20,790 Nor from. 52 00:03:24,010 --> 00:03:28,840 And then we save it after the L.A.. 53 00:03:30,510 --> 00:03:32,370 Well, before the advent of sea. 54 00:03:35,170 --> 00:03:35,710 And. 55 00:03:38,780 --> 00:03:39,500 Let us see. 56 00:03:42,860 --> 00:03:45,290 Now we can go to the browser and check. 57 00:03:50,080 --> 00:03:56,770 We come here and you can see there's a text, which will basically be our review. 58 00:03:57,610 --> 00:04:00,910 We have the date and we also have the delete button. 59 00:04:01,870 --> 00:04:03,430 Oh, that is so cool. 60 00:04:04,600 --> 00:04:08,200 And what I'm thinking is that why don't we give this up color? 61 00:04:08,950 --> 00:04:14,010 This delete button should be given a color because that is the danger. 62 00:04:14,070 --> 00:04:18,850 So let me give the color where I can get the colors. 63 00:04:22,190 --> 00:04:26,480 What is the I think it's the danger button outline and. 64 00:04:28,720 --> 00:04:30,160 I don't. 65 00:04:31,380 --> 00:04:31,810 We. 66 00:04:32,910 --> 00:04:33,840 We want to hear. 67 00:04:37,040 --> 00:04:38,870 And for the close. 68 00:04:45,040 --> 00:04:45,370 And two. 69 00:04:50,170 --> 00:04:51,990 I can give this OK. 70 00:04:52,990 --> 00:04:55,060 And I'm going to give you some background color, maybe. 71 00:04:55,300 --> 00:04:55,900 Let me see. 72 00:04:58,090 --> 00:04:59,380 Who inside the north? 73 00:05:03,670 --> 00:05:04,700 The color. 74 00:05:06,840 --> 00:05:07,920 No loans at this time. 75 00:05:07,980 --> 00:05:08,700 What I'm doing. 76 00:05:09,360 --> 00:05:09,990 Style. 77 00:05:17,540 --> 00:05:19,720 They're not going to do that when I say it. 78 00:05:20,450 --> 00:05:21,920 Oh, I don't think so. 79 00:05:21,950 --> 00:05:24,680 That doesn't work there to school and see. 80 00:05:27,700 --> 00:05:28,350 I knew it. 81 00:05:28,400 --> 00:05:29,170 I knew what I knew. 82 00:05:29,670 --> 00:05:33,770 And there's another way of giving let me google it to how to. 83 00:05:35,160 --> 00:05:39,620 How to change how a nurse or. 84 00:05:41,670 --> 00:05:42,330 Theory in the. 85 00:05:45,000 --> 00:05:45,570 I can't. 86 00:05:52,280 --> 00:05:54,950 I think we finally know. 87 00:05:56,070 --> 00:05:59,010 OK, Phil, OK, Phil, is the keyword. 88 00:06:07,360 --> 00:06:09,350 I hear a lot we can do like this caller. 89 00:06:09,710 --> 00:06:10,040 Yeah. 90 00:06:12,480 --> 00:06:19,840 So inside of this, I can give this to Phil or color should be danger. 91 00:06:20,310 --> 00:06:21,270 I can go over this. 92 00:06:22,770 --> 00:06:24,450 And I will give it to this. 93 00:06:26,210 --> 00:06:28,370 Not this time, because it doesn't work. 94 00:06:30,870 --> 00:06:31,840 But low should be. 95 00:06:34,110 --> 00:06:35,150 Be injured. 96 00:06:36,910 --> 00:06:39,130 We save it and we go back. 97 00:06:40,820 --> 00:06:45,950 And when I come back here, it doesn't do anything. 98 00:06:47,240 --> 00:06:48,530 What is the we? 99 00:06:49,900 --> 00:06:56,830 Across the country from Sale Oak, I use background, Oh, that was my bad. 100 00:06:57,520 --> 00:06:58,930 And this copy is see. 101 00:06:59,950 --> 00:07:03,700 And now I come here and wait. 102 00:07:06,410 --> 00:07:12,680 Look, I'm doing this in front of you because I want to teach you how to search for gold over the internet 103 00:07:12,680 --> 00:07:15,230 on StackOverflow, because that's the only way. 104 00:07:15,320 --> 00:07:16,730 Yeah, now it's right. 105 00:07:17,000 --> 00:07:18,440 There is what we were trying to do. 106 00:07:19,430 --> 00:07:21,260 Okay, so much time ahead and do that. 107 00:07:21,620 --> 00:07:29,750 But now what we'll do is we will give some other classes and functionality functionality to wait till 108 00:07:29,750 --> 00:07:30,540 the very first thing. 109 00:07:30,560 --> 00:07:32,270 Let me give a class name for this. 110 00:07:32,300 --> 00:07:33,590 Let me minimize determinist. 111 00:07:34,370 --> 00:07:36,620 So the class name would be not. 112 00:07:37,920 --> 00:07:39,360 Class name would be north. 113 00:07:41,090 --> 00:07:45,300 And a name for this day right here, that would be the note for the. 114 00:07:47,060 --> 00:07:47,810 Last name. 115 00:07:49,350 --> 00:07:49,950 No, put. 116 00:07:52,360 --> 00:07:53,740 Well, fair enough. 117 00:07:54,370 --> 00:07:54,670 Yeah. 118 00:07:55,510 --> 00:08:02,380 And the name for this and we taken, but I don't want to give any last name already given this title. 119 00:08:02,750 --> 00:08:03,440 The limestone. 120 00:08:03,460 --> 00:08:08,620 OK, now I would go to the next door to CSIS and inside of you. 121 00:08:08,980 --> 00:08:10,030 I will style this. 122 00:08:11,110 --> 00:08:13,150 So what was the last name note? 123 00:08:14,220 --> 00:08:14,630 No. 124 00:08:15,270 --> 00:08:21,960 And inside of this, I'll give the background color, background color and that it would be a hex code, 125 00:08:22,020 --> 00:08:27,030 which will be d1e d1e and eighty four. 126 00:08:30,740 --> 00:08:31,160 That's good. 127 00:08:32,530 --> 00:08:38,410 Next, we'll be having the border radius, border radius of 10 pixels. 128 00:08:40,370 --> 00:08:42,350 And upgrading of one audio. 129 00:08:45,820 --> 00:08:52,980 And next, we'll be having the I and with two with will leave for now, we'll just give the height. 130 00:08:53,000 --> 00:08:56,840 So minimum height should be the 170 pixels. 131 00:08:58,610 --> 00:09:02,810 And then we'll have the display flex, of course. 132 00:09:04,220 --> 00:09:09,680 Display next, and we save it now, we can go and see how that looks. 133 00:09:10,730 --> 00:09:13,580 That looks pretty good, but not so good. 134 00:09:14,100 --> 00:09:15,140 I will make it look good. 135 00:09:15,560 --> 00:09:16,010 Don't worry. 136 00:09:16,960 --> 00:09:27,310 So after the Flex will give the Flex deduction its column like direction column and after this will 137 00:09:27,310 --> 00:09:33,700 justify the content, the space between justify content space between. 138 00:09:34,840 --> 00:09:38,080 OK, and then we'll give some white space. 139 00:09:40,250 --> 00:09:42,560 Why space should we private that? 140 00:09:43,800 --> 00:09:44,400 We wrap. 141 00:09:46,620 --> 00:09:47,250 OK, save it. 142 00:09:48,200 --> 00:09:50,660 And come back here. 143 00:09:52,470 --> 00:09:54,780 Going to see things start to look a little bit better. 144 00:09:54,960 --> 00:09:55,530 Of course not. 145 00:09:56,100 --> 00:09:56,580 Awesome. 146 00:09:56,890 --> 00:09:58,170 Right now, it's not awesome. 147 00:09:58,210 --> 00:10:01,470 I can agree with you, but a not so bad. 148 00:10:01,500 --> 00:10:06,480 OK, so next do we create the naughty list? 149 00:10:06,900 --> 00:10:11,340 And that is the component we should be responsible for displaying all of this. 150 00:10:12,150 --> 00:10:12,870 But before that? 151 00:10:13,930 --> 00:10:16,570 Let us give some JavaScript to the North component. 152 00:10:17,260 --> 00:10:23,530 OK, so the very first thing is which we'll pass on broadband inside this. 153 00:10:25,950 --> 00:10:28,880 So what would be the props the props would be? 154 00:10:30,920 --> 00:10:36,170 Text for the date and the handle the lead not. 155 00:10:38,200 --> 00:10:39,210 And the. 156 00:10:40,920 --> 00:10:41,670 They need. 157 00:10:42,660 --> 00:10:42,950 What? 158 00:10:44,300 --> 00:10:45,020 We say it. 159 00:10:46,530 --> 00:10:46,800 Yeah. 160 00:10:47,820 --> 00:10:55,620 But the dynamic values will not be given as of now because we'll be trying to render them inside the 161 00:10:55,620 --> 00:11:00,630 app and that we will try to give value to this props right now. 162 00:11:00,660 --> 00:11:07,530 I don't think it's a good idea to like, give all of the values because all of the components will be 163 00:11:07,530 --> 00:11:11,820 reporting to the audience and everything would be happening from there. 164 00:11:12,850 --> 00:11:16,170 So I am not thinking of doing it right now. 165 00:11:17,280 --> 00:11:17,790 But. 166 00:11:19,090 --> 00:11:19,670 This was OK. 167 00:11:19,810 --> 00:11:25,690 This will be changed to dynamic this text, the date will be changed to dynamic and what not. 168 00:11:26,560 --> 00:11:33,760 We'll have a handle change or nontraditional changes and we'll delete button inside. 169 00:11:33,760 --> 00:11:36,550 This button will have a function that will be on click. 170 00:11:37,220 --> 00:11:40,150 Oh, that's so simple on click will be there here. 171 00:11:40,630 --> 00:11:42,490 And that is it. 172 00:11:43,420 --> 00:11:46,150 Next will be creating the note list. 173 00:11:46,540 --> 00:11:55,450 I think that will be the last one and then will directly jump on to the Abdel-Aziz and we'll grab every 174 00:11:55,450 --> 00:11:59,770 single piece of data and render it inside the AMBODE'S file. 175 00:12:00,400 --> 00:12:01,540 So we'll see in the next video.