So let's check the functionality if it's working properly or not.
Basically, the JavaScript is working on art.
So right now, we don't have any displaying particular component which will display our data and on.
So the very the very own testing and displaying function, obviously console dot lock, if you are if
you are in JavaScript, Consolidated Log is your best friend for debugging, for testing everything.
Next, the best thing.
OK.
So let us just try to be.
So we'll consoled our blog.
The.
Not what's not, not not yeah.
And so let me save it.
And I hope the servers running the authorities.
I'm fighting.
Let me take you to the browser and here.
Then we'll pull the console.
So once the console is opened.
I will type something here and I should see something.
We're already seeing the object, which is basically an empty object.
Right now, the title is an empty string and the content is also an empty string.
We are.
So basically, they're talking about how we will see if that captures the text or not.
So here we are, right?
And attribute it.
And you can see whatever I'm typing.
But that thing is being controlled on the log and inside the content can then.
Bared all what I want to be, right?
OK, so and I press, yeah.
So that is what we want to do, and that is done.
But we can also go to the the Devils, which is an awesome browser extension.
It's like really, really helpful.
So let me just move this.
And here we really go to these reactive tools, so you need to install it from the like, it's available
for Google Chrome also and for Microsoft Edge, I don't know, but for Mozilla, it's available for
Firefox, but for whom?
I don't know.
I saw the Ford Edge.
I don't know.
OK, so you can go just here and you can go to this components and it will like whenever you hover over
anything that will be showing and that will also be sort.
Bring the states and all the Western variables.
Everything is being shown.
Let me ask you this.
And now let us try to do the case part.
When you go to the obvious quarterback.
And.
There are things which we don't need any classes like form and in bold and the button, we can just
directly give them the styling because they are the only ones that in this one component that we don't
want, we are not having any other formal input in this particular project.
So we don't want to give any classes.
Actually, we do need to give any classes.
That's what I'm trying to say.
And next, when we go to this style or see this file and here I'll give the form.
And the they formally gave the position, first of all.
Position and that could be the relative position.
And when I say it.
And next, when I give it a little bit of particular pixels, that will be.
With.
That it would be off for 600 pixels.
600 pixels and I see it and I go back to the browser to check if things are going right or not.
Right now, no changes, actually.
And it's just for the.
But.
So ahead of what we'll do is we'll.
We'll do the form.
Styling the very first time, so after the width, we will give up their crown.
Saul Goodman will be excluded and that will be if.
It's been three times that of light, basically.
And next, we'll give up batting, the batting and batting is.
And pixels, maybe for Pollock, for all the four sides.
And after this, we can give it a margin.
Margin and that would be thirty two pixels and auto or the like, right?
So for 50 pixels, for the bottom.
And again, like all, too, for the left, like a left and right or and top and bottom 32 and 50 pixels,
respectively.
And after that, we'll have a background which we have already given think we've already given and next
will give our border radius or the radius.
And that could be a seven.
We'll see it, and then we'll see.
We'll see, you can see.
I bet a couple of changes which took place, but.
Thing is not not completely finished, so we will go back to the idea.
And could you give some more like dialing the border radius we've already given and box shadow?
Book Shadow is zero one Pixel and Pixel four, the quantum, I guess.
And that is a color card, TB and 128 on.
One, twenty eight on.
One, two, eight, and I'll save it, not a it's messy.
All right.
So when I go to the theater and you can see that is like container and it's like that in a particular
border on the ground.
And that is what we actually wanted.
And next, we'll.
We want to reform input.
Now this was just reform of the outer, the outer part, but now we'll move inside and we'll come to
the farm input and dad will give the farm input this one and form text idea that this one.
So we'll give one by one and then it will be reformed by then.
OK, so next we'll come to the farm input.
Form input and.
And the form court that will be our width and the width would be of 100 percent.
And after that, there will be a border and there will be no border because that we want to look like
and what we are seeing.
Also, we don't want any borders.
Let me see and see how that looks.
You can see there is no border town on border at all.
OK, and next, we'll get some more styling that will be of burning and the padding would be four pixels.
And then this.
After that, there will be a margin mortem because doctors are getting too much closer to.
You can see the text area, so we'll give our margin mortem.
There will be a margin bottom.
Margin bottom, and that would be 20 pixels.
And after this, we'll have the outline will be none of then simple and we'll save it.
And now let me show you how that looks in Gaza.
This is how that looks, that it's like maintaining a particular distance from the exterior and it's
fully functional.
That is more like this.
But now we need to install this fence.
But the one thing that we don't need to like besides this will provide some property that will be that
will make this as a non-recyclable bank.
So will you go back?
And I didn't put.
That would be the outline after that one side's.
One size that would be one of you.
And here that he says it'll be none of those, none.
That was it for the form and what next will be starting the tax area, which is responsible for holding
the I like description and the complete note, so.
And that's what we want to do will give the form.
Next.
Idea or this?
Will give the width would be 100 percent.
100 percent.
Of course, that will give water as none.
Let me see it and let me tell you how that looks.
That is the process.
Yeah.
So you can see that looks a little bit similar to our.
Who are like on the introduction project, but we won't do don't want this outline, we don't want this
sizable part.
We will remove that.
Yeah, so we'll just stick with this.
When I click it to print, so that functionality is working fine, but let me just go ahead.
Words are more startling after going on.
We'll provide a rating.
The padding would be like four pixels.
Four pixels and then pixels.
And there should not be any outline when I selected the outline would be done, OK?
And there's none.
And there should be a particular foreign size of the font size and one idea.
That should not be any area size, body size should be enough.
When I say it all back to the browser right now, it's certain because I'm not clicking on because I've
reloaded up even over the page so that expanded the is expanded is set to false when you click, that
is set to true and the functionality happens when I click it and see.
Now this looks a little cleaner.
And the title is good, and whenever I think there is no outline, it also, there's no outline.
That is what next, we're going to study the bottom.
That is the last thing, this component.
So next, we're going to start the bottom.
So you ought to be calm.
And so here we'll style department.
We'll write.
Form and we'll right button.
Inside, this will, first of all, will give the position as absolute position as absolute.
Let me save it and see if that that makes any changes.
So, yeah, it's the this is how we want it.
We don't want to like overlap on that particular component.
All of that.
That will do.
And I have the you what will do is.
Will display Flex Play Flex and after this field to fight the content, to stand, to justify content
as senator.
And after this will align the items to this.
All right.
We'll save it.
And how do we are and we don't see anything much happening here because we want to move it to the right
and we want to give some like color and all to let us do that without further delay.
So here what we'll do is we'll provide the right will like position is right.
Right.
Yeah, and here we give it in pictures like it in the study right after that.
Let me just see him and see if that's.
Yeah.
That's going on and.
Coming back.
After the right position, we'll give some bottom and that will be minus 18 pixels.
Save it, and you can see how that looks.
Looks like a tribute to what it was.
Let me give some color and shape to it.
After this, we'll give it our background.
And that background would be on the TV, and then it'll be two to five.
Next will be 200.
And next will be 18.
So when I say it?
And when I go back.
So you can see that is something happening, but it's not there like completed because we need to like
give some height and water ideas to it.
So that will, you know?
Hmm.
What's after this?
Well, what we'll do is we'll get some color to color would be if.
I thought, yeah, this one.
And after that, what we'll do is we'll give the border as non economic as well as border so that it
would have been none.
And after that, we'll give some border radius to make it like round.
Remember, whenever you want to make that day or any element as a round from square or you don't want
the corners, you'll set the border radius to 50 percent.
That's all.
Don't need to think anything of the border radius will set to 50 percent.
We'll make it round.
OK.
And let me see it and show it to, you can see.
After that, what we'll do is we'll give on with.
It would be of thirty six pixels seem the width and height will be same 36 pixels and that it would
be a height.
It would also be of thirty six pixels.
And after that, what we'll do is we'll give a block shadow.
And that would be zero four and then one pixel, and then that would be typical of that.
Then we'll give the Odyssey B e and then you should have a little bit of one sixty five.
And then we will have, like all seen value.
So one, sixty five only.
And after that, we want the council to be changed as pointed whenever we bring it near the bottom cursor,
not text.
It should be pointer.
Yeah.
And the outline should be no, OK, when I say it and I go back to the browser.
Yeah, that is the final output fee which we were expecting for the create area component.
So this is how we should look and we have the title, we have the content and the button is also like
looking as it was.
So there's no problem with that.
We can definitely customize the colors and on.
I saw one website I would recommend two for the colors and also the actors.
That saw this.
But go ahead.
So this is really awesome website, if you are into frontend development and you want awesome colors
with hex codes and deleted shades and all, this is really good.
OK, so next we'll be moving on to the bitcoin component where you will be displaying all of the post
and all.
So right now, we're just consoling and log.
So next we'll be doing that.
OK, assume the next video.