1
00:00:00,980 --> 00:00:07,490
Now we start creating a UI, and for that purpose, just get rid of this actual tag that we have over

2
00:00:07,490 --> 00:00:07,730
here.

3
00:00:08,990 --> 00:00:14,020
So it'll be starting with our UI and this is going to contain a class name of container, not app.

4
00:00:14,030 --> 00:00:16,880
So let's just give it a class name of container.

5
00:00:19,890 --> 00:00:25,650
And before we go any further, I just open up a terminal and we would like to add another dependency

6
00:00:25,650 --> 00:00:30,240
on traveler application, and this time it is going to be the ikonso and BMI.

7
00:00:33,070 --> 00:00:33,790
React.

8
00:00:34,330 --> 00:00:40,270
I don't know how this is going to install our reactions into our application, and we just take a look

9
00:00:40,270 --> 00:00:41,410
into a package for Jason.

10
00:00:42,010 --> 00:00:47,910
You'll be seeing that we are having now notice as well as react, stratify into our application, react

11
00:00:47,920 --> 00:00:52,540
to if I mean and I see that react, I consider also being inserted into our application.

12
00:00:53,170 --> 00:00:59,050
Now close this and we are given apparently a class name of container now after this bear.

13
00:00:59,070 --> 00:01:03,850
And what we're going to have is another additive into this to create an additive, and we're giving

14
00:01:03,850 --> 00:01:08,560
it a class name of equal to a generator.

15
00:01:10,810 --> 00:01:12,520
Now after the generator closed it.

16
00:01:12,760 --> 00:01:17,690
And this is again going to have this is going to have an edge to tag.

17
00:01:18,820 --> 00:01:21,760
This dog is going to spell out password generator.

18
00:01:21,760 --> 00:01:22,880
So basically it's going to head to.

19
00:01:27,070 --> 00:01:33,060
Now, after this extra, we are going to have another delve into our application and this that's good

20
00:01:33,100 --> 00:01:33,610
and there is.

21
00:01:34,940 --> 00:01:40,310
There and give it a last name of equal to generate a password.

22
00:01:43,480 --> 00:01:48,100
Generating a school password now, again, close it.

23
00:01:48,460 --> 00:01:52,360
So now this is supposed to contain a password, but since we are not.

24
00:01:52,750 --> 00:01:53,890
So let's give it a.

25
00:01:56,440 --> 00:01:56,880
Comment.

26
00:01:57,250 --> 00:01:58,930
This is going to contain a password.

27
00:02:02,580 --> 00:02:04,230
And out of the bathroom to have a button.

28
00:02:06,170 --> 00:02:10,010
Now, this button is going to contain different properties such as click and reference.

29
00:02:10,250 --> 00:02:17,120
But since we are not at this point of time using as RAM, therefore we won't be giving it the left property

30
00:02:17,120 --> 00:02:17,450
now.

31
00:02:17,570 --> 00:02:18,800
So let's leave it as button.

32
00:02:19,910 --> 00:02:25,470
Now, this button is going to contain a clipboard icon, which will be putting up shortly, but not

33
00:02:25,500 --> 00:02:26,960
for I just leave with a clipboard.

34
00:02:28,410 --> 00:02:31,120
And after this button, what they're going to have is another.

35
00:02:31,410 --> 00:02:32,690
So let's create another day.

36
00:02:35,280 --> 00:02:38,610
Now, if least creating a clipboard, we're going to have a death.

37
00:02:39,630 --> 00:02:42,930
And this is going to be a class name to create a death.

38
00:02:44,620 --> 00:02:46,060
And give it a class name.

39
00:02:48,550 --> 00:02:49,870
Equal to form group.

40
00:02:54,780 --> 00:02:55,860
Now, close this.

41
00:03:00,010 --> 00:03:01,810
Now, this day is going to contain a label.

42
00:03:01,840 --> 00:03:07,520
So let's create a label, and this label is going to have an original for which it be equal to password

43
00:03:07,520 --> 00:03:07,840
length.

44
00:03:12,850 --> 00:03:17,320
So after this password learned what they're going to have inside it is password.

45
00:03:20,500 --> 00:03:23,260
OK, so you have a labor now, now we need to create an input piece.

46
00:03:23,410 --> 00:03:29,440
So let's create an input field and this input field is going to be equal to of name.

47
00:03:29,830 --> 00:03:30,820
So we'll give it a name.

48
00:03:32,430 --> 00:03:34,260
Of password length.

49
00:03:37,060 --> 00:03:42,400
And after this name, what we're going to have is an I.D. which will be again equal to possibly.

50
00:03:46,790 --> 00:03:53,270
Now, after the input field is having a name as well as our I.D., we're going to give it a type which

51
00:03:53,270 --> 00:04:00,500
is going to be equal to numbers because it's going to print in the numbers that it's going to specify

52
00:04:00,500 --> 00:04:03,140
the number of characters that we want in our password.

53
00:04:03,860 --> 00:04:06,990
So after this number will go to Max and Min as usual.

54
00:04:06,990 --> 00:04:14,720
So we'll give it to Max, which will be equal to, let's say, 20, because we do not want letters exceeding

55
00:04:14,720 --> 00:04:15,290
120 20.

56
00:04:15,380 --> 00:04:18,350
So 20 and after max men.

57
00:04:20,380 --> 00:04:22,960
Which will be equal to, I guess, seven.

58
00:04:24,150 --> 00:04:26,940
Minimum, we want seven characters or seven passwords.

59
00:04:27,300 --> 00:04:32,010
Now this is going to have another two properties default view, as well as our own change, but since

60
00:04:32,010 --> 00:04:36,630
we have an added state to it, so leave it for now and I'll close this.

61
00:04:37,670 --> 00:04:40,900
Now we're going to have another day, so just copy this particular device.

62
00:04:42,790 --> 00:04:43,780
So another day of.

63
00:04:46,200 --> 00:04:53,370
And this is again going to hold its last name, which is going to be equal to one group.

64
00:04:55,050 --> 00:04:59,040
No one should close this and create a closing.

65
00:05:00,720 --> 00:05:05,760
OK, so this is again going to have a label, so let's create a label and this label is going to have

66
00:05:05,760 --> 00:05:09,570
an original form, which is going to be equal to uppercase letters.

67
00:05:15,500 --> 00:05:20,600
So now after this system for let's just close this, this is a label, and this is going to spell out

68
00:05:21,080 --> 00:05:21,800
include.

69
00:05:24,640 --> 00:05:25,450
Uppercase letters.

70
00:05:27,290 --> 00:05:32,000
That is, if our users want uppercase letters in their password to uppercase.

71
00:05:33,820 --> 00:05:34,210
Letters.

72
00:05:34,270 --> 00:05:36,850
OK, so then we need to have an input field, right?

73
00:05:37,360 --> 00:05:39,280
So let's create an input field now.

74
00:05:41,340 --> 00:05:48,120
When input and this input is going to have a name and let's just give it an input name of IS.

75
00:05:57,780 --> 00:06:03,750
So after the input name, what we want to have a typewriter, so this is going to be of type being equal

76
00:06:03,750 --> 00:06:04,530
to checkbooks.

77
00:06:05,190 --> 00:06:11,010
OK, so we have a type that triple check works with a name and we also need to give it an I.D. So let's

78
00:06:11,010 --> 00:06:13,650
just give it an ID, which is again going to be equal to.

79
00:06:16,850 --> 00:06:17,340
Upper.

80
00:06:19,410 --> 00:06:20,340
Case letters.

81
00:06:22,490 --> 00:06:29,570
All right, so we have a name as well as at 80 now this esteemed will, so even if you have an immunity

82
00:06:29,570 --> 00:06:31,760
to it already has went OK, so it's fine.

83
00:06:32,030 --> 00:06:37,490
So after the I.D., as well as a name and a Typekit box, let's just close this.

84
00:06:41,600 --> 00:06:46,250
So, all right, we are having our two days, which are containing our farm groups.

85
00:06:46,550 --> 00:06:51,380
Now let's create a third one, but before we do that, let's just say and I see that there's some sort

86
00:06:51,380 --> 00:06:51,750
of error.

87
00:06:51,770 --> 00:06:52,880
Let me see what it is.

88
00:06:58,410 --> 00:07:01,350
Earlier today with an extra live, now we see that.

89
00:07:02,840 --> 00:07:03,950
It has already been resolved.

90
00:07:04,070 --> 00:07:05,300
Let's take a look at the application.

91
00:07:08,950 --> 00:07:12,790
So here you have a password length as well as include uppercase for the check checkbox.

92
00:07:13,030 --> 00:07:15,280
Now I know it's not looking great or even nice.

93
00:07:15,640 --> 00:07:19,540
I really wonder if you and David qualifies to be called as an application.

94
00:07:19,810 --> 00:07:23,170
But then again, at this point, he says, so let's just forget it for now.

95
00:07:24,650 --> 00:07:29,450
And after the two, this will be creating end of the day, so let's just go out of this particular day

96
00:07:29,810 --> 00:07:33,800
and create another day and then you close your farm group.

97
00:07:38,180 --> 00:07:41,060
Now, let's just close this, and it is going to have a label.

98
00:07:43,010 --> 00:07:44,600
Now, this label is supposed to.

99
00:07:47,240 --> 00:07:53,390
This is going to have a label and this label is going to have an HDMI four.

100
00:07:53,660 --> 00:07:56,030
And this estimate is going to be equal to lowercase.

101
00:07:59,020 --> 00:08:03,190
And after the symbol for we are going to have in it include.

102
00:08:06,240 --> 00:08:07,050
Lowercase.

103
00:08:09,160 --> 00:08:09,730
Letters.

104
00:08:09,850 --> 00:08:12,520
OK, so we have a label now, let's create an input.

105
00:08:13,930 --> 00:08:19,720
And this too is going to have an I.D., which is going to be equal to lowercase letter.

106
00:08:21,840 --> 00:08:22,980
Lowercase hyphen.

107
00:08:24,840 --> 00:08:25,440
Let us.

108
00:08:31,970 --> 00:08:37,880
And after the lowercase letters, it will give it a class name, which will be again be equated lowercase

109
00:08:37,880 --> 00:08:38,450
letters.

110
00:08:39,910 --> 00:08:41,320
Lowercase letters.

111
00:08:42,800 --> 00:08:45,920
Now, I just forgot it is even supposed to be lowercase letters.

112
00:08:48,260 --> 00:08:50,570
OK, so we have a last name.

113
00:08:51,110 --> 00:08:52,790
Now let's just close this.

114
00:08:53,170 --> 00:08:54,920
This is going to be called a checkbox again.

115
00:08:55,580 --> 00:08:56,540
Now close this.

116
00:09:02,370 --> 00:09:03,840
So I'll give you a check box now.

117
00:09:04,380 --> 00:09:08,430
So we have three fund groups now, the debt numbers, as well as four symbols.

118
00:09:08,820 --> 00:09:11,100
So after these two, I would be complete.

119
00:09:11,490 --> 00:09:13,440
So now let's just copy this again.

120
00:09:16,060 --> 00:09:17,200
And based it.

121
00:09:18,660 --> 00:09:20,500
For symbols and phone numbers.

122
00:09:21,500 --> 00:09:27,540
So novel assembles from group and will be just replacing this lower case to let me select all the lower

123
00:09:27,590 --> 00:09:28,070
cases.

124
00:09:30,070 --> 00:09:35,780
All right, so we have all the legal cases in our controller, so this one group is going to have include

125
00:09:35,800 --> 00:09:37,180
numbers in law cases.

126
00:09:40,280 --> 00:09:45,740
Include numbers, OK, so this is what we call as multi-course editing, if you want to do the same,

127
00:09:45,740 --> 00:09:51,110
then just select any particular text and which you feel like is going to be similar for other text and

128
00:09:51,110 --> 00:09:53,330
click on control and control and control it.

129
00:09:53,660 --> 00:09:56,630
So it is going to select all those text with the same text.

130
00:09:57,170 --> 00:10:02,840
Now you can edit it, and if you want to get rid of the meticulousness, just click on Escape and is

131
00:10:02,840 --> 00:10:03,560
going to remove them.

132
00:10:04,520 --> 00:10:06,960
So we have our include numbers.

133
00:10:07,010 --> 00:10:10,390
And this is again going to hold a type of checkbox.

134
00:10:11,030 --> 00:10:12,590
And OK, so we are done now.

135
00:10:13,070 --> 00:10:13,280
Here.

136
00:10:13,490 --> 00:10:15,850
Now let's come to a death.

137
00:10:16,010 --> 00:10:20,450
And again, the lower case is but this time it is not going to have.

138
00:10:21,460 --> 00:10:24,430
The lowercase as a symbol for our ideal class.

139
00:10:24,620 --> 00:10:28,990
So again, select all these three, and this time we're going to have include symbols.

140
00:10:35,890 --> 00:10:38,500
OK, so we have you already know.

141
00:10:39,250 --> 00:10:42,180
I mean, the smell, all a hit is ready.

142
00:10:42,760 --> 00:10:44,950
So now if if we just take a look at our application.

143
00:10:46,800 --> 00:10:51,240
So ABC checkboxes, but we are we able to check them?

144
00:10:51,790 --> 00:10:53,460
We can specify a password length.

145
00:10:54,600 --> 00:10:55,740
We can increase them.

146
00:10:56,860 --> 00:11:03,550
We can decrease them, but as usual, it won't go below seven and it won't go above 20.

147
00:11:04,570 --> 00:11:07,000
This is a minimum and maximum range.

148
00:11:07,630 --> 00:11:10,300
So in the next step is to add this into application.

149
00:11:10,750 --> 00:11:13,810
So let's just head back and add something to our application.

150
00:11:14,290 --> 00:11:16,930
And for that purpose, moving into a stage with the thesis.

151
00:11:17,590 --> 00:11:21,820
But just moving here, one territory we need to even imported into a root directory.

152
00:11:22,240 --> 00:11:24,430
So how do you abduct Jews?

153
00:11:25,580 --> 00:11:27,950
There is a Abdul GSX, OK, here it is.

154
00:11:28,700 --> 00:11:33,050
Now we need to employ this particular file, so let's just import styles.

155
00:11:35,410 --> 00:11:41,540
And said just mean victories does not see, as is so very important now.

156
00:11:41,910 --> 00:11:43,900
Now it's time to get in the application.