1
00:00:00,500 --> 00:00:04,310
So now that you have installed the package, let's go ahead and make use of it.

2
00:00:04,910 --> 00:00:06,410
So let me clear this up.

3
00:00:07,400 --> 00:00:10,760
And we have another criminal and only one.

4
00:00:12,170 --> 00:00:14,000
I think I closed the one.

5
00:00:14,070 --> 00:00:17,430
So let me just start at 10 p.m. Start.

6
00:00:17,450 --> 00:00:18,410
OK, we don't need it.

7
00:00:19,370 --> 00:00:20,990
We all started when we wandered.

8
00:00:22,870 --> 00:00:29,260
Now we will create another component that will be the site Pomodoro, so that will be collecting and

9
00:00:29,260 --> 00:00:35,920
started the components folder so it will be sacked from on board or d'audience.

10
00:00:38,180 --> 00:00:41,370
And that is it for.

11
00:00:41,780 --> 00:00:44,630
I guess I have it, I have the wrong spelling.

12
00:00:45,790 --> 00:00:47,380
Typos, typos.

13
00:00:48,100 --> 00:00:52,270
Typos are the worst enemies of developers and programmers.

14
00:00:55,240 --> 00:00:55,870
Start somewhere.

15
00:00:56,710 --> 00:01:00,340
Yeah, I will grab the boilerplate code using our.

16
00:01:01,890 --> 00:01:03,060
Lovely extension.

17
00:01:04,190 --> 00:01:06,750
So that will be key.

18
00:01:08,030 --> 00:01:15,860
And we got the gold now we will create the basic structure first, then we'll give the styling and then

19
00:01:15,860 --> 00:01:24,740
we will give the functionality using simple find efficient rule, which you should follow while developing

20
00:01:24,740 --> 00:01:25,460
our web app.

21
00:01:28,540 --> 00:01:37,090
Now inside this div, I will be giving the class name also in line and then going according to that

22
00:01:37,600 --> 00:01:40,540
there, Stuart will give a class name first.

23
00:01:41,620 --> 00:01:46,420
And for this, the class name would be from container.

24
00:01:48,430 --> 00:01:48,910
Bomb.

25
00:01:50,750 --> 00:01:53,960
Because this is the page where we will be giving.

26
00:01:54,350 --> 00:01:56,270
Oh, why did not, it would.

27
00:02:03,590 --> 00:02:06,080
Why my team isn't working.

28
00:02:09,230 --> 00:02:09,990
That's the problem.

29
00:02:12,140 --> 00:02:14,900
What is the problem is this problem?

30
00:02:20,690 --> 00:02:22,130
Who will be?

31
00:02:24,370 --> 00:02:24,820
Bomb.

32
00:02:26,930 --> 00:02:27,520
And Dana.

33
00:02:29,290 --> 00:02:30,310
And now it was.

34
00:02:31,490 --> 00:02:33,890
OK, now inside of this, we'll have a phone.

35
00:02:34,880 --> 00:02:38,750
Oh, let me give a form or not phone.

36
00:02:40,040 --> 00:02:40,520
So.

37
00:02:42,510 --> 00:02:52,860
Action and all we do not give anything right now will just to provide a basic form inside of this inside

38
00:02:52,860 --> 00:02:57,930
the form we needed to handle summit and all, but I acknowledge, does this give the basic structure?

39
00:02:58,720 --> 00:03:00,090
So now we'll have another day.

40
00:03:00,210 --> 00:03:02,280
So that will be the proper.

41
00:03:06,280 --> 00:03:09,880
We put rapper and woong, we have the.

42
00:03:11,170 --> 00:03:17,200
And this is a really, really efficient way of writing the devs with the glasses.

43
00:03:17,320 --> 00:03:24,100
You can just provide us a question mark and then you can just provide any string here, and that string

44
00:03:24,100 --> 00:03:27,280
will be given as a class name to that particular device.

45
00:03:28,240 --> 00:03:32,890
OK, so this is the like cool feature of this group.

46
00:03:34,440 --> 00:03:36,840
Now, after that, they've been put apart.

47
00:03:37,860 --> 00:03:41,230
We have given their input wrappers of what will be inside this.

48
00:03:41,250 --> 00:03:46,140
Of course, there will be input because we have given input, clapper will be having input.

49
00:03:47,570 --> 00:03:53,030
Sorry, this no input type would be no, not next.

50
00:03:53,090 --> 00:03:53,600
Remember?

51
00:03:54,580 --> 00:03:58,660
This you need to remember in what type will be.

52
00:03:59,420 --> 00:04:02,590
No, and there would be name.

53
00:04:04,990 --> 00:04:06,520
Name would be what?

54
00:04:08,300 --> 00:04:09,290
This is for the work.

55
00:04:10,160 --> 00:04:13,550
And next, we'll be having break for the break.

56
00:04:14,240 --> 00:04:21,110
But before that, we will have the one June also and the value a, but we will give that one too big

57
00:04:21,120 --> 00:04:21,950
and don't get too.

58
00:04:23,220 --> 00:04:23,640
OK.

59
00:04:24,180 --> 00:04:26,520
And let me give a last name also to.

60
00:04:28,820 --> 00:04:29,540
Last name.

61
00:04:32,200 --> 00:04:33,410
As input.

62
00:04:35,910 --> 00:04:40,080
And let me just copy this same thing three times.

63
00:04:42,070 --> 00:04:43,880
So do you know the shortcut?

64
00:04:44,080 --> 00:04:47,810
Let me tell you that the shift out and down keep.

65
00:04:49,800 --> 00:04:51,080
Biblical copied three times.

66
00:04:51,230 --> 00:04:55,590
No, let me change the names for the second one.

67
00:04:55,610 --> 00:04:57,380
That would be a short break.

68
00:05:03,340 --> 00:05:07,760
So hard, but it's hard one would be long break.

69
00:05:13,050 --> 00:05:17,790
And the values and all we will be giving back in a moment.

70
00:05:18,150 --> 00:05:22,380
Right now, we have just given this a basic input.

71
00:05:23,230 --> 00:05:25,680
Now we will have a button after this.

72
00:05:25,680 --> 00:05:27,810
Do you have a button?

73
00:05:29,930 --> 00:05:37,120
Barton and we will give our time to this item, and that will be summit.

74
00:05:41,050 --> 00:05:45,700
Summit bottom and inside this, we will give our text so there will be a time.

75
00:05:51,490 --> 00:05:52,040
Retirement.

76
00:05:53,000 --> 00:05:54,380
Until now, we say saved.

77
00:05:56,000 --> 00:05:56,420
Now.

78
00:05:58,260 --> 00:06:07,010
We will give this styling to it, because that is how it will look good, and that is what we wanted.

79
00:06:08,440 --> 00:06:13,990
So apart from that, after this function, there will be the.

80
00:06:15,660 --> 00:06:22,440
JavaScript, basically, there will all be the function which are responsible whenever this thing triggers

81
00:06:22,440 --> 00:06:22,650
up.

82
00:06:23,860 --> 00:06:26,590
So all of that will be there.

83
00:06:28,030 --> 00:06:29,530
So let us give some styling.

84
00:06:29,890 --> 00:06:37,240
Now we have two classes here, though, like three basically from container, the input wrapper and

85
00:06:37,240 --> 00:06:37,870
then the.

86
00:06:38,950 --> 00:06:46,390
Input, so that is what we'll do inside the next door to CSIS after the Barton wrapper and within two.

87
00:06:47,330 --> 00:06:49,700
We'll give some content or.

88
00:06:52,700 --> 00:06:53,600
But from.

89
00:06:55,260 --> 00:07:00,360
Container and inside the container will give the text alone.

90
00:07:05,740 --> 00:07:05,930
That.

91
00:07:07,470 --> 00:07:13,740
It isn't the only thing which you want to give to the Colvin and next will give to the input rapper.

92
00:07:17,490 --> 00:07:23,970
Input to the airport and inside of this will give the margin that would be a one one five audience.

93
00:07:27,250 --> 00:07:35,290
And next, we'll give now the starting to the input rapid input component like the input, which is

94
00:07:35,290 --> 00:07:40,960
that inside the input wrap up now we'll be giving this styling to this because that is the main thing.

95
00:07:41,620 --> 00:07:42,970
Now let me start.

96
00:07:44,430 --> 00:07:45,570
First of all, we Typekit.

97
00:07:46,930 --> 00:07:49,420
The input, the input.

98
00:07:53,000 --> 00:07:53,240
But.

99
00:07:55,550 --> 00:07:56,060
Input.

100
00:07:59,340 --> 00:08:00,510
And that will be a hard.

101
00:08:01,930 --> 00:08:05,830
First thing that will be a heart third excel.

102
00:08:07,550 --> 00:08:17,210
And next, there will be of it, and that with will be all 230 pixels, will that equal?

103
00:08:18,550 --> 00:08:22,420
And next, there will be fighting.

104
00:08:27,270 --> 00:08:30,390
And that padding would be of to audio.

105
00:08:31,540 --> 00:08:32,010
Basically.

106
00:08:33,500 --> 00:08:36,500
After that, we'll be giving the background color.

107
00:08:39,990 --> 00:08:41,170
Background color.

108
00:08:41,790 --> 00:08:48,120
And that would be a hex code for I think I have their tax code.

109
00:08:48,720 --> 00:08:48,990
Yeah.

110
00:08:50,380 --> 00:08:50,770
This one.

111
00:08:54,860 --> 00:08:59,210
Next, we'll have our color, and I think I have that also.

112
00:09:00,590 --> 00:09:07,970
So that is a little hex code and that is the C nine e c e exactly this one.

113
00:09:10,940 --> 00:09:13,040
And I don't want any border.

114
00:09:13,820 --> 00:09:19,280
I don't want that to look like old age button, which we had in the east, too many lives.

115
00:09:20,660 --> 00:09:21,590
We will give our.

116
00:09:23,190 --> 00:09:24,120
Border as none.

117
00:09:26,100 --> 00:09:28,130
Border, none.

118
00:09:29,400 --> 00:09:32,790
And after that, there will be the border radius.

119
00:09:33,630 --> 00:09:35,040
They could be done with them.

120
00:09:36,090 --> 00:09:39,180
So border radius will be 50 percent because we want to make it around.

121
00:09:40,420 --> 00:09:41,500
Well, 50 percent.

122
00:09:43,330 --> 00:09:47,560
And after that, there would be the margin, right?

123
00:09:50,140 --> 00:09:51,370
Margin, right?

124
00:09:52,120 --> 00:09:54,280
And that would be point three audience.

125
00:09:56,520 --> 00:10:04,650
When three RDM and there will be we want the tax to be a line at center, so we will add the tax allowance

126
00:10:04,650 --> 00:10:13,330
rental property here and there are two, basically that is one to justify renting center an excellent

127
00:10:13,330 --> 00:10:18,930
centre, so you need to understand the difference in both of them.

128
00:10:19,380 --> 00:10:20,850
The text align center.

129
00:10:20,850 --> 00:10:28,740
What it does is that it will align everything which is there in that line, in the like, in the one

130
00:10:28,740 --> 00:10:30,080
line, in the center.

131
00:10:31,980 --> 00:10:38,760
That has nothing to do with bringing everything in the center of the screen, no, that is aligning

132
00:10:38,760 --> 00:10:45,540
the enterprise, aligning the item, sorry and justify control center brings everything in the center.

133
00:10:46,560 --> 00:10:55,410
Like if you argue, see us as property of Justified Content Center to our do so whatever it is that

134
00:10:55,410 --> 00:10:59,510
inside that div that will be in this and that will become indecent.

135
00:11:00,360 --> 00:11:02,670
So that is all it is there.

136
00:11:04,360 --> 00:11:07,750
So after the margin, right, will give the text line.

137
00:11:12,380 --> 00:11:13,220
And that doesn't.

138
00:11:15,480 --> 00:11:20,630
All the buttons will be in the center with the help of this next will be having the foreign sides.

139
00:11:24,720 --> 00:11:25,350
One size.

140
00:11:26,700 --> 00:11:27,780
That left 14.

141
00:11:29,360 --> 00:11:29,570
It.

142
00:11:32,610 --> 00:11:32,830
Yeah.

143
00:11:33,240 --> 00:11:33,630
This one.

144
00:11:34,780 --> 00:11:43,270
Now, I think this is it for the input component and in the input wrapper, we have given the basic

145
00:11:43,270 --> 00:11:45,780
structure we have given the CSIS.

146
00:11:46,090 --> 00:11:54,040
Now what we'll do is we'll give the functionality using JavaScript to that particular particular like

147
00:11:54,220 --> 00:11:54,820
component.

148
00:11:55,300 --> 00:12:00,910
We will go to the next, we'll go to the third Pomodoro, Node.js and we'll get do that.

149
00:12:02,100 --> 00:12:02,910
See in the next video.