So now that you have installed the package, let's go ahead and make use of it.
So let me clear this up.
And we have another criminal and only one.
I think I closed the one.
So let me just start at 10 p.m. Start.
OK, we don't need it.
We all started when we wandered.
Now we will create another component that will be the site Pomodoro, so that will be collecting and
started the components folder so it will be sacked from on board or d'audience.
And that is it for.
I guess I have it, I have the wrong spelling.
Typos, typos.
Typos are the worst enemies of developers and programmers.
Start somewhere.
Yeah, I will grab the boilerplate code using our.
Lovely extension.
So that will be key.
And we got the gold now we will create the basic structure first, then we'll give the styling and then
we will give the functionality using simple find efficient rule, which you should follow while developing
our web app.
Now inside this div, I will be giving the class name also in line and then going according to that
there, Stuart will give a class name first.
And for this, the class name would be from container.
Bomb.
Because this is the page where we will be giving.
Oh, why did not, it would.
Why my team isn't working.
That's the problem.
What is the problem is this problem?
Who will be?
Bomb.
And Dana.
And now it was.
OK, now inside of this, we'll have a phone.
Oh, let me give a form or not phone.
So.
Action and all we do not give anything right now will just to provide a basic form inside of this inside
the form we needed to handle summit and all, but I acknowledge, does this give the basic structure?
So now we'll have another day.
So that will be the proper.
We put rapper and woong, we have the.
And this is a really, really efficient way of writing the devs with the glasses.
You can just provide us a question mark and then you can just provide any string here, and that string
will be given as a class name to that particular device.
OK, so this is the like cool feature of this group.
Now, after that, they've been put apart.
We have given their input wrappers of what will be inside this.
Of course, there will be input because we have given input, clapper will be having input.
Sorry, this no input type would be no, not next.
Remember?
This you need to remember in what type will be.
No, and there would be name.
Name would be what?
This is for the work.
And next, we'll be having break for the break.
But before that, we will have the one June also and the value a, but we will give that one too big
and don't get too.
OK.
And let me give a last name also to.
Last name.
As input.
And let me just copy this same thing three times.
So do you know the shortcut?
Let me tell you that the shift out and down keep.
Biblical copied three times.
No, let me change the names for the second one.
That would be a short break.
So hard, but it's hard one would be long break.
And the values and all we will be giving back in a moment.
Right now, we have just given this a basic input.
Now we will have a button after this.
Do you have a button?
Barton and we will give our time to this item, and that will be summit.
Summit bottom and inside this, we will give our text so there will be a time.
Retirement.
Until now, we say saved.
Now.
We will give this styling to it, because that is how it will look good, and that is what we wanted.
So apart from that, after this function, there will be the.
JavaScript, basically, there will all be the function which are responsible whenever this thing triggers
up.
So all of that will be there.
So let us give some styling.
Now we have two classes here, though, like three basically from container, the input wrapper and
then the.
Input, so that is what we'll do inside the next door to CSIS after the Barton wrapper and within two.
We'll give some content or.
But from.
Container and inside the container will give the text alone.
That.
It isn't the only thing which you want to give to the Colvin and next will give to the input rapper.
Input to the airport and inside of this will give the margin that would be a one one five audience.
And next, we'll give now the starting to the input rapid input component like the input, which is
that inside the input wrap up now we'll be giving this styling to this because that is the main thing.
Now let me start.
First of all, we Typekit.
The input, the input.
But.
Input.
And that will be a hard.
First thing that will be a heart third excel.
And next, there will be of it, and that with will be all 230 pixels, will that equal?
And next, there will be fighting.
And that padding would be of to audio.
Basically.
After that, we'll be giving the background color.
Background color.
And that would be a hex code for I think I have their tax code.
Yeah.
This one.
Next, we'll have our color, and I think I have that also.
So that is a little hex code and that is the C nine e c e exactly this one.
And I don't want any border.
I don't want that to look like old age button, which we had in the east, too many lives.
We will give our.
Border as none.
Border, none.
And after that, there will be the border radius.
They could be done with them.
So border radius will be 50 percent because we want to make it around.
Well, 50 percent.
And after that, there would be the margin, right?
Margin, right?
And that would be point three audience.
When three RDM and there will be we want the tax to be a line at center, so we will add the tax allowance
rental property here and there are two, basically that is one to justify renting center an excellent
centre, so you need to understand the difference in both of them.
The text align center.
What it does is that it will align everything which is there in that line, in the like, in the one
line, in the center.
That has nothing to do with bringing everything in the center of the screen, no, that is aligning
the enterprise, aligning the item, sorry and justify control center brings everything in the center.
Like if you argue, see us as property of Justified Content Center to our do so whatever it is that
inside that div that will be in this and that will become indecent.
So that is all it is there.
So after the margin, right, will give the text line.
And that doesn't.
All the buttons will be in the center with the help of this next will be having the foreign sides.
One size.
That left 14.
It.
Yeah.
This one.
Now, I think this is it for the input component and in the input wrapper, we have given the basic
structure we have given the CSIS.
Now what we'll do is we'll give the functionality using JavaScript to that particular particular like
component.
We will go to the next, we'll go to the third Pomodoro, Node.js and we'll get do that.
See in the next video.