OK, now we'll be creating the count component.
What is the ground component that will keep track of the number of items which are being inserted into
the database and that would be handled by the count component.
So that will be creating inside these components for only.
Let us go inside here and create a file that would be going to door to Jesus.
So the very first thing which we do is we import the boilerplate code.
It is right on at sea.
It will give us the initial cold.
Like we do in any other components to.
There is nothing we have to do.
Just try and age for tag here, which will give us a discount.
So for example, right now it's empty so that although we do like whenever there is a count of zero,
so we have to display empty and do that.
Well, that's not a problem at all.
So I've done that now.
Let me just grab this inside the abductees find.
So.
Let me important first.
So both.
So from.
Components.
Coming.
So we have done this right now, all we have to import it here.
Gone.
Yeah, and we see it would.
Oh, when I go to the browser, so you can see this is empty right now.
So we'll add the functionality later on, but let us post in this styling part and all that you need
to do for the very first thing that we need to bring it in the center and everything else basically.
Before that, we need to provide some styling.
So let us go and provide some styling to it for inside discount.
First of all, I'll give it a classmate name.
This is for basically this device so that they will have a class name of.
Found.
We'll save this.
And inside this, Tyler, Texas.
We will come here and will the.
Exists.
Tell us what they can't.
And I guess that would be this, yes, it would be something like this display lacks the sort of thing
in the Senate that I do when I check in the browser.
Nothing really happens.
And that on.
OK, no problem.
Let me go to this, but OK, so.
And displays flags, and there is a little bit of.
It's too close to default, defeat the ordinary box, so we have to provide some space in there for
that.
We will be giving a margin top margin off of any big since.
Next, we will be giving a line items to center because.
The same thing which we gave here, so this this would make things in the U.S..
A line items and a freebie in the center next will be giving some far, I turn turn.
Now I think there should be in the band.
You can see that is our dinner, the top and the text in the center and whatever.
Like, there is a proper equal my dinner, the left and the right.
So that is what?
Done so far.
Next.
You provide some of those stylings so that it will be a foreign family, basically.
So that's going to be your start copying and pasting.
You can find that on Google forms.
That's like really common.
Go.
Well, here I can just.
Maybe I can just, first of all, write formed family and say here.
This one, I work.
So.
I need a different one.
But I'll be grabbing.
Been.
And I guess we could.
So this is different from what you want for that MP or the what was the no more, so this will be the
foreign family for that.
Well, that's it for this first ministerial.
Ought to be rather.
And see, there's a fund, it looks a little bit like clean and neat.
Well, this is what we really wanted.
Next, we'll be moving on to creating that.
Input fields and all, and there will tie the title there to Bill Typekit description and all of that
stuff, so that will be creating now.
Before that, let me just, first of all, create the folder.
This is what I have typed so far, and the font family basically have given, and all the ground work
is almost like we'll get back to it once we give this value or dynamics to it right now to start the
quarter, what I typed it will display, but as soon as I give it up.
And the then it would not be so much a problem to next will be creating input component, which will
take the input.
So let's go ahead and create that input component or whatever you want to call it, basically the component
which will take the input and which would be responsible for creating the post.
And what a of blog or whatever so will create will go inside the components that will create the file
with the name of.
The idea dances and inside to hear now this is the file which would be responsible for the input for
years and on for the very first thing which Peter was, we'll import the boilerplate code you can call
me and we'll click on this episode and here we will type R and see.
He will be called the icon the boilerplate or the starting code for off.
Criteria are component.
Now let us test if it's one or two, let me just first try to get that.
Could he hurt?
To.
Component and when I say this and and if I see if it's there in the browser after empty.
No, it's not that.
No, what's the reason it's not like displaying?
Because we have not imported it inside the gorgeous file, right?
So it's really, really crucial to import any file in the as far as right.
So I will go to our board.
Yes.
And I will I appeared.
That import.
The year.
To put on components and then let's create idea like this.
Their destination on this file, basically.
And after that, we'll call this inside the like, whatever the like syntax for calling the.
Component, so Hannah will fight.
Create.
If you are.
And that closed.
And then I save it, I know if I go to the.
You can see it that.
You can see after them did that as a creative component.
Now we want to give some like functionality to the creator, the component, what basically it will
do is it will take input.
The first input will be titled second will be a description that would also be a button which will be
used to like post our blog, which we see whenever we click that button.
So there should be a blog post.
So that is what the functionality would be for this creative component.
And then we'll get some styling to it, and all the components would be related to this creative component
only because whatever we create here, that would be displayed down in the post and this empty or the
component also is in some way dependent on the creative component because.
Whatever you created, whatever the number of posts you create, that number of posts will be displayed
here and in this ground component right now, it's empty.
We have started to empty but will add a functionality which will make this dynamic.
And whatever we Typekit and we add a post that will be counted, for example, if that is one post,
the value of this empty would be one.
And if that is true, it would be two.
And if I delete the poster back to one, that is what we want to create next.
So next we will be creating the I will be giving functionality.
This created a component that will do in the next video.