1
00:00:00,210 --> 00:00:02,710
OK, now we'll be creating the count component.

2
00:00:02,820 --> 00:00:08,970
What is the ground component that will keep track of the number of items which are being inserted into

3
00:00:08,970 --> 00:00:14,010
the database and that would be handled by the count component.

4
00:00:14,010 --> 00:00:17,160
So that will be creating inside these components for only.

5
00:00:17,790 --> 00:00:22,830
Let us go inside here and create a file that would be going to door to Jesus.

6
00:00:25,130 --> 00:00:30,140
So the very first thing which we do is we import the boilerplate code.

7
00:00:32,450 --> 00:00:35,300
It is right on at sea.

8
00:00:36,260 --> 00:00:38,660
It will give us the initial cold.

9
00:00:39,610 --> 00:00:42,130
Like we do in any other components to.

10
00:00:43,680 --> 00:00:45,840
There is nothing we have to do.

11
00:00:45,910 --> 00:00:50,040
Just try and age for tag here, which will give us a discount.

12
00:00:50,470 --> 00:00:58,350
So for example, right now it's empty so that although we do like whenever there is a count of zero,

13
00:00:58,350 --> 00:01:01,550
so we have to display empty and do that.

14
00:01:02,130 --> 00:01:03,660
Well, that's not a problem at all.

15
00:01:05,190 --> 00:01:07,230
So I've done that now.

16
00:01:07,240 --> 00:01:10,920
Let me just grab this inside the abductees find.

17
00:01:12,000 --> 00:01:12,300
So.

18
00:01:18,050 --> 00:01:19,340
Let me important first.

19
00:01:20,680 --> 00:01:21,820
So both.

20
00:01:22,930 --> 00:01:24,370
So from.

21
00:01:27,510 --> 00:01:28,350
Components.

22
00:01:30,260 --> 00:01:30,710
Coming.

23
00:01:31,960 --> 00:01:35,740
So we have done this right now, all we have to import it here.

24
00:01:37,840 --> 00:01:38,350
Gone.

25
00:01:39,590 --> 00:01:41,230
Yeah, and we see it would.

26
00:01:42,470 --> 00:01:47,510
Oh, when I go to the browser, so you can see this is empty right now.

27
00:01:48,580 --> 00:01:56,800
So we'll add the functionality later on, but let us post in this styling part and all that you need

28
00:01:56,800 --> 00:02:02,410
to do for the very first thing that we need to bring it in the center and everything else basically.

29
00:02:02,890 --> 00:02:05,200
Before that, we need to provide some styling.

30
00:02:05,200 --> 00:02:09,670
So let us go and provide some styling to it for inside discount.

31
00:02:10,210 --> 00:02:11,980
First of all, I'll give it a classmate name.

32
00:02:12,190 --> 00:02:17,170
This is for basically this device so that they will have a class name of.

33
00:02:19,730 --> 00:02:20,280
Found.

34
00:02:21,390 --> 00:02:22,290
We'll save this.

35
00:02:23,200 --> 00:02:25,510
And inside this, Tyler, Texas.

36
00:02:28,090 --> 00:02:30,660
We will come here and will the.

37
00:02:32,220 --> 00:02:32,750
Exists.

38
00:02:33,960 --> 00:02:35,940
Tell us what they can't.

39
00:02:37,060 --> 00:02:44,560
And I guess that would be this, yes, it would be something like this display lacks the sort of thing

40
00:02:44,570 --> 00:02:48,670
in the Senate that I do when I check in the browser.

41
00:02:49,860 --> 00:02:50,910
Nothing really happens.

42
00:02:52,820 --> 00:02:54,070
And that on.

43
00:02:55,270 --> 00:02:56,290
OK, no problem.

44
00:02:56,380 --> 00:02:59,200
Let me go to this, but OK, so.

45
00:03:00,450 --> 00:03:05,550
And displays flags, and there is a little bit of.

46
00:03:07,140 --> 00:03:13,350
It's too close to default, defeat the ordinary box, so we have to provide some space in there for

47
00:03:13,350 --> 00:03:13,560
that.

48
00:03:13,560 --> 00:03:19,590
We will be giving a margin top margin off of any big since.

49
00:03:21,760 --> 00:03:26,770
Next, we will be giving a line items to center because.

50
00:03:28,000 --> 00:03:31,390
The same thing which we gave here, so this this would make things in the U.S..

51
00:03:33,500 --> 00:03:41,250
A line items and a freebie in the center next will be giving some far, I turn turn.

52
00:03:41,530 --> 00:03:45,160
Now I think there should be in the band.

53
00:03:46,220 --> 00:03:52,910
You can see that is our dinner, the top and the text in the center and whatever.

54
00:03:52,970 --> 00:03:56,840
Like, there is a proper equal my dinner, the left and the right.

55
00:03:58,220 --> 00:03:59,420
So that is what?

56
00:04:00,510 --> 00:04:01,380
Done so far.

57
00:04:02,240 --> 00:04:02,810
Next.

58
00:04:04,020 --> 00:04:09,300
You provide some of those stylings so that it will be a foreign family, basically.

59
00:04:10,090 --> 00:04:12,300
So that's going to be your start copying and pasting.

60
00:04:13,290 --> 00:04:15,330
You can find that on Google forms.

61
00:04:15,940 --> 00:04:17,460
That's like really common.

62
00:04:20,000 --> 00:04:20,240
Go.

63
00:04:21,510 --> 00:04:23,280
Well, here I can just.

64
00:04:27,110 --> 00:04:31,820
Maybe I can just, first of all, write formed family and say here.

65
00:04:32,920 --> 00:04:34,630
This one, I work.

66
00:04:36,900 --> 00:04:37,140
So.

67
00:04:38,210 --> 00:04:39,170
I need a different one.

68
00:04:40,250 --> 00:04:41,450
But I'll be grabbing.

69
00:04:43,110 --> 00:04:43,400
Been.

70
00:04:47,130 --> 00:04:48,360
And I guess we could.

71
00:04:49,930 --> 00:04:55,570
So this is different from what you want for that MP or the what was the no more, so this will be the

72
00:04:55,570 --> 00:04:56,640
foreign family for that.

73
00:04:57,450 --> 00:05:00,360
Well, that's it for this first ministerial.

74
00:05:04,790 --> 00:05:06,530
Ought to be rather.

75
00:05:08,510 --> 00:05:12,890
And see, there's a fund, it looks a little bit like clean and neat.

76
00:05:13,730 --> 00:05:15,890
Well, this is what we really wanted.

77
00:05:17,490 --> 00:05:20,440
Next, we'll be moving on to creating that.

78
00:05:22,210 --> 00:05:29,480
Input fields and all, and there will tie the title there to Bill Typekit description and all of that

79
00:05:29,480 --> 00:05:32,570
stuff, so that will be creating now.

80
00:05:33,810 --> 00:05:37,230
Before that, let me just, first of all, create the folder.

81
00:05:41,240 --> 00:05:48,530
This is what I have typed so far, and the font family basically have given, and all the ground work

82
00:05:48,530 --> 00:05:55,900
is almost like we'll get back to it once we give this value or dynamics to it right now to start the

83
00:05:55,910 --> 00:05:59,860
quarter, what I typed it will display, but as soon as I give it up.

84
00:06:01,150 --> 00:06:09,760
And the then it would not be so much a problem to next will be creating input component, which will

85
00:06:09,760 --> 00:06:10,630
take the input.

86
00:06:11,090 --> 00:06:18,100
So let's go ahead and create that input component or whatever you want to call it, basically the component

87
00:06:18,100 --> 00:06:21,960
which will take the input and which would be responsible for creating the post.

88
00:06:22,720 --> 00:06:30,610
And what a of blog or whatever so will create will go inside the components that will create the file

89
00:06:31,300 --> 00:06:32,950
with the name of.

90
00:06:34,910 --> 00:06:45,610
The idea dances and inside to hear now this is the file which would be responsible for the input for

91
00:06:45,610 --> 00:06:52,180
years and on for the very first thing which Peter was, we'll import the boilerplate code you can call

92
00:06:52,690 --> 00:06:59,580
me and we'll click on this episode and here we will type R and see.

93
00:06:59,650 --> 00:07:05,860
He will be called the icon the boilerplate or the starting code for off.

94
00:07:07,080 --> 00:07:10,140
Criteria are component.

95
00:07:11,020 --> 00:07:16,560
Now let us test if it's one or two, let me just first try to get that.

96
00:07:19,190 --> 00:07:19,940
Could he hurt?

97
00:07:25,150 --> 00:07:25,600
To.

98
00:07:27,770 --> 00:07:37,370
Component and when I say this and and if I see if it's there in the browser after empty.

99
00:07:37,910 --> 00:07:38,740
No, it's not that.

100
00:07:38,750 --> 00:07:41,210
No, what's the reason it's not like displaying?

101
00:07:41,750 --> 00:07:45,380
Because we have not imported it inside the gorgeous file, right?

102
00:07:45,860 --> 00:07:50,580
So it's really, really crucial to import any file in the as far as right.

103
00:07:51,230 --> 00:07:52,600
So I will go to our board.

104
00:07:52,610 --> 00:07:53,120
Yes.

105
00:07:54,760 --> 00:07:56,680
And I will I appeared.

106
00:07:57,630 --> 00:07:59,730
That import.

107
00:08:03,160 --> 00:08:03,720
The year.

108
00:08:05,480 --> 00:08:11,340
To put on components and then let's create idea like this.

109
00:08:11,360 --> 00:08:13,130
Their destination on this file, basically.

110
00:08:13,520 --> 00:08:21,620
And after that, we'll call this inside the like, whatever the like syntax for calling the.

111
00:08:22,840 --> 00:08:24,700
Component, so Hannah will fight.

112
00:08:27,800 --> 00:08:28,490
Create.

113
00:08:29,850 --> 00:08:30,600
If you are.

114
00:08:32,160 --> 00:08:33,010
And that closed.

115
00:08:33,600 --> 00:08:37,860
And then I save it, I know if I go to the.

116
00:08:40,330 --> 00:08:41,410
You can see it that.

117
00:08:43,550 --> 00:08:46,220
You can see after them did that as a creative component.

118
00:08:46,520 --> 00:08:53,210
Now we want to give some like functionality to the creator, the component, what basically it will

119
00:08:53,210 --> 00:08:54,680
do is it will take input.

120
00:08:55,640 --> 00:09:00,740
The first input will be titled second will be a description that would also be a button which will be

121
00:09:00,740 --> 00:09:05,150
used to like post our blog, which we see whenever we click that button.

122
00:09:05,150 --> 00:09:06,980
So there should be a blog post.

123
00:09:07,850 --> 00:09:11,810
So that is what the functionality would be for this creative component.

124
00:09:12,200 --> 00:09:18,350
And then we'll get some styling to it, and all the components would be related to this creative component

125
00:09:18,350 --> 00:09:28,100
only because whatever we create here, that would be displayed down in the post and this empty or the

126
00:09:28,530 --> 00:09:33,110
component also is in some way dependent on the creative component because.

127
00:09:34,900 --> 00:09:40,810
Whatever you created, whatever the number of posts you create, that number of posts will be displayed

128
00:09:40,810 --> 00:09:44,050
here and in this ground component right now, it's empty.

129
00:09:44,710 --> 00:09:48,850
We have started to empty but will add a functionality which will make this dynamic.

130
00:09:49,120 --> 00:09:55,130
And whatever we Typekit and we add a post that will be counted, for example, if that is one post,

131
00:09:55,300 --> 00:09:57,580
the value of this empty would be one.

132
00:09:57,910 --> 00:09:59,590
And if that is true, it would be two.

133
00:09:59,710 --> 00:10:05,350
And if I delete the poster back to one, that is what we want to create next.

134
00:10:05,830 --> 00:10:11,620
So next we will be creating the I will be giving functionality.

135
00:10:11,620 --> 00:10:14,770
This created a component that will do in the next video.