Now we start creating a UI, and for that purpose, just get rid of this actual tag that we have over
here.
So it'll be starting with our UI and this is going to contain a class name of container, not app.
So let's just give it a class name of container.
And before we go any further, I just open up a terminal and we would like to add another dependency
on traveler application, and this time it is going to be the ikonso and BMI.
React.
I don't know how this is going to install our reactions into our application, and we just take a look
into a package for Jason.
You'll be seeing that we are having now notice as well as react, stratify into our application, react
to if I mean and I see that react, I consider also being inserted into our application.
Now close this and we are given apparently a class name of container now after this bear.
And what we're going to have is another additive into this to create an additive, and we're giving
it a class name of equal to a generator.
Now after the generator closed it.
And this is again going to have this is going to have an edge to tag.
This dog is going to spell out password generator.
So basically it's going to head to.
Now, after this extra, we are going to have another delve into our application and this that's good
and there is.
There and give it a last name of equal to generate a password.
Generating a school password now, again, close it.
So now this is supposed to contain a password, but since we are not.
So let's give it a.
Comment.
This is going to contain a password.
And out of the bathroom to have a button.
Now, this button is going to contain different properties such as click and reference.
But since we are not at this point of time using as RAM, therefore we won't be giving it the left property
now.
So let's leave it as button.
Now, this button is going to contain a clipboard icon, which will be putting up shortly, but not
for I just leave with a clipboard.
And after this button, what they're going to have is another.
So let's create another day.
Now, if least creating a clipboard, we're going to have a death.
And this is going to be a class name to create a death.
And give it a class name.
Equal to form group.
Now, close this.
Now, this day is going to contain a label.
So let's create a label, and this label is going to have an original for which it be equal to password
length.
So after this password learned what they're going to have inside it is password.
OK, so you have a labor now, now we need to create an input piece.
So let's create an input field and this input field is going to be equal to of name.
So we'll give it a name.
Of password length.
And after this name, what we're going to have is an I.D. which will be again equal to possibly.
Now, after the input field is having a name as well as our I.D., we're going to give it a type which
is going to be equal to numbers because it's going to print in the numbers that it's going to specify
the number of characters that we want in our password.
So after this number will go to Max and Min as usual.
So we'll give it to Max, which will be equal to, let's say, 20, because we do not want letters exceeding
120 20.
So 20 and after max men.
Which will be equal to, I guess, seven.
Minimum, we want seven characters or seven passwords.
Now this is going to have another two properties default view, as well as our own change, but since
we have an added state to it, so leave it for now and I'll close this.
Now we're going to have another day, so just copy this particular device.
So another day of.
And this is again going to hold its last name, which is going to be equal to one group.
No one should close this and create a closing.
OK, so this is again going to have a label, so let's create a label and this label is going to have
an original form, which is going to be equal to uppercase letters.
So now after this system for let's just close this, this is a label, and this is going to spell out
include.
Uppercase letters.
That is, if our users want uppercase letters in their password to uppercase.
Letters.
OK, so then we need to have an input field, right?
So let's create an input field now.
When input and this input is going to have a name and let's just give it an input name of IS.
So after the input name, what we want to have a typewriter, so this is going to be of type being equal
to checkbooks.
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
just give it an ID, which is again going to be equal to.
Upper.
Case letters.
All right, so we have a name as well as at 80 now this esteemed will, so even if you have an immunity
to it already has went OK, so it's fine.
So after the I.D., as well as a name and a Typekit box, let's just close this.
So, all right, we are having our two days, which are containing our farm groups.
Now let's create a third one, but before we do that, let's just say and I see that there's some sort
of error.
Let me see what it is.
Earlier today with an extra live, now we see that.
It has already been resolved.
Let's take a look at the application.
So here you have a password length as well as include uppercase for the check checkbox.
Now I know it's not looking great or even nice.
I really wonder if you and David qualifies to be called as an application.
But then again, at this point, he says, so let's just forget it for now.
And after the two, this will be creating end of the day, so let's just go out of this particular day
and create another day and then you close your farm group.
Now, let's just close this, and it is going to have a label.
Now, this label is supposed to.
This is going to have a label and this label is going to have an HDMI four.
And this estimate is going to be equal to lowercase.
And after the symbol for we are going to have in it include.
Lowercase.
Letters.
OK, so we have a label now, let's create an input.
And this too is going to have an I.D., which is going to be equal to lowercase letter.
Lowercase hyphen.
Let us.
And after the lowercase letters, it will give it a class name, which will be again be equated lowercase
letters.
Lowercase letters.
Now, I just forgot it is even supposed to be lowercase letters.
OK, so we have a last name.
Now let's just close this.
This is going to be called a checkbox again.
Now close this.
So I'll give you a check box now.
So we have three fund groups now, the debt numbers, as well as four symbols.
So after these two, I would be complete.
So now let's just copy this again.
And based it.
For symbols and phone numbers.
So novel assembles from group and will be just replacing this lower case to let me select all the lower
cases.
All right, so we have all the legal cases in our controller, so this one group is going to have include
numbers in law cases.
Include numbers, OK, so this is what we call as multi-course editing, if you want to do the same,
then just select any particular text and which you feel like is going to be similar for other text and
click on control and control and control it.
So it is going to select all those text with the same text.
Now you can edit it, and if you want to get rid of the meticulousness, just click on Escape and is
going to remove them.
So we have our include numbers.
And this is again going to hold a type of checkbox.
And OK, so we are done now.
Here.
Now let's come to a death.
And again, the lower case is but this time it is not going to have.
The lowercase as a symbol for our ideal class.
So again, select all these three, and this time we're going to have include symbols.
OK, so we have you already know.
I mean, the smell, all a hit is ready.
So now if if we just take a look at our application.
So ABC checkboxes, but we are we able to check them?
We can specify a password length.
We can increase them.
We can decrease them, but as usual, it won't go below seven and it won't go above 20.
This is a minimum and maximum range.
So in the next step is to add this into application.
So let's just head back and add something to our application.
And for that purpose, moving into a stage with the thesis.
But just moving here, one territory we need to even imported into a root directory.
So how do you abduct Jews?
There is a Abdul GSX, OK, here it is.
Now we need to employ this particular file, so let's just import styles.
And said just mean victories does not see, as is so very important now.
Now it's time to get in the application.