1 00:00:00,480 --> 00:00:06,480 Mel Gibson will be creating the node component in which the component will be displaying that whenever 2 00:00:06,480 --> 00:00:11,640 we create the components that will be going to the node component and that it would be displaying inside 3 00:00:11,640 --> 00:00:14,540 the inside de-list. 4 00:00:14,940 --> 00:00:17,070 So basically it's a review component. 5 00:00:17,300 --> 00:00:18,480 It will display a review. 6 00:00:18,930 --> 00:00:22,290 So let us create that inside the components folder. 7 00:00:22,290 --> 00:00:27,990 So that will be named as the viewing audience or not to just whatever. 8 00:00:30,670 --> 00:00:32,730 Yes, a good set of, you know. 9 00:00:33,430 --> 00:00:39,310 And here are the very first thing, obviously the widespread cold called those hippy and then some, 10 00:00:39,370 --> 00:00:48,070 it's certain that C this will give us the boilerplate code and we have successfully coded all of it. 11 00:00:49,900 --> 00:00:51,820 But I think we missed one thing. 12 00:00:52,180 --> 00:00:55,500 We did not have enough functionality to the add note. 13 00:00:55,510 --> 00:00:57,270 Okay, and that will do OK. 14 00:00:57,280 --> 00:01:03,040 First, let us do that only we'll come up to the node component later. 15 00:01:03,550 --> 00:01:05,320 But let me give some JavaScript to it. 16 00:01:05,460 --> 00:01:06,880 Oh, I completely forgot. 17 00:01:07,330 --> 00:01:09,850 OK, now let does give some script to the add note. 18 00:01:10,660 --> 00:01:16,930 OK, and to the very first thing is, let me import you straight from react to that is what we'll be 19 00:01:16,930 --> 00:01:17,410 needing. 20 00:01:17,410 --> 00:01:18,160 So use. 21 00:01:19,820 --> 00:01:20,200 It. 22 00:01:23,520 --> 00:01:27,180 So eliminating that next, let us. 23 00:01:28,430 --> 00:01:29,690 Giving it a hook. 24 00:01:31,010 --> 00:01:38,750 But first, let me just pass a prop inside this big box, a prop that will be handled, not which will 25 00:01:38,750 --> 00:01:44,000 make use below and not. 26 00:01:45,690 --> 00:01:53,070 And after this, and certainly not, we'll have a concert and sound of this, we'll be having the north 27 00:01:53,190 --> 00:01:56,670 exit from North next. 28 00:01:57,540 --> 00:01:59,940 And we'll have the second or next. 29 00:02:01,600 --> 00:02:04,200 But not next. 30 00:02:05,630 --> 00:02:05,860 That. 31 00:02:07,050 --> 00:02:10,830 And will provide initial value could then be used to use. 32 00:02:12,030 --> 00:02:12,380 It. 33 00:02:14,410 --> 00:02:19,200 So in the beginning, it will be empty string, an empty string. 34 00:02:20,020 --> 00:02:21,880 OK, so that's it. 35 00:02:22,370 --> 00:02:27,280 We'll set the character limit for the contest and get it. 36 00:02:31,980 --> 00:02:37,350 Limit, maybe you can set it to 500 words would be good. 37 00:02:38,340 --> 00:02:41,130 Or 350, 500 feet? 38 00:02:41,310 --> 00:02:41,610 I think. 39 00:02:42,680 --> 00:02:44,810 OK, so often that. 40 00:02:46,500 --> 00:02:48,670 We will create a handle chain. 41 00:02:48,920 --> 00:02:55,040 Now what this handle chain will do is that it will be responsible for capturing the data whenever the 42 00:02:55,040 --> 00:02:57,500 user, whenever there's a change. 43 00:02:57,800 --> 00:03:07,040 So that annual change will change the character limit variable because it will be showing how much characters 44 00:03:07,040 --> 00:03:07,760 are left with. 45 00:03:07,820 --> 00:03:14,630 That will be calculated when the user type something around, according to the keystrokes. 46 00:03:14,960 --> 00:03:17,870 And that will be like trained in the real time. 47 00:03:18,350 --> 00:03:19,550 Oh okay. 48 00:03:20,060 --> 00:03:21,020 So let us do that. 49 00:03:24,190 --> 00:03:32,110 So here what we'll do is we will create concert and Berlin and. 50 00:03:33,030 --> 00:03:33,570 And. 51 00:03:35,580 --> 00:03:36,960 Out of this, there would be. 52 00:03:38,170 --> 00:03:38,960 An event? 53 00:03:40,000 --> 00:03:41,210 Oh, you can read just E! 54 00:03:41,240 --> 00:03:45,170 That was also enough to conduct event for the same event. 55 00:03:45,190 --> 00:03:50,800 And then if the goal to limit events listed in the connector. 56 00:03:53,350 --> 00:04:02,440 Character limit minus revenge, not even even thought. 57 00:04:04,990 --> 00:04:05,770 Done, great. 58 00:04:08,290 --> 00:04:09,160 Cute or. 59 00:04:11,440 --> 00:04:13,390 Well, you saw. 60 00:04:14,580 --> 00:04:15,120 Land. 61 00:04:16,050 --> 00:04:18,840 And there should be greater than zero, basically. 62 00:04:22,370 --> 00:04:29,550 Well, basically, what what is the value it will be counting this with the learned function and function? 63 00:04:30,010 --> 00:04:35,650 And it will be subtracting it in real time as long as that's greater than zero. 64 00:04:35,890 --> 00:04:36,940 So this will work. 65 00:04:37,090 --> 00:04:44,770 This if statement will be true and as like it is greater than or less than equal to zero. 66 00:04:45,310 --> 00:04:46,510 So this is not executable. 67 00:04:46,990 --> 00:04:48,110 Obviously, that's the thing. 68 00:04:48,790 --> 00:04:52,750 So I don't think that it's all that complicated. 69 00:04:53,140 --> 00:04:56,050 So next, we'll provide the written. 70 00:04:57,590 --> 00:04:58,520 You said North. 71 00:05:01,410 --> 00:05:07,680 That note text and inside of this of the boss event. 72 00:05:09,490 --> 00:05:17,610 Well, I am hoping like this surrender to the dark value, so this will be parsed inside this, OK? 73 00:05:18,640 --> 00:05:22,740 Now we will be writing the handle save. 74 00:05:23,590 --> 00:05:24,250 What is the handle? 75 00:05:24,250 --> 00:05:32,440 So click whenever we type the blog review and whenever we click on Publish button. 76 00:05:34,290 --> 00:05:35,610 To what will happen. 77 00:05:36,290 --> 00:05:41,550 Right now, we have not given any functionality before that we need to create a function which will 78 00:05:41,550 --> 00:05:43,080 be responsible for all of this. 79 00:05:43,320 --> 00:05:49,060 So for that, we will write contest and. 80 00:05:51,430 --> 00:05:54,610 Save and and click here. 81 00:05:56,040 --> 00:05:56,470 Click. 82 00:05:58,360 --> 00:05:58,650 Mick? 83 00:05:58,900 --> 00:06:00,190 Yeah, this one. 84 00:06:01,700 --> 00:06:02,550 Inside of your. 85 00:06:03,490 --> 00:06:05,320 That it will be a federal function. 86 00:06:06,400 --> 00:06:06,910 And. 87 00:06:08,000 --> 00:06:15,310 Now what what it will do to it will check with the final statement that North. 88 00:06:18,300 --> 00:06:18,960 Next. 89 00:06:20,620 --> 00:06:21,000 Grim. 90 00:06:25,980 --> 00:06:27,540 And it will be giving Bill Land. 91 00:06:30,420 --> 00:06:40,890 Lend greater than zero if it's greater than zero, but then it will give an as handle. 92 00:06:45,470 --> 00:06:52,520 No, and inside of that, that will be a nought nought. 93 00:06:53,720 --> 00:06:54,140 Next. 94 00:06:57,920 --> 00:07:00,320 And we said the note. 95 00:07:02,070 --> 00:07:06,080 That not next as this A.. 96 00:07:07,570 --> 00:07:07,890 Who's? 97 00:07:08,950 --> 00:07:17,260 So I'll save it, and now we will be giving that functionality to this device like we will time. 98 00:07:17,390 --> 00:07:20,650 I will be tying on these functions inside all of this. 99 00:07:21,430 --> 00:07:29,050 So the very first thing is we'll go to the text area and here we'll give on change and value and everything 100 00:07:29,050 --> 00:07:33,790 like that to the very first thing which will give is the value of its value. 101 00:07:34,570 --> 00:07:35,830 So its value will be. 102 00:07:37,760 --> 00:07:38,210 This. 103 00:07:40,000 --> 00:07:44,210 Next and next, we'll be having an own change. 104 00:07:46,030 --> 00:07:47,170 And on change. 105 00:07:48,140 --> 00:07:49,720 We'll be having been voting. 106 00:07:55,650 --> 00:07:57,390 And you change a lot and change. 107 00:07:57,810 --> 00:07:58,470 Yeah, this one. 108 00:07:59,130 --> 00:07:59,820 We'll see it. 109 00:08:01,000 --> 00:08:07,330 And after that, we'll be giving the functionality to a button that whenever we press the button. 110 00:08:07,850 --> 00:08:08,710 What will happen? 111 00:08:09,310 --> 00:08:16,840 So for that, we need to try and on click function to it, then only it will be responsible for whatever 112 00:08:16,840 --> 00:08:19,310 you want it to be like functionality. 113 00:08:19,330 --> 00:08:26,140 Let me remove this button directly inside the button after this glass. 114 00:08:26,410 --> 00:08:26,590 Hmm. 115 00:08:27,130 --> 00:08:30,010 What we'll do is we'll give the then click. 116 00:08:32,140 --> 00:08:38,030 One click equals two and said the calibrations, because no script is always written and calibrated 117 00:08:38,050 --> 00:08:38,950 inside of free up. 118 00:08:39,670 --> 00:08:44,050 You cannot write without a script or you can write. 119 00:08:45,520 --> 00:08:50,070 After the function, that disposal of security inside the rotunda, if you want to like ride a telescope 120 00:08:50,590 --> 00:08:53,400 there, there should always be a clear basis. 121 00:08:53,860 --> 00:08:58,860 Remember to let us ride that inside un click bait. 122 00:08:59,440 --> 00:09:00,870 We'll ride the. 123 00:09:04,630 --> 00:09:04,930 And. 124 00:09:07,980 --> 00:09:08,370 Save. 125 00:09:09,650 --> 00:09:09,980 Click. 126 00:09:10,480 --> 00:09:12,200 Yeah, that is the function. 127 00:09:12,710 --> 00:09:13,730 Oh no, we separate. 128 00:09:15,630 --> 00:09:17,780 So I guess that was it. 129 00:09:18,480 --> 00:09:27,540 We provided the U.S. and safe click and that was configured properly, and we set the character limit 130 00:09:27,540 --> 00:09:28,260 to 500. 131 00:09:28,260 --> 00:09:35,550 We can reduce it further if we want, if that if the length of the box is going to big or will change 132 00:09:35,550 --> 00:09:35,700 it. 133 00:09:36,750 --> 00:09:40,470 OK, so let us go back and see the browser if there is something. 134 00:09:42,610 --> 00:09:43,870 Right now, there would be nothing. 135 00:09:45,960 --> 00:09:48,360 Because we see the subways running. 136 00:09:49,220 --> 00:09:51,810 They are starting to add north. 137 00:09:53,190 --> 00:09:54,000 Is being. 138 00:09:55,090 --> 00:10:04,220 Not giving anything, because this handle knows that will be called inside the root component. 139 00:10:04,240 --> 00:10:05,320 So what are the root component? 140 00:10:05,320 --> 00:10:09,130 Root component is the obnoxious find inside of that. 141 00:10:09,340 --> 00:10:15,190 We will have to give of value to this particular prop, which is passing inside the note. 142 00:10:15,490 --> 00:10:17,350 This prop is just passed here. 143 00:10:17,800 --> 00:10:22,330 So right now, we have not like users anywhere in the room components so that we will do. 144 00:10:22,690 --> 00:10:27,700 Then only this will be functional so that we will do inside the apparatus. 145 00:10:28,270 --> 00:10:32,740 And next, what we'll do is we'll create the North's component. 146 00:10:33,010 --> 00:10:39,850 And what this note component would do is it will be responsible for like whatever we type in here inside 147 00:10:39,850 --> 00:10:48,700 the note that will go to this, the nodes and now that will be rendering on the screen inside the ABDEL-ATI. 148 00:10:49,510 --> 00:10:51,180 So that is it for the video. 149 00:10:51,250 --> 00:10:54,250 Next, we'll be creating the note torches. 150 00:10:56,170 --> 00:10:58,720 So this will further.