1
00:00:00,410 --> 00:00:03,540
Let us give a basic structure to a criteria component.

2
00:00:04,260 --> 00:00:07,700
So first, we will design it and then we'll give some functionality to it.

3
00:00:07,710 --> 00:00:10,080
So in the beginning, we will not give the functionality.

4
00:00:10,560 --> 00:00:16,170
We'll first design it and then we'll get to inside this dev.

5
00:00:18,160 --> 00:00:20,050
I want this text.

6
00:00:24,910 --> 00:00:27,250
And here I will give off phone.

7
00:00:29,610 --> 00:00:32,190
Basically a form and.

8
00:00:35,820 --> 00:00:38,520
And there will be no action, nothing as of now.

9
00:00:40,050 --> 00:00:43,050
Everything will be given inside the phone.

10
00:00:45,040 --> 00:00:45,760
We'll give.

11
00:00:47,730 --> 00:00:53,700
Some input feels good, the input to get the data, so Hill will give input field.

12
00:00:54,720 --> 00:00:55,350
And.

13
00:00:56,760 --> 00:00:58,770
Input type would be taxed.

14
00:00:59,070 --> 00:01:03,270
It's correct, and that will be a place holder.

15
00:01:04,780 --> 00:01:10,780
What we can give it later on, and everything will give a little less to me just for a strong.

16
00:01:11,750 --> 00:01:17,470
The OK, so after this input will give all.

17
00:01:20,050 --> 00:01:28,000
Next idea, basically, or to give the larger like description, because that would be containing some

18
00:01:28,000 --> 00:01:29,060
more tax trade.

19
00:01:29,890 --> 00:01:31,420
So that is what we want to give.

20
00:01:33,250 --> 00:01:35,230
So next idea.

21
00:01:36,170 --> 00:01:36,770
And.

22
00:01:38,140 --> 00:01:42,930
Name and all names would be content ID.

23
00:01:43,330 --> 00:01:43,990
I don't know.

24
00:01:44,670 --> 00:01:52,090
Do good not giving any idea right now and columns and all that, that's not that's not the part we are

25
00:01:52,090 --> 00:01:55,860
doing right, all those and all those will do.

26
00:01:57,460 --> 00:02:02,470
Because I'm thinking to add a functionality to it, like using JavaScript, that will be the dynamic

27
00:02:02,470 --> 00:02:04,300
thing and that will be doing later on.

28
00:02:05,170 --> 00:02:05,770
So.

29
00:02:08,570 --> 00:02:12,530
Right now, there's nothing just next idea.

30
00:02:14,100 --> 00:02:14,700
And.

31
00:02:15,960 --> 00:02:18,960
And that said, so next, we'll be having about 10.

32
00:02:23,400 --> 00:02:30,130
And that would not only give just a plus sign, but later on, we'll give some styling from material

33
00:02:30,450 --> 00:02:30,840
to it.

34
00:02:31,470 --> 00:02:35,730
So let me just see this and see how this looks.

35
00:02:35,970 --> 00:02:41,650
Basically on the screen or yeah, that is what we wanted.

36
00:02:41,670 --> 00:02:50,250
Not exactly how it's showing up, but this is the basic structure because this will be there for our

37
00:02:50,250 --> 00:02:52,800
title and this will be there for our.

38
00:02:54,320 --> 00:03:01,010
Description, basically, you can destroy your salad, but know and this this will be the plus you can

39
00:03:01,010 --> 00:03:07,360
see this is refreshing because we have not given any functionality to this plus Burton whenever we plus

40
00:03:07,370 --> 00:03:12,800
this floodwater, so there should be something happening and that all we be doing now.

41
00:03:13,840 --> 00:03:19,570
So let me go to the IED and here will do the thing.

42
00:03:20,080 --> 00:03:26,410
So now the first thing is inside the input will give leaseholder.

43
00:03:27,880 --> 00:03:31,210
And that will be having a value of title.

44
00:03:32,450 --> 00:03:32,970
Vital.

45
00:03:33,170 --> 00:03:40,310
And that would be a name, and that will be having a name of title only.

46
00:03:41,150 --> 00:03:46,340
And that will be a function which will add like when we give the.

47
00:03:47,810 --> 00:03:49,300
But OK.

48
00:03:51,380 --> 00:03:59,600
So inside the text area we have on name, of course, which of their content will fair and we'll have

49
00:03:59,660 --> 00:04:00,940
a place holder.

50
00:04:02,090 --> 00:04:06,950
Before the place holder will be giving value, so there will be.

51
00:04:08,860 --> 00:04:09,430
Right.

52
00:04:11,310 --> 00:04:11,880
Your.

53
00:04:13,040 --> 00:04:14,420
Not yet.

54
00:04:16,500 --> 00:04:18,180
Food and.

55
00:04:19,610 --> 00:04:23,720
As of now, no rules and all be given a clear tone.

56
00:04:24,440 --> 00:04:25,010
So.

57
00:04:26,010 --> 00:04:30,840
And for this button, that is a plus sign, but will add a materially weight to it.

58
00:04:31,410 --> 00:04:31,860
So.

59
00:04:33,250 --> 00:04:34,960
Let me see how it looks.

60
00:04:36,280 --> 00:04:43,870
So basically, that is a item, and that is a description and that are some placeholders.

61
00:04:44,460 --> 00:04:44,830
Right?

62
00:04:45,400 --> 00:04:50,650
So that looks better actually providing some styling to the content.

63
00:04:50,650 --> 00:04:54,670
So for that will be needing to write a class name for everything.

64
00:04:55,270 --> 00:05:03,490
And that is we wondered, though before that, let us give some state to this particular component because

65
00:05:03,490 --> 00:05:09,430
there is no JavaScript at the moment and the JavaScript would be written inside like after this, after

66
00:05:09,430 --> 00:05:15,430
this create area and here will be the JavaScript and here will be 36.

67
00:05:15,430 --> 00:05:27,790
Now what are the the 6S plus HTML and now surplus HTML is inside the written Olive's, but your JavaScript

68
00:05:27,940 --> 00:05:33,370
is after this function begins and before the written statement.

69
00:05:33,370 --> 00:05:40,600
So despite right, here is the JavaScript and after the return is detailed script plus that is known

70
00:05:40,600 --> 00:05:41,470
as Deus Ex.

71
00:05:42,200 --> 00:05:43,120
Simple as that.

72
00:05:43,600 --> 00:05:50,770
So now we'll be adding some JavaScript and we'll be adding some functions like on general.

73
00:05:51,890 --> 00:05:57,290
Look, that will be adding inside the input like whenever the inputting, so what would what should

74
00:05:57,290 --> 00:06:04,320
be the action that should take place whenever we like the text area changes or the text inside the text,

75
00:06:04,320 --> 00:06:06,020
the original or what should be the output?

76
00:06:06,680 --> 00:06:08,660
So that is what we do.

77
00:06:09,020 --> 00:06:14,420
So before that, let us go to material way and grab some styling buttons and all.

78
00:06:14,960 --> 00:06:18,890
Before that, let me show you how to install that if you don't know.

79
00:06:19,640 --> 00:06:22,790
So for that, you need to go to our website.

80
00:06:22,800 --> 00:06:26,090
That is material to a website, basically, which is this.

81
00:06:28,540 --> 00:06:30,610
Earlier, it was used, too.

82
00:06:30,890 --> 00:06:32,800
No, not exactly.

83
00:06:32,810 --> 00:06:38,770
This alert was material UIA dot com, but now they changes to Imua dot com.

84
00:06:39,790 --> 00:06:48,040
Basically, they are changing the material UI to music for don't get confusing some tutorials you might

85
00:06:48,040 --> 00:06:51,640
be seeing that is material European import also that is material away.

86
00:06:51,970 --> 00:06:56,010
But don't get confused that right now they have just to emulate.

87
00:06:56,380 --> 00:06:56,730
OK.

88
00:06:57,300 --> 00:07:01,990
So ed, you will first of all, let me disclose it.

89
00:07:03,010 --> 00:07:05,530
First of all, you'll click on this.

90
00:07:05,530 --> 00:07:06,280
Get started.

91
00:07:08,160 --> 00:07:12,150
And here you will see all of the juicier, you know, like how to use it.

92
00:07:13,550 --> 00:07:22,160
And so this is a basic leader documentation, and you will need to see it whenever you get stuck somewhere

93
00:07:22,160 --> 00:07:23,930
or like that.

94
00:07:24,590 --> 00:07:27,080
So that is basically the documentation part.

95
00:07:27,350 --> 00:07:30,890
But the very first thing is how to install install material.

96
00:07:30,990 --> 00:07:37,400
Way before that, there is a command which is written right here and be installed material leeway,

97
00:07:37,700 --> 00:07:43,790
and this command would like to install the material to the system.

98
00:07:44,370 --> 00:07:46,890
So you have got a command?

99
00:07:46,890 --> 00:07:47,750
Know this.

100
00:07:49,290 --> 00:07:51,630
Choose and disinformation.

101
00:07:53,460 --> 00:08:01,830
Yeah, basically, if you just type this and install a mirror material, so that will be installed for

102
00:08:01,830 --> 00:08:06,960
sure on your computer, but I've noticed that you get some errors after that.

103
00:08:07,470 --> 00:08:10,450
So to avoid those errors, you need to.

104
00:08:10,470 --> 00:08:16,650
After that, you need to install the emotion react and the emotion style this separately.

105
00:08:17,100 --> 00:08:19,950
That is why they have given this in one line only.

106
00:08:19,950 --> 00:08:23,940
So you can just install all of these three things at once.

107
00:08:24,660 --> 00:08:27,990
So that's why this this is command virtues.

108
00:08:28,380 --> 00:08:29,670
So just copy this command.

109
00:08:31,580 --> 00:08:38,930
And then you can go to your terminal inside the VA escort, you can go to Terminal four, the smart

110
00:08:38,930 --> 00:08:41,270
card for the terminal is Control and Bektic.

111
00:08:42,540 --> 00:08:45,270
And it is running right now.

112
00:08:46,540 --> 00:08:47,470
So let me.

113
00:08:48,710 --> 00:08:49,700
Stop this forever.

114
00:08:50,510 --> 00:08:57,710
And here you will paste that particular come on by right clicking, you will be missed and this is the

115
00:08:57,710 --> 00:09:01,870
command and beam installment anyway, not the material way.

116
00:09:01,940 --> 00:09:05,390
Yeah, basically that's my Amway material and all of that.

117
00:09:05,540 --> 00:09:08,750
So then you need to wait until I've already installed it.

118
00:09:09,590 --> 00:09:11,270
That's why I do it again.

119
00:09:11,510 --> 00:09:13,340
But for you, you need to do it again.

120
00:09:13,700 --> 00:09:18,560
So that's why I am like not doing it.

121
00:09:18,770 --> 00:09:24,290
So once you do it just ahead and it will take around two seconds and that that will be installed.

122
00:09:24,920 --> 00:09:29,660
So that said, I will not do it, but you have to do it.

123
00:09:32,290 --> 00:09:35,230
So once you install it, you need to go to the website again.

124
00:09:35,710 --> 00:09:43,610
And after coming here, do you need to go to the third tier for the icons or you can just click here

125
00:09:43,660 --> 00:09:44,620
material icons.

126
00:09:47,530 --> 00:09:48,370
And it could take.

127
00:09:50,440 --> 00:09:53,200
Take you to the material, like on speedboats not loading up.

128
00:09:55,670 --> 00:09:56,660
What's the problem?

129
00:09:58,850 --> 00:10:00,170
Yeah, we are here.

130
00:10:00,870 --> 00:10:06,980
So this is basically the material icons from the material white and.

131
00:10:09,330 --> 00:10:16,230
There's an installation for this sidewalk, and you can use it like as it is.

132
00:10:17,680 --> 00:10:25,300
OK, so what do you need to do is to just start here and button?

133
00:10:26,530 --> 00:10:28,050
So this is what we want.

134
00:10:28,590 --> 00:10:33,270
We'll click on this and you just copy this, and then you can go to your.

135
00:10:34,850 --> 00:10:36,800
And then you can just be a stupid.

136
00:10:38,520 --> 00:10:45,180
And between this button instead of this plus it like.

137
00:10:46,220 --> 00:10:46,710
And.

138
00:10:47,950 --> 00:10:48,240
Can.

139
00:10:50,530 --> 00:10:52,260
Yeah, and we'll see if it.

140
00:10:53,460 --> 00:10:56,550
Once you've saved, you can just go too deep, but all of a sudden.

141
00:10:57,620 --> 00:10:58,240
And.

142
00:10:59,780 --> 00:11:01,190
See if it's there.

143
00:11:01,440 --> 00:11:04,490
It's not that because we have not yet started this outward.

144
00:11:05,600 --> 00:11:10,250
Let me clear this and let me do our 10 p.m. start.

145
00:11:12,320 --> 00:11:13,770
And it's starting this year.

146
00:11:18,510 --> 00:11:21,030
So what is successfully started now, let me check.

147
00:11:22,370 --> 00:11:24,710
If that is there or not, let me finish this.

148
00:11:26,850 --> 00:11:34,950
And yeah, you can see the pattern looks a little bigger, although it's not so beautiful, but that

149
00:11:34,950 --> 00:11:36,750
looks better than before.

150
00:11:37,140 --> 00:11:41,730
OK, so there's another one, Stockard, because we started off this hour.

151
00:11:43,760 --> 00:11:50,810
So next, we'll be providing some functionality to this particular form and the input area, so we'll

152
00:11:50,810 --> 00:11:58,910
be getting some JavaScript and G-6 and combined to set the stage and all for the values inside this

153
00:11:59,510 --> 00:12:05,210
so that we'll do here like after this is created.

154
00:12:05,400 --> 00:12:08,990
We'll write, we'll write all of the JavaScript here.

155
00:12:09,920 --> 00:12:13,460
And they're certain that that will do in the next video.