Let us give a basic structure to a criteria component.
So first, we will design it and then we'll give some functionality to it.
So in the beginning, we will not give the functionality.
We'll first design it and then we'll get to inside this dev.
I want this text.
And here I will give off phone.
Basically a form and.
And there will be no action, nothing as of now.
Everything will be given inside the phone.
We'll give.
Some input feels good, the input to get the data, so Hill will give input field.
And.
Input type would be taxed.
It's correct, and that will be a place holder.
What we can give it later on, and everything will give a little less to me just for a strong.
The OK, so after this input will give all.
Next idea, basically, or to give the larger like description, because that would be containing some
more tax trade.
So that is what we want to give.
So next idea.
And.
Name and all names would be content ID.
I don't know.
Do good not giving any idea right now and columns and all that, that's not that's not the part we are
doing right, all those and all those will do.
Because I'm thinking to add a functionality to it, like using JavaScript, that will be the dynamic
thing and that will be doing later on.
So.
Right now, there's nothing just next idea.
And.
And that said, so next, we'll be having about 10.
And that would not only give just a plus sign, but later on, we'll give some styling from material
to it.
So let me just see this and see how this looks.
Basically on the screen or yeah, that is what we wanted.
Not exactly how it's showing up, but this is the basic structure because this will be there for our
title and this will be there for our.
Description, basically, you can destroy your salad, but know and this this will be the plus you can
see this is refreshing because we have not given any functionality to this plus Burton whenever we plus
this floodwater, so there should be something happening and that all we be doing now.
So let me go to the IED and here will do the thing.
So now the first thing is inside the input will give leaseholder.
And that will be having a value of title.
Vital.
And that would be a name, and that will be having a name of title only.
And that will be a function which will add like when we give the.
But OK.
So inside the text area we have on name, of course, which of their content will fair and we'll have
a place holder.
Before the place holder will be giving value, so there will be.
Right.
Your.
Not yet.
Food and.
As of now, no rules and all be given a clear tone.
So.
And for this button, that is a plus sign, but will add a materially weight to it.
So.
Let me see how it looks.
So basically, that is a item, and that is a description and that are some placeholders.
Right?
So that looks better actually providing some styling to the content.
So for that will be needing to write a class name for everything.
And that is we wondered, though before that, let us give some state to this particular component because
there is no JavaScript at the moment and the JavaScript would be written inside like after this, after
this create area and here will be the JavaScript and here will be 36.
Now what are the the 6S plus HTML and now surplus HTML is inside the written Olive's, but your JavaScript
is after this function begins and before the written statement.
So despite right, here is the JavaScript and after the return is detailed script plus that is known
as Deus Ex.
Simple as that.
So now we'll be adding some JavaScript and we'll be adding some functions like on general.
Look, that will be adding inside the input like whenever the inputting, so what would what should
be the action that should take place whenever we like the text area changes or the text inside the text,
the original or what should be the output?
So that is what we do.
So before that, let us go to material way and grab some styling buttons and all.
Before that, let me show you how to install that if you don't know.
So for that, you need to go to our website.
That is material to a website, basically, which is this.
Earlier, it was used, too.
No, not exactly.
This alert was material UIA dot com, but now they changes to Imua dot com.
Basically, they are changing the material UI to music for don't get confusing some tutorials you might
be seeing that is material European import also that is material away.
But don't get confused that right now they have just to emulate.
OK.
So ed, you will first of all, let me disclose it.
First of all, you'll click on this.
Get started.
And here you will see all of the juicier, you know, like how to use it.
And so this is a basic leader documentation, and you will need to see it whenever you get stuck somewhere
or like that.
So that is basically the documentation part.
But the very first thing is how to install install material.
Way before that, there is a command which is written right here and be installed material leeway,
and this command would like to install the material to the system.
So you have got a command?
Know this.
Choose and disinformation.
Yeah, basically, if you just type this and install a mirror material, so that will be installed for
sure on your computer, but I've noticed that you get some errors after that.
So to avoid those errors, you need to.
After that, you need to install the emotion react and the emotion style this separately.
That is why they have given this in one line only.
So you can just install all of these three things at once.
So that's why this this is command virtues.
So just copy this command.
And then you can go to your terminal inside the VA escort, you can go to Terminal four, the smart
card for the terminal is Control and Bektic.
And it is running right now.
So let me.
Stop this forever.
And here you will paste that particular come on by right clicking, you will be missed and this is the
command and beam installment anyway, not the material way.
Yeah, basically that's my Amway material and all of that.
So then you need to wait until I've already installed it.
That's why I do it again.
But for you, you need to do it again.
So that's why I am like not doing it.
So once you do it just ahead and it will take around two seconds and that that will be installed.
So that said, I will not do it, but you have to do it.
So once you install it, you need to go to the website again.
And after coming here, do you need to go to the third tier for the icons or you can just click here
material icons.
And it could take.
Take you to the material, like on speedboats not loading up.
What's the problem?
Yeah, we are here.
So this is basically the material icons from the material white and.
There's an installation for this sidewalk, and you can use it like as it is.
OK, so what do you need to do is to just start here and button?
So this is what we want.
We'll click on this and you just copy this, and then you can go to your.
And then you can just be a stupid.
And between this button instead of this plus it like.
And.
Can.
Yeah, and we'll see if it.
Once you've saved, you can just go too deep, but all of a sudden.
And.
See if it's there.
It's not that because we have not yet started this outward.
Let me clear this and let me do our 10 p.m. start.
And it's starting this year.
So what is successfully started now, let me check.
If that is there or not, let me finish this.
And yeah, you can see the pattern looks a little bigger, although it's not so beautiful, but that
looks better than before.
OK, so there's another one, Stockard, because we started off this hour.
So next, we'll be providing some functionality to this particular form and the input area, so we'll
be getting some JavaScript and G-6 and combined to set the stage and all for the values inside this
so that we'll do here like after this is created.
We'll write, we'll write all of the JavaScript here.
And they're certain that that will do in the next video.