1
00:00:01,240 --> 00:00:06,700
In this video, we can see how to write the code for the message from component.

2
00:00:07,890 --> 00:00:13,440
The Misskelley will be doing this by the end of the video, we can type a new message or we can send

3
00:00:13,450 --> 00:00:20,100
an image on any attachment, like a video or any PDF through the through the message form that is presented

4
00:00:20,110 --> 00:00:25,620
here so that we are going to be for the end of the video from here instead of message form after written,

5
00:00:25,620 --> 00:00:26,850
something will do that.

6
00:00:27,630 --> 00:00:32,550
So now that we import fuel state works, so we're using use instead to.

7
00:00:34,110 --> 00:00:35,820
Import use step.

8
00:00:39,390 --> 00:00:42,000
From the act, this is not often so.

9
00:00:42,180 --> 00:00:46,440
These are the snippets that are presented in Visual Studio code, which helps that often.

10
00:00:46,830 --> 00:00:49,050
That's why I recommend you to watch the record.

11
00:00:50,700 --> 00:00:53,550
And then I'll be importing the.

12
00:00:54,810 --> 00:01:00,450
I'll be importing few icons that are required from than to design icons that I installed in the first

13
00:01:00,450 --> 00:01:00,920
videos.

14
00:01:03,270 --> 00:01:04,290
Sen Outline.

15
00:01:11,760 --> 00:01:15,420
Be careful with the spellings picture outline.

16
00:01:17,990 --> 00:01:23,400
It should be Cap Camel getting basically banned, foreign camel getting more in Jerusalem.

17
00:01:31,460 --> 00:01:32,840
From then design icons.

18
00:01:34,160 --> 00:01:38,120
You can also use material you like, but in this way you'll be using and design icons.

19
00:01:41,240 --> 00:01:42,830
And finally, what we have to do is.

20
00:01:52,530 --> 00:01:59,610
So these are now basically the components are the objects that we've got that the engine provides us

21
00:01:59,610 --> 00:02:01,320
with the default we can use.

22
00:02:01,320 --> 00:02:04,290
These functions are companies that are developed by other developers.

23
00:02:04,770 --> 00:02:12,000
Again, so no need to write again code for this and Mercedes typing attributes are functions to them.

24
00:02:12,120 --> 00:02:17,310
We can use them already in many functions from Chocolate Family Act chapter.

25
00:02:19,120 --> 00:02:20,680
That is a beauty of the Tottenham.

26
00:02:22,340 --> 00:02:26,750
So once we are done with this, then we are opening the message from again.

27
00:02:28,310 --> 00:02:29,180
Can the props?

28
00:02:33,630 --> 00:02:39,720
So I'll be using this New Hope, the value set value.

29
00:02:47,090 --> 00:02:49,430
So they're going to walk this line of that is that.

30
00:02:51,120 --> 00:02:53,520
They're using the constant value and set value.

31
00:02:54,550 --> 00:03:02,980
You see, it is a book that helps us to create or change values dynamically without reinventing the

32
00:03:02,980 --> 00:03:03,760
front page.

33
00:03:04,180 --> 00:03:10,510
So the components which uses this, this book only will read when the whole value changes.

34
00:03:10,990 --> 00:03:13,960
So initially we are initializing with the ambition.

35
00:03:14,230 --> 00:03:20,650
So the value of this value constant will be an ambition, and the set value is a method that can be

36
00:03:20,650 --> 00:03:23,710
used to change the value of this constant value.

37
00:03:24,220 --> 00:03:29,830
OK, so this is what you said does to basically change the value dynamic.

38
00:03:31,320 --> 00:03:33,810
And then similarly, we can be structured our prop.

39
00:03:37,300 --> 00:03:39,130
We'll be getting the whole of chocolaty.

40
00:03:40,470 --> 00:03:41,610
And credentials.

41
00:03:44,040 --> 00:03:44,730
Some props.

42
00:03:48,750 --> 00:03:53,790
Now, after this, we have to render the like the input, right, so we will do that.

43
00:03:54,720 --> 00:03:57,060
So instead of this, there will be returning a form.

44
00:04:00,340 --> 00:04:01,930
But Glass as a message from.

45
00:04:07,760 --> 00:04:08,040
That's.

46
00:04:09,400 --> 00:04:11,170
So he'll be organizing this action.

47
00:04:13,070 --> 00:04:14,060
And on click.

48
00:04:14,340 --> 00:04:19,920
So when we submit the form on click to do some processing like like when we type the method and submit

49
00:04:19,940 --> 00:04:24,950
it, then you should have to reflect that message in that outfit.

50
00:04:25,340 --> 00:04:31,040
So I'm click on submit on submission of the form will be calling its given function.

51
00:04:31,430 --> 00:04:34,190
That handle are really creating that in shortly.

52
00:04:38,940 --> 00:04:40,500
So that's hard for me to read it.

53
00:04:41,280 --> 00:04:43,170
So after that, we'll be getting input function.

54
00:04:45,280 --> 00:04:45,760
Input.

55
00:04:47,680 --> 00:04:48,970
A few attributes.

56
00:04:50,420 --> 00:04:54,760
Painted agreements, so the class name will be message input.

57
00:05:00,700 --> 00:05:02,740
Soledad will be send a message.

58
00:05:10,610 --> 00:05:11,600
So value will be.

59
00:05:13,240 --> 00:05:14,710
The Alaska project value.

60
00:05:15,520 --> 00:05:21,280
So they just call this a good program, programming the value of all the inputs should be in the books

61
00:05:21,550 --> 00:05:25,420
so that whenever we take something, that value keeps on changing constantly.

62
00:05:25,420 --> 00:05:27,580
Only that input will be changing dynamically.

63
00:05:27,970 --> 00:05:32,110
So this value we are giving to the drop of input.

64
00:05:34,310 --> 00:05:41,930
On change on Jenny Baxter said the value added change and what has changed that is that it will use

65
00:05:41,930 --> 00:05:46,040
this value method and then change the value whenever the input is changing.

66
00:05:55,070 --> 00:05:58,610
And on it should be handled somewhat similar to the phone.

67
00:06:03,930 --> 00:06:05,460
So once we are done with the but.

68
00:06:08,020 --> 00:06:12,970
Now, the important thing is the upload button image button, the picture icon, so this should be done

69
00:06:12,970 --> 00:06:13,180
right.

70
00:06:13,360 --> 00:06:14,800
So we'll be writing the code for that.

71
00:06:17,620 --> 00:06:18,100
Label.

72
00:06:23,130 --> 00:06:25,140
Its general fund will be an uphill battle.

73
00:06:37,220 --> 00:06:38,060
And in the span.

74
00:06:41,660 --> 00:06:42,470
Picture outline.

75
00:07:00,760 --> 00:07:02,620
So picture playing a class name.

76
00:07:05,490 --> 00:07:06,390
I've picked one.

77
00:07:09,520 --> 00:07:17,120
So the thing that we imported from the and design icons for the spine, also in our class name, probably

78
00:07:17,130 --> 00:07:17,760
managed button.

79
00:07:27,610 --> 00:07:32,790
So long as it is done, the Labor Party's done so after the labor again will take something, put this

80
00:07:32,800 --> 00:07:34,210
in what is for the file.

81
00:07:34,600 --> 00:07:39,760
So whenever they click on the image of something, we have to open our screen to upload the photo that

82
00:07:39,760 --> 00:07:40,660
will be the next input.

83
00:07:47,030 --> 00:07:48,480
And what type will be fine?

84
00:07:57,110 --> 00:08:02,630
Multiple will be false, only one user can send one file, you can give it to the user can send many

85
00:08:02,630 --> 00:08:05,780
friends, but who make it simple will be using this font.

86
00:08:06,620 --> 00:08:07,490
It will be enough.

87
00:08:07,520 --> 00:08:08,090
No, the button.

88
00:08:12,780 --> 00:08:16,620
Style will be very in line with a JavaScript object.

89
00:08:19,270 --> 00:08:20,190
This plan will be done.

90
00:08:28,160 --> 00:08:29,120
So on change.

91
00:08:30,950 --> 00:08:32,570
Handle not buying this.

92
00:08:34,060 --> 00:08:40,000
So Handler will be a function that will be creating content, will be sending the barometer of this.

93
00:08:49,880 --> 00:08:51,770
That means you are sending the image to this chart.

94
00:08:53,220 --> 00:08:56,160
So after they put the final thing remaining is the bottom.

95
00:09:03,130 --> 00:09:04,150
I will submit.

96
00:09:07,470 --> 00:09:08,340
Glass demolition.

97
00:09:10,910 --> 00:09:12,830
And I mentioned that we are Philippine.

98
00:09:17,600 --> 00:09:18,960
We're using Nikon over it.

99
00:09:37,630 --> 00:09:41,020
There's a small threshold, yet it should be capital is.

100
00:09:44,710 --> 00:09:47,290
Now in this perfect Senate plan.

101
00:09:50,560 --> 00:09:51,820
There is a campaign.

102
00:09:55,180 --> 00:09:58,030
Last night, and then we have to close the bottom, we have to close the.

103
00:09:59,810 --> 00:10:03,970
So once we are done, we are done with the basic return function that we have to show in the field and

104
00:10:03,970 --> 00:10:07,640
then we are maybe doing some body part for handling those genius.

105
00:10:08,360 --> 00:10:10,640
So first thing we have to do is handle change.

106
00:10:19,230 --> 00:10:20,660
That should be a small patch.

107
00:10:24,940 --> 00:10:29,080
This'll take the current event that is being generated at a function.

108
00:10:30,470 --> 00:10:33,280
Involving the deficit, the value of the input, right?

109
00:10:35,420 --> 00:10:38,600
Even not targeted, not value.

110
00:10:40,580 --> 00:10:42,440
He's out to retrieve the value of that event.

111
00:10:43,190 --> 00:10:48,590
So if you have any doubt, you can just log the event to see what the event contains, it will contain

112
00:10:48,590 --> 00:10:50,600
a target in that article can contain the value.

113
00:10:54,490 --> 00:10:56,040
And then they used typing should be true.

114
00:10:57,340 --> 00:11:02,090
We will be sending its taping props and chartering.

115
00:11:08,190 --> 00:11:09,630
So we're done with the handle change.

116
00:11:12,260 --> 00:11:14,930
The next thing remaining is handle, submit and handle upload.

117
00:11:15,860 --> 00:11:18,410
Now we have to and submit.

118
00:11:22,400 --> 00:11:23,630
Version of the bad guy even.

119
00:11:29,650 --> 00:11:31,040
And then we have to prevent.

120
00:11:31,660 --> 00:11:37,540
So basically, their default behavior is that whenever we click on submit, it will refresh the homepage.

121
00:11:37,930 --> 00:11:43,690
So the fact is interactive scrolling through different components, not the complete page, so it'll

122
00:11:43,690 --> 00:11:45,610
be preventing the default of the event.

123
00:11:52,400 --> 00:11:53,480
Even when they.

124
00:11:57,880 --> 00:12:00,730
Voluntarily creating a fixed constant.

125
00:12:09,210 --> 00:12:10,950
So if that excellent.

126
00:12:14,230 --> 00:12:17,710
Excellent is greater than zero, then will be sending the message.

127
00:12:21,050 --> 00:12:27,140
The send messages are a function that we got from the act, charting them and retaining the credentials

128
00:12:27,800 --> 00:12:35,060
to chart it a group to see, which is to let the computer know which group it is and then the final

129
00:12:35,060 --> 00:12:35,960
object will be next.

130
00:12:40,070 --> 00:12:45,660
And then finally, we have to set the value to empty string so long as we send a message again, we

131
00:12:45,660 --> 00:12:49,830
have to get a new MP from Christian Democrats will be visiting that benediction.

132
00:12:53,640 --> 00:12:55,230
So no handles are many of them.

133
00:12:55,350 --> 00:12:56,730
The last part, it had a lot of.

134
00:13:09,040 --> 00:13:10,620
We're also going to be getting even.

135
00:13:11,020 --> 00:13:12,190
We have to get the U.N..

136
00:13:14,560 --> 00:13:15,910
And there is only one line of code.

137
00:13:17,830 --> 00:13:23,890
We have to send the message and the the image of the emerging message, the attachment message.

138
00:13:27,580 --> 00:13:29,650
The same thing, but he'll be returning the files.

139
00:13:31,680 --> 00:13:33,480
Fans will be even.

140
00:13:34,840 --> 00:13:35,410
Target.

141
00:13:37,560 --> 00:13:38,260
But finds.

142
00:13:41,110 --> 00:13:42,400
And the text will be empty.

143
00:13:44,640 --> 00:13:47,640
So with the help of this line of work, we can send many members.

144
00:13:51,820 --> 00:14:00,790
Then outline seems they send out language never used, but you didn't send out such a small audio.

145
00:14:02,550 --> 00:14:03,120
So.

146
00:14:05,260 --> 00:14:07,060
We have done a lot of management.

147
00:14:08,570 --> 00:14:11,600
And I have that.

148
00:14:11,750 --> 00:14:13,820
So the airport is ready for the message from.

149
00:14:15,170 --> 00:14:17,290
You can see it one of the Web pages completed.

150
00:14:18,110 --> 00:14:21,710
We have been told the message from an naftogaz will do that shortly.

151
00:14:23,000 --> 00:14:28,740
So there's going to be this how to build the message from component handling the upload, submit and

152
00:14:29,240 --> 00:14:34,630
handling changes using the standard looks and then the boiler plate HDMI port for farming input and

153
00:14:34,640 --> 00:14:35,120
buttons.

154
00:14:36,170 --> 00:14:41,840
So we are left with the log in form and then integrating the specified log in from adaptogens and finishing

155
00:14:41,840 --> 00:14:42,350
the website.

156
00:14:42,620 --> 00:14:44,250
So we are into the final part.

157
00:14:44,510 --> 00:14:49,760
We are in the engine and we'll see definition of the log in form in the next steps in the next few.