1
00:00:00,360 --> 00:00:05,610
OK, so now we'll create the card, which will be containing all of the details of that particular cocktail,

2
00:00:05,940 --> 00:00:12,300
like the image and some description and a detailed button which will take us to the like particular

3
00:00:12,810 --> 00:00:14,610
page of that cocktail.

4
00:00:15,060 --> 00:00:19,470
Before that, we need to create a file inside the components.

5
00:00:19,740 --> 00:00:24,540
So here we'll create a file that can go to the components here and create.

6
00:00:28,600 --> 00:00:29,590
Cool for.

7
00:00:30,850 --> 00:00:31,330
Don't you?

8
00:00:33,530 --> 00:00:41,940
And inside this, we'll go to the boilerplate code with a creek of the extension or this an RF key.

9
00:00:42,830 --> 00:00:45,020
And here is the boilerplate code.

10
00:00:45,770 --> 00:00:50,570
And now the first thing which we'll do is we'll import some things.

11
00:00:50,810 --> 00:00:55,880
First of all, will import the link from the reactor out, Adam, but we'll import.

12
00:00:57,130 --> 00:00:57,670
Link.

13
00:00:58,970 --> 00:00:59,600
From.

14
00:01:00,930 --> 00:01:03,150
Of course, we're or talk.

15
00:01:04,380 --> 00:01:05,970
The act, I don't.

16
00:01:07,080 --> 00:01:07,470
OK.

17
00:01:10,330 --> 00:01:16,210
Next, we'll provide some basic structure to the components that will lead this, Dave, and will provide

18
00:01:16,210 --> 00:01:17,290
an article back.

19
00:01:18,010 --> 00:01:20,050
So are the calls.

20
00:01:22,330 --> 00:01:25,870
And, yeah, insert this article, that would be our.

21
00:01:27,040 --> 00:01:31,120
And that they would be retaining that image.

22
00:01:31,360 --> 00:01:33,580
So inside there, they will give an image tag.

23
00:01:34,820 --> 00:01:41,530
And these sorts for the image will be dynamic and will be getting it from the end point.

24
00:01:41,720 --> 00:01:49,310
So right now will not pass anything to it and we'll move further after this, Dave.

25
00:01:49,310 --> 00:01:57,680
What we'll have is another day for Deep Water Park, so we'll give what Dave and inside this there will

26
00:01:57,680 --> 00:01:59,200
be and each tree.

27
00:01:59,900 --> 00:02:05,600
And that will be having the name and we'll have each for.

28
00:02:06,320 --> 00:02:08,690
And that will be having the glass.

29
00:02:10,510 --> 00:02:15,690
Next, we'll have a paragraph back or the piece that we should be having the descriptions, so here

30
00:02:15,690 --> 00:02:16,900
have been discharged in full.

31
00:02:17,710 --> 00:02:23,740
The now what we'll do is we'll create a link and that would be a button inside, which will be taking

32
00:02:23,740 --> 00:02:26,680
us to the details page two.

33
00:02:27,010 --> 00:02:33,460
Before that, let us pass some of the props here, which will be responsible for the dynamic behavior

34
00:02:33,460 --> 00:02:34,660
of our application.

35
00:02:35,210 --> 00:02:38,140
So here we'll pass some objects.

36
00:02:40,660 --> 00:02:49,630
Basically, one object, so there will be things inside like image, name, I.D. info, and we'll have

37
00:02:49,630 --> 00:02:51,280
a glass good.

38
00:02:52,800 --> 00:03:01,020
So that is what we had to do now, and we can now provide some dynamic behavior to our application.

39
00:03:01,860 --> 00:03:05,520
And inside the link, there would be a button.

40
00:03:06,420 --> 00:03:13,920
We'll have a link, a link bag and this link will be taking us to where so this will be to.

41
00:03:16,370 --> 00:03:22,850
Two and inside the back picks, that would be the pot inside the back picks flash.

42
00:03:25,670 --> 00:03:34,880
Bill Glass dollar sign and inside the closest that would be the IED, basically, that there is a particular

43
00:03:34,880 --> 00:03:38,390
IED for the post and that is the IED, which we are passing.

44
00:03:39,230 --> 00:03:47,060
So that is the IED, and now we'll provide some of the blast names for this and that would be outside

45
00:03:47,060 --> 00:03:48,620
the code libraries.

46
00:03:48,860 --> 00:03:49,190
OK.

47
00:03:50,750 --> 00:03:51,410
And.

48
00:03:52,970 --> 00:04:00,990
Remember, we had put this inside, so that will be a relief and there will be a class name, class

49
00:04:01,530 --> 00:04:01,980
name.

50
00:04:03,250 --> 00:04:04,540
Which would be equal to.

51
00:04:07,210 --> 00:04:10,210
And that would be Bolton Beatty and.

52
00:04:12,480 --> 00:04:13,260
Primary.

53
00:04:15,190 --> 00:04:16,960
And this will be details.

54
00:04:18,130 --> 00:04:24,850
This all is tapping just for the sake of this CSIS and will write details here.

55
00:04:26,070 --> 00:04:26,340
Yeah.

56
00:04:26,910 --> 00:04:29,210
Not that bad, just the text.

57
00:04:30,910 --> 00:04:37,030
And next, we'll give some classes to these elements also for the article.

58
00:04:38,510 --> 00:04:40,550
I'll give a last name.

59
00:04:42,470 --> 00:04:45,010
That would be cool to feed.

60
00:04:45,890 --> 00:04:49,580
And inside the image, that would be some dynamic part.

61
00:04:50,180 --> 00:04:52,670
And that's that would be image.

62
00:04:53,860 --> 00:04:57,310
And for the old will be having the name.

63
00:04:57,940 --> 00:04:59,280
And that would be the neat.

64
00:05:00,460 --> 00:05:02,860
And inside this cave.

65
00:05:03,730 --> 00:05:07,950
So what will give a class names that class names people?

66
00:05:09,080 --> 00:05:09,770
Would it be?

67
00:05:11,670 --> 00:05:13,120
IMG and.

68
00:05:14,580 --> 00:05:15,300
Container.

69
00:05:16,750 --> 00:05:19,710
Next, we'll have some other class rock.

70
00:05:20,080 --> 00:05:24,760
That was the basic structure of the application, but we have given some styling now.

71
00:05:25,090 --> 00:05:30,640
So the first thing which we'll do is we'll start off our server right now, sideways, not running so.

72
00:05:32,300 --> 00:05:39,500
And we'll go to the project folder project and inside this that is a directory that is named as cocktail

73
00:05:39,500 --> 00:05:39,670
hour.

74
00:05:39,680 --> 00:05:43,460
So we'll go to this particular directory and we'll type and be start.

75
00:05:47,080 --> 00:05:53,140
And this will take few seconds to start off the server and then we can do some more styling.

76
00:05:53,680 --> 00:06:01,630
And we haven't made this thing dynamic yet, so we'll make this because this is a static venue.

77
00:06:01,990 --> 00:06:09,610
So always remember dynamic things come under calibrate inside the curly braces because that is the part

78
00:06:09,610 --> 00:06:12,670
of the JavaScript to name is a dynamic value.

79
00:06:13,120 --> 00:06:18,490
Basically, if you can just grab this value inside the with no need to write it from scratch, OK?

80
00:06:18,970 --> 00:06:21,340
You can just grab that this in full.

81
00:06:22,530 --> 00:06:27,330
And the details is just the tax which would be shown inside the button.

82
00:06:27,960 --> 00:06:31,290
So there's no problem with that, I guess.

83
00:06:32,070 --> 00:06:35,220
And they're to save it.

84
00:06:36,630 --> 00:06:41,340
I guess that's the only thing which we need to do inside this particular component.

85
00:06:44,470 --> 00:06:50,410
The server is up and running by this thing right here is of no use because we have not yet rendered

86
00:06:50,410 --> 00:06:58,330
it on the browser or on the road component, so we'll create another component that will be responsible

87
00:06:58,330 --> 00:07:00,220
for all of the values.

88
00:07:00,670 --> 00:07:06,180
This is just one guard, you know, and there will be multiple cards that will be like number of cards.

89
00:07:06,190 --> 00:07:11,730
So that should be a component which is responsible for rendering those cards with the computer and do

90
00:07:11,740 --> 00:07:13,030
the cocktail list --.

91
00:07:13,240 --> 00:07:15,460
So that will also be inside the components.

92
00:07:19,020 --> 00:07:20,310
And its name would be.

93
00:07:21,740 --> 00:07:26,750
They'll list gorgeous.

94
00:07:27,920 --> 00:07:28,250
OK.

95
00:07:28,940 --> 00:07:30,410
We'll import a boilerplate code.

96
00:07:33,760 --> 00:07:36,520
And here, William called cockpit a way we foster.

97
00:07:38,600 --> 00:07:41,720
Important, but not important.

98
00:07:44,000 --> 00:07:47,120
They'll throw them and then the location.

99
00:07:48,610 --> 00:07:48,910
Yeah.

100
00:07:49,300 --> 00:07:49,660
Cool.

101
00:07:51,100 --> 00:07:55,720
Right now, we have not yet set up the loading state or the component for the loading that will do.

102
00:07:56,390 --> 00:07:59,860
But next, we'll import global and global context.

103
00:08:01,490 --> 00:08:04,610
OK, so the U.S.

104
00:08:08,100 --> 00:08:08,580
Don?

105
00:08:13,290 --> 00:08:14,010
From this.

106
00:08:15,680 --> 00:08:18,080
So what we need to do next.

107
00:08:19,110 --> 00:08:20,910
Is create content inside.

108
00:08:29,090 --> 00:08:31,780
The name his name would be doctor list.

109
00:08:33,880 --> 00:08:37,360
And list and we'll export back.

110
00:08:42,790 --> 00:08:43,050
Yeah.

111
00:08:44,820 --> 00:08:49,320
Next, had the constant go.

112
00:08:52,180 --> 00:08:55,030
And that would be feels.

113
00:08:58,110 --> 00:08:58,800
Loading.

114
00:09:06,570 --> 00:09:06,960
Based.

115
00:09:09,030 --> 00:09:14,070
Then we'll, first of all, let us go and create the loading component.

116
00:09:14,100 --> 00:09:14,400
OK.

117
00:09:15,960 --> 00:09:17,070
Okay.

118
00:09:17,730 --> 00:09:21,250
I'm extremely sorry, guys, for my voice.

119
00:09:21,300 --> 00:09:26,600
I'm having extremely bad performance, that's why my voice is so messed up.

120
00:09:27,660 --> 00:09:30,000
So the loading component will be inside the components.

121
00:09:31,150 --> 00:09:31,620
OK.

122
00:09:34,370 --> 00:09:35,060
Gorgeous.

123
00:09:37,330 --> 00:09:40,870
And here, of course, boilerplate.

124
00:09:45,120 --> 00:09:46,140
Returning what?

125
00:09:49,510 --> 00:09:51,430
Just today with the glass of floating.

126
00:09:56,520 --> 00:09:56,710
Not.

127
00:09:59,140 --> 00:09:59,830
That's it for this.

128
00:10:01,020 --> 00:10:03,730
Let me disclose this because we don't need it any more.

129
00:10:04,410 --> 00:10:04,920
OK.

130
00:10:05,250 --> 00:10:06,120
Okay.

131
00:10:07,210 --> 00:10:08,410
Inside the shopping list.

132
00:10:09,280 --> 00:10:10,180
We'll import that.

133
00:10:15,650 --> 00:10:17,060
Loading from.

134
00:10:19,070 --> 00:10:20,510
Loading, Yeah.

135
00:10:22,210 --> 00:10:30,550
And next, we'll create some logic here that will be if if.

136
00:10:32,540 --> 00:10:33,110
Loading.

137
00:10:34,530 --> 00:10:42,170
Like, if the loading is what we need to render, we need to render the loading component so simple,

138
00:10:42,560 --> 00:10:42,980
isn't it?

139
00:10:43,940 --> 00:10:44,300
OK.

140
00:10:45,380 --> 00:10:50,690
So then we'll have an a but if statement that is if.

141
00:10:54,130 --> 00:10:55,600
Dart learned.

142
00:10:57,240 --> 00:10:57,720
Is.

143
00:11:01,430 --> 00:11:02,120
Less than one.

144
00:11:03,280 --> 00:11:04,330
Now, what does this mean?

145
00:11:04,670 --> 00:11:08,070
Length is less than one that means simply, we have not received any data.

146
00:11:09,580 --> 00:11:10,810
But we write written.

147
00:11:12,840 --> 00:11:15,300
But it Don needs to.

148
00:11:17,990 --> 00:11:21,770
The class name of the action.

149
00:11:23,860 --> 00:11:24,330
Title.

150
00:11:26,850 --> 00:11:27,140
Yeah.

151
00:11:29,240 --> 00:11:34,760
And we'll right here, oops, no match found.

152
00:11:38,320 --> 00:11:39,190
No, I just found.

153
00:11:43,650 --> 00:11:50,640
OK, so next, we'll be having another written and inside this, that will be the main body.

154
00:11:51,560 --> 00:11:54,710
We'll be here, we'll write section.

155
00:11:57,530 --> 00:12:00,260
Thank in the class name of.

156
00:12:01,040 --> 00:12:01,670
Action.

157
00:12:04,390 --> 00:12:11,860
And now we'll have an edge to the class of section titled section title.

158
00:12:12,940 --> 00:12:14,530
And inside this win, right?

159
00:12:14,730 --> 00:12:15,550
Thanks.

160
00:12:17,630 --> 00:12:18,650
And next.

161
00:12:19,660 --> 00:12:20,630
We'll be having our Dave.

162
00:12:21,380 --> 00:12:24,430
OK, the last name of business and.

163
00:12:28,490 --> 00:12:30,410
Not thought there should be an hyphen.

164
00:12:31,900 --> 00:12:36,970
Cool inside this, there will be some dynamic chords, of course, we'll go with typically releases,

165
00:12:36,970 --> 00:12:37,930
and here we'll vote.

166
00:12:38,170 --> 00:12:42,750
We'll map the data and that would be Coppins Dart map.

167
00:12:44,190 --> 00:12:46,230
And certainly that will be the item.

168
00:12:49,110 --> 00:12:52,050
And here we'll return.

169
00:12:54,900 --> 00:12:57,570
Britain walked.

170
00:12:59,630 --> 00:13:00,680
Got been.

171
00:13:07,130 --> 00:13:13,770
This one, and that would be a key because every element will have a different key so that the item

172
00:13:13,800 --> 00:13:22,010
not simply here will restructure the item object or dari, what I what it is the disparate opener,

173
00:13:22,010 --> 00:13:22,220
but.

174
00:13:24,540 --> 00:13:24,920
OK.

175
00:13:25,500 --> 00:13:25,800
Yeah.

176
00:13:27,010 --> 00:13:29,200
And I guess this is it.

177
00:13:29,350 --> 00:13:30,760
Yeah, this is it.

178
00:13:31,060 --> 00:13:31,780
You can see it.

179
00:13:33,510 --> 00:13:34,990
That are not in the home page.

180
00:13:37,110 --> 00:13:38,520
And how to we, right?

181
00:13:46,120 --> 00:13:48,340
Why it's not giving me an option.

182
00:13:50,750 --> 00:13:56,240
We'll save it, and now we can go to the browser and check if that is something.

183
00:14:01,130 --> 00:14:01,820
There is a new order.