1
00:00:00,120 --> 00:00:03,450
So let's check the functionality if it's working properly or not.

2
00:00:03,540 --> 00:00:05,250
Basically, the JavaScript is working on art.

3
00:00:05,580 --> 00:00:10,770
So right now, we don't have any displaying particular component which will display our data and on.

4
00:00:11,220 --> 00:00:21,450
So the very the very own testing and displaying function, obviously console dot lock, if you are if

5
00:00:21,480 --> 00:00:27,910
you are in JavaScript, Consolidated Log is your best friend for debugging, for testing everything.

6
00:00:27,990 --> 00:00:28,770
Next, the best thing.

7
00:00:29,010 --> 00:00:29,340
OK.

8
00:00:29,730 --> 00:00:33,410
So let us just try to be.

9
00:00:34,950 --> 00:00:38,220
So we'll consoled our blog.

10
00:00:41,440 --> 00:00:41,890
The.

11
00:00:44,150 --> 00:00:46,090
Not what's not, not not yeah.

12
00:00:48,050 --> 00:00:50,270
And so let me save it.

13
00:00:51,190 --> 00:00:54,640
And I hope the servers running the authorities.

14
00:00:56,530 --> 00:00:57,150
I'm fighting.

15
00:00:58,020 --> 00:01:01,650
Let me take you to the browser and here.

16
00:01:05,140 --> 00:01:06,130
Then we'll pull the console.

17
00:01:10,630 --> 00:01:14,830
So once the console is opened.

18
00:01:16,050 --> 00:01:19,050
I will type something here and I should see something.

19
00:01:19,320 --> 00:01:23,460
We're already seeing the object, which is basically an empty object.

20
00:01:23,880 --> 00:01:28,080
Right now, the title is an empty string and the content is also an empty string.

21
00:01:28,330 --> 00:01:29,190
We are.

22
00:01:29,470 --> 00:01:33,570
So basically, they're talking about how we will see if that captures the text or not.

23
00:01:34,200 --> 00:01:35,940
So here we are, right?

24
00:01:37,620 --> 00:01:38,880
And attribute it.

25
00:01:39,330 --> 00:01:42,180
And you can see whatever I'm typing.

26
00:01:42,700 --> 00:01:50,220
But that thing is being controlled on the log and inside the content can then.

27
00:01:51,480 --> 00:01:53,570
Bared all what I want to be, right?

28
00:01:53,700 --> 00:01:56,700
OK, so and I press, yeah.

29
00:01:57,670 --> 00:02:03,010
So that is what we want to do, and that is done.

30
00:02:03,840 --> 00:02:11,850
But we can also go to the the Devils, which is an awesome browser extension.

31
00:02:11,890 --> 00:02:13,720
It's like really, really helpful.

32
00:02:14,270 --> 00:02:16,450
So let me just move this.

33
00:02:18,090 --> 00:02:24,420
And here we really go to these reactive tools, so you need to install it from the like, it's available

34
00:02:24,420 --> 00:02:30,360
for Google Chrome also and for Microsoft Edge, I don't know, but for Mozilla, it's available for

35
00:02:30,360 --> 00:02:33,930
Firefox, but for whom?

36
00:02:33,930 --> 00:02:34,350
I don't know.

37
00:02:34,530 --> 00:02:35,910
I saw the Ford Edge.

38
00:02:35,910 --> 00:02:36,300
I don't know.

39
00:02:36,540 --> 00:02:44,130
OK, so you can go just here and you can go to this components and it will like whenever you hover over

40
00:02:44,130 --> 00:02:47,670
anything that will be showing and that will also be sort.

41
00:02:49,390 --> 00:02:52,150
Bring the states and all the Western variables.

42
00:02:52,450 --> 00:02:53,290
Everything is being shown.

43
00:02:53,830 --> 00:02:54,850
Let me ask you this.

44
00:02:55,300 --> 00:02:58,090
And now let us try to do the case part.

45
00:02:59,610 --> 00:03:01,630
When you go to the obvious quarterback.

46
00:03:02,670 --> 00:03:03,330
And.

47
00:03:04,990 --> 00:03:10,480
There are things which we don't need any classes like form and in bold and the button, we can just

48
00:03:10,480 --> 00:03:17,050
directly give them the styling because they are the only ones that in this one component that we don't

49
00:03:17,050 --> 00:03:21,280
want, we are not having any other formal input in this particular project.

50
00:03:21,280 --> 00:03:22,900
So we don't want to give any classes.

51
00:03:22,990 --> 00:03:24,800
Actually, we do need to give any classes.

52
00:03:24,880 --> 00:03:25,930
That's what I'm trying to say.

53
00:03:26,440 --> 00:03:32,080
And next, when we go to this style or see this file and here I'll give the form.

54
00:03:34,780 --> 00:03:37,870
And the they formally gave the position, first of all.

55
00:03:39,000 --> 00:03:41,340
Position and that could be the relative position.

56
00:03:41,610 --> 00:03:42,540
And when I say it.

57
00:03:43,750 --> 00:03:53,470
And next, when I give it a little bit of particular pixels, that will be.

58
00:03:56,360 --> 00:03:56,690
With.

59
00:03:58,070 --> 00:04:01,040
That it would be off for 600 pixels.

60
00:04:02,330 --> 00:04:11,000
600 pixels and I see it and I go back to the browser to check if things are going right or not.

61
00:04:13,260 --> 00:04:14,580
Right now, no changes, actually.

62
00:04:15,580 --> 00:04:16,350
And it's just for the.

63
00:04:18,120 --> 00:04:18,360
But.

64
00:04:20,240 --> 00:04:21,920
So ahead of what we'll do is we'll.

65
00:04:23,770 --> 00:04:25,390
We'll do the form.

66
00:04:26,510 --> 00:04:29,870
Styling the very first time, so after the width, we will give up their crown.

67
00:04:30,410 --> 00:04:36,850
Saul Goodman will be excluded and that will be if.

68
00:04:39,240 --> 00:04:42,550
It's been three times that of light, basically.

69
00:04:43,320 --> 00:04:49,800
And next, we'll give up batting, the batting and batting is.

70
00:04:53,110 --> 00:04:58,300
And pixels, maybe for Pollock, for all the four sides.

71
00:04:59,020 --> 00:05:04,150
And after this, we can give it a margin.

72
00:05:07,010 --> 00:05:16,310
Margin and that would be thirty two pixels and auto or the like, right?

73
00:05:17,880 --> 00:05:20,820
So for 50 pixels, for the bottom.

74
00:05:21,920 --> 00:05:30,230
And again, like all, too, for the left, like a left and right or and top and bottom 32 and 50 pixels,

75
00:05:30,230 --> 00:05:30,890
respectively.

76
00:05:32,210 --> 00:05:37,590
And after that, we'll have a background which we have already given think we've already given and next

77
00:05:37,610 --> 00:05:40,100
will give our border radius or the radius.

78
00:05:40,580 --> 00:05:42,140
And that could be a seven.

79
00:05:43,620 --> 00:05:46,860
We'll see it, and then we'll see.

80
00:05:48,030 --> 00:05:49,170
We'll see, you can see.

81
00:05:49,530 --> 00:05:53,250
I bet a couple of changes which took place, but.

82
00:05:54,740 --> 00:06:02,330
Thing is not not completely finished, so we will go back to the idea.

83
00:06:03,540 --> 00:06:10,310
And could you give some more like dialing the border radius we've already given and box shadow?

84
00:06:11,880 --> 00:06:21,510
Book Shadow is zero one Pixel and Pixel four, the quantum, I guess.

85
00:06:26,370 --> 00:06:31,530
And that is a color card, TB and 128 on.

86
00:06:33,560 --> 00:06:35,630
One, twenty eight on.

87
00:06:37,080 --> 00:06:41,870
One, two, eight, and I'll save it, not a it's messy.

88
00:06:42,210 --> 00:06:42,690
All right.

89
00:06:42,990 --> 00:06:50,520
So when I go to the theater and you can see that is like container and it's like that in a particular

90
00:06:50,520 --> 00:06:52,440
border on the ground.

91
00:06:53,220 --> 00:06:55,410
And that is what we actually wanted.

92
00:06:55,890 --> 00:06:57,480
And next, we'll.

93
00:06:59,360 --> 00:07:00,680
We want to reform input.

94
00:07:00,770 --> 00:07:07,850
Now this was just reform of the outer, the outer part, but now we'll move inside and we'll come to

95
00:07:07,850 --> 00:07:15,460
the farm input and dad will give the farm input this one and form text idea that this one.

96
00:07:15,480 --> 00:07:18,980
So we'll give one by one and then it will be reformed by then.

97
00:07:19,310 --> 00:07:24,170
OK, so next we'll come to the farm input.

98
00:07:26,590 --> 00:07:28,420
Form input and.

99
00:07:29,630 --> 00:07:35,060
And the form court that will be our width and the width would be of 100 percent.

100
00:07:36,110 --> 00:07:44,120
And after that, there will be a border and there will be no border because that we want to look like

101
00:07:44,120 --> 00:07:44,840
and what we are seeing.

102
00:07:44,840 --> 00:07:46,450
Also, we don't want any borders.

103
00:07:46,460 --> 00:07:48,620
Let me see and see how that looks.

104
00:07:49,610 --> 00:07:53,540
You can see there is no border town on border at all.

105
00:08:00,100 --> 00:08:08,230
OK, and next, we'll get some more styling that will be of burning and the padding would be four pixels.

106
00:08:09,440 --> 00:08:10,930
And then this.

107
00:08:13,780 --> 00:08:18,520
After that, there will be a margin mortem because doctors are getting too much closer to.

108
00:08:18,970 --> 00:08:22,420
You can see the text area, so we'll give our margin mortem.

109
00:08:23,670 --> 00:08:25,350
There will be a margin bottom.

110
00:08:26,730 --> 00:08:30,090
Margin bottom, and that would be 20 pixels.

111
00:08:31,300 --> 00:08:38,590
And after this, we'll have the outline will be none of then simple and we'll save it.

112
00:08:38,590 --> 00:08:41,050
And now let me show you how that looks in Gaza.

113
00:08:41,710 --> 00:08:49,390
This is how that looks, that it's like maintaining a particular distance from the exterior and it's

114
00:08:49,960 --> 00:08:50,920
fully functional.

115
00:08:51,820 --> 00:08:53,150
That is more like this.

116
00:08:54,220 --> 00:08:56,130
But now we need to install this fence.

117
00:08:57,130 --> 00:09:05,500
But the one thing that we don't need to like besides this will provide some property that will be that

118
00:09:05,500 --> 00:09:08,220
will make this as a non-recyclable bank.

119
00:09:09,920 --> 00:09:11,000
So will you go back?

120
00:09:14,630 --> 00:09:15,680
And I didn't put.

121
00:09:18,280 --> 00:09:20,590
That would be the outline after that one side's.

122
00:09:21,580 --> 00:09:23,950
One size that would be one of you.

123
00:09:25,700 --> 00:09:29,690
And here that he says it'll be none of those, none.

124
00:09:30,630 --> 00:09:36,000
That was it for the form and what next will be starting the tax area, which is responsible for holding

125
00:09:36,000 --> 00:09:42,090
the I like description and the complete note, so.

126
00:09:43,060 --> 00:09:45,880
And that's what we want to do will give the form.

127
00:09:47,770 --> 00:09:48,270
Next.

128
00:09:48,980 --> 00:09:50,570
Idea or this?

129
00:09:52,870 --> 00:09:55,260
Will give the width would be 100 percent.

130
00:09:56,590 --> 00:09:57,610
100 percent.

131
00:09:59,140 --> 00:10:02,530
Of course, that will give water as none.

132
00:10:03,280 --> 00:10:05,680
Let me see it and let me tell you how that looks.

133
00:10:06,710 --> 00:10:07,760
That is the process.

134
00:10:08,600 --> 00:10:08,870
Yeah.

135
00:10:09,410 --> 00:10:12,050
So you can see that looks a little bit similar to our.

136
00:10:13,620 --> 00:10:19,680
Who are like on the introduction project, but we won't do don't want this outline, we don't want this

137
00:10:19,920 --> 00:10:20,880
sizable part.

138
00:10:21,510 --> 00:10:22,530
We will remove that.

139
00:10:23,360 --> 00:10:25,720
Yeah, so we'll just stick with this.

140
00:10:29,430 --> 00:10:34,590
When I click it to print, so that functionality is working fine, but let me just go ahead.

141
00:10:36,360 --> 00:10:38,010
Words are more startling after going on.

142
00:10:39,560 --> 00:10:40,640
We'll provide a rating.

143
00:10:43,000 --> 00:10:45,560
The padding would be like four pixels.

144
00:10:47,150 --> 00:10:49,700
Four pixels and then pixels.

145
00:10:51,980 --> 00:10:58,430
And there should not be any outline when I selected the outline would be done, OK?

146
00:10:58,790 --> 00:10:59,390
And there's none.

147
00:11:00,110 --> 00:11:06,590
And there should be a particular foreign size of the font size and one idea.

148
00:11:08,410 --> 00:11:12,230
That should not be any area size, body size should be enough.

149
00:11:12,940 --> 00:11:19,570
When I say it all back to the browser right now, it's certain because I'm not clicking on because I've

150
00:11:19,570 --> 00:11:27,340
reloaded up even over the page so that expanded the is expanded is set to false when you click, that

151
00:11:27,340 --> 00:11:32,140
is set to true and the functionality happens when I click it and see.

152
00:11:33,130 --> 00:11:34,780
Now this looks a little cleaner.

153
00:11:35,860 --> 00:11:40,540
And the title is good, and whenever I think there is no outline, it also, there's no outline.

154
00:11:42,020 --> 00:11:44,600
That is what next, we're going to study the bottom.

155
00:11:45,120 --> 00:11:47,530
That is the last thing, this component.

156
00:11:47,570 --> 00:11:49,040
So next, we're going to start the bottom.

157
00:11:49,550 --> 00:11:51,620
So you ought to be calm.

158
00:11:52,470 --> 00:11:55,010
And so here we'll style department.

159
00:11:55,460 --> 00:11:56,170
We'll write.

160
00:11:57,840 --> 00:12:00,300
Form and we'll right button.

161
00:12:01,820 --> 00:12:08,630
Inside, this will, first of all, will give the position as absolute position as absolute.

162
00:12:09,350 --> 00:12:13,670
Let me save it and see if that that makes any changes.

163
00:12:14,580 --> 00:12:17,400
So, yeah, it's the this is how we want it.

164
00:12:17,730 --> 00:12:20,940
We don't want to like overlap on that particular component.

165
00:12:21,510 --> 00:12:22,080
All of that.

166
00:12:24,620 --> 00:12:25,220
That will do.

167
00:12:27,280 --> 00:12:32,680
And I have the you what will do is.

168
00:12:34,640 --> 00:12:43,550
Will display Flex Play Flex and after this field to fight the content, to stand, to justify content

169
00:12:43,550 --> 00:12:44,420
as senator.

170
00:12:47,560 --> 00:12:51,040
And after this will align the items to this.

171
00:12:53,050 --> 00:12:53,400
All right.

172
00:12:53,920 --> 00:12:54,490
We'll save it.

173
00:12:55,330 --> 00:13:02,350
And how do we are and we don't see anything much happening here because we want to move it to the right

174
00:13:02,350 --> 00:13:07,540
and we want to give some like color and all to let us do that without further delay.

175
00:13:10,270 --> 00:13:15,910
So here what we'll do is we'll provide the right will like position is right.

176
00:13:17,620 --> 00:13:18,010
Right.

177
00:13:19,460 --> 00:13:24,950
Yeah, and here we give it in pictures like it in the study right after that.

178
00:13:25,040 --> 00:13:26,870
Let me just see him and see if that's.

179
00:13:27,580 --> 00:13:27,890
Yeah.

180
00:13:28,670 --> 00:13:30,710
That's going on and.

181
00:13:32,180 --> 00:13:32,840
Coming back.

182
00:13:33,780 --> 00:13:40,500
After the right position, we'll give some bottom and that will be minus 18 pixels.

183
00:13:43,280 --> 00:13:46,400
Save it, and you can see how that looks.

184
00:13:47,360 --> 00:13:50,030
Looks like a tribute to what it was.

185
00:13:50,280 --> 00:13:52,190
Let me give some color and shape to it.

186
00:13:55,250 --> 00:13:58,760
After this, we'll give it our background.

187
00:14:00,110 --> 00:14:06,010
And that background would be on the TV, and then it'll be two to five.

188
00:14:06,890 --> 00:14:08,480
Next will be 200.

189
00:14:09,110 --> 00:14:10,850
And next will be 18.

190
00:14:11,540 --> 00:14:12,590
So when I say it?

191
00:14:13,410 --> 00:14:14,580
And when I go back.

192
00:14:15,580 --> 00:14:22,930
So you can see that is something happening, but it's not there like completed because we need to like

193
00:14:23,350 --> 00:14:26,920
give some height and water ideas to it.

194
00:14:27,250 --> 00:14:28,210
So that will, you know?

195
00:14:29,490 --> 00:14:29,790
Hmm.

196
00:14:30,750 --> 00:14:31,440
What's after this?

197
00:14:31,650 --> 00:14:36,020
Well, what we'll do is we'll get some color to color would be if.

198
00:14:37,410 --> 00:14:38,940
I thought, yeah, this one.

199
00:14:39,600 --> 00:14:45,420
And after that, what we'll do is we'll give the border as non economic as well as border so that it

200
00:14:45,420 --> 00:14:46,140
would have been none.

201
00:14:46,830 --> 00:14:51,100
And after that, we'll give some border radius to make it like round.

202
00:14:51,470 --> 00:14:58,410
Remember, whenever you want to make that day or any element as a round from square or you don't want

203
00:14:58,410 --> 00:15:01,590
the corners, you'll set the border radius to 50 percent.

204
00:15:01,620 --> 00:15:01,980
That's all.

205
00:15:02,520 --> 00:15:08,520
Don't need to think anything of the border radius will set to 50 percent.

206
00:15:08,790 --> 00:15:09,570
We'll make it round.

207
00:15:12,250 --> 00:15:12,610
OK.

208
00:15:12,970 --> 00:15:16,900
And let me see it and show it to, you can see.

209
00:15:19,180 --> 00:15:22,690
After that, what we'll do is we'll give on with.

210
00:15:24,470 --> 00:15:31,520
It would be of thirty six pixels seem the width and height will be same 36 pixels and that it would

211
00:15:31,520 --> 00:15:32,390
be a height.

212
00:15:33,420 --> 00:15:35,550
It would also be of thirty six pixels.

213
00:15:37,010 --> 00:15:40,070
And after that, what we'll do is we'll give a block shadow.

214
00:15:42,580 --> 00:15:49,000
And that would be zero four and then one pixel, and then that would be typical of that.

215
00:15:50,470 --> 00:15:55,330
Then we'll give the Odyssey B e and then you should have a little bit of one sixty five.

216
00:15:56,560 --> 00:16:01,000
And then we will have, like all seen value.

217
00:16:01,240 --> 00:16:02,840
So one, sixty five only.

218
00:16:04,900 --> 00:16:12,910
And after that, we want the council to be changed as pointed whenever we bring it near the bottom cursor,

219
00:16:13,660 --> 00:16:14,500
not text.

220
00:16:14,860 --> 00:16:15,790
It should be pointer.

221
00:16:16,780 --> 00:16:17,000
Yeah.

222
00:16:17,860 --> 00:16:26,140
And the outline should be no, OK, when I say it and I go back to the browser.

223
00:16:27,550 --> 00:16:32,770
Yeah, that is the final output fee which we were expecting for the create area component.

224
00:16:33,260 --> 00:16:41,170
So this is how we should look and we have the title, we have the content and the button is also like

225
00:16:41,170 --> 00:16:42,310
looking as it was.

226
00:16:42,840 --> 00:16:43,960
So there's no problem with that.

227
00:16:43,960 --> 00:16:46,540
We can definitely customize the colors and on.

228
00:16:47,880 --> 00:16:52,250
I saw one website I would recommend two for the colors and also the actors.

229
00:16:53,760 --> 00:16:54,750
That saw this.

230
00:16:56,550 --> 00:16:58,020
But go ahead.

231
00:16:58,260 --> 00:17:04,590
So this is really awesome website, if you are into frontend development and you want awesome colors

232
00:17:04,590 --> 00:17:08,220
with hex codes and deleted shades and all, this is really good.

233
00:17:09,170 --> 00:17:17,220
OK, so next we'll be moving on to the bitcoin component where you will be displaying all of the post

234
00:17:17,220 --> 00:17:17,520
and all.

235
00:17:17,610 --> 00:17:19,650
So right now, we're just consoling and log.

236
00:17:20,070 --> 00:17:22,140
So next we'll be doing that.

237
00:17:22,290 --> 00:17:23,280
OK, assume the next video.