Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,120 --> 00:00:03,330
So, as I mentioned,
2
00:00:03,330 --> 00:00:05,640
I now want to add a Card component
3
00:00:05,640 --> 00:00:08,270
and then work on the meal items.
4
00:00:08,270 --> 00:00:10,310
Now, I will start with the Card,
5
00:00:10,310 --> 00:00:12,600
and for that in the UI folder
6
00:00:12,600 --> 00:00:15,283
I will add a Card JS file.
7
00:00:16,340 --> 00:00:20,610
Attached you also find a Card.module.css file
8
00:00:20,610 --> 00:00:23,670
with some styling for that card.
9
00:00:23,670 --> 00:00:26,360
And this will be a super simple component.
10
00:00:26,360 --> 00:00:28,840
It will just be a wrapper component,
11
00:00:28,840 --> 00:00:33,060
which provides some HTML structure and some CSS code
12
00:00:33,060 --> 00:00:35,100
for any content you want.
13
00:00:35,100 --> 00:00:38,280
And therefore this is a component which could be used
14
00:00:38,280 --> 00:00:42,560
in very different places throughout the application,
15
00:00:42,560 --> 00:00:46,053
which is why this is such a general UI component.
16
00:00:47,120 --> 00:00:48,370
It wants some props
17
00:00:48,370 --> 00:00:51,720
because we will need to access props children
18
00:00:51,720 --> 00:00:54,920
to get access to the wrapped content.
19
00:00:54,920 --> 00:00:57,333
And of course we export it here.
20
00:00:58,210 --> 00:00:59,900
We will also need some styles
21
00:00:59,900 --> 00:01:04,900
so we can import classes from Card.module.css already.
22
00:01:07,140 --> 00:01:11,270
And now in here I want to have a very simple markup,
23
00:01:11,270 --> 00:01:13,800
we'll just return a div here
24
00:01:13,800 --> 00:01:18,270
which then wraps props children so that whatever is passed
25
00:01:18,270 --> 00:01:21,940
between the opening and closing tag of the Card component
26
00:01:21,940 --> 00:01:24,243
is in the end used inside of Card.
27
00:01:25,240 --> 00:01:27,670
And on that div we can then add a class
28
00:01:27,670 --> 00:01:32,670
of classes.card using that CSS class I defined here.
29
00:01:34,440 --> 00:01:36,080
And that's it already.
30
00:01:36,080 --> 00:01:39,640
With that back in the AvailableMeals component here
31
00:01:39,640 --> 00:01:43,053
I want to use that Card to wrap this unordered list.
32
00:01:43,890 --> 00:01:48,890
So, here we can import, and we should import,
33
00:01:49,100 --> 00:01:54,100
Card from going up one level, UI Card,
34
00:01:54,880 --> 00:01:59,880
like that to make that component available in this file.
35
00:01:59,950 --> 00:02:04,170
And with that imported we can simply wrap
36
00:02:04,170 --> 00:02:07,133
our unordered list with Card.
37
00:02:08,820 --> 00:02:10,289
And if we do that and save everything
38
00:02:10,289 --> 00:02:12,283
this already looks much nicer.
39
00:02:14,590 --> 00:02:17,590
Now, of course the meal items
40
00:02:17,590 --> 00:02:20,780
don't have the final look I want to have.
41
00:02:20,780 --> 00:02:22,810
And therefore I will add a new component
42
00:02:22,810 --> 00:02:24,380
in the Meals folder,
43
00:02:24,380 --> 00:02:27,660
but to make sure that we don't have too many components
44
00:02:27,660 --> 00:02:29,490
sitting side by side here
45
00:02:29,490 --> 00:02:31,757
I will actually add a subfolder, MealItem.
46
00:02:32,900 --> 00:02:34,990
Now, if you add a subfolder or not
47
00:02:34,990 --> 00:02:37,900
also comes down to your personal preferences.
48
00:02:37,900 --> 00:02:41,980
I'm doing it here, again, to group all the components
49
00:02:41,980 --> 00:02:43,930
that will be dealing with rendering
50
00:02:43,930 --> 00:02:45,700
a single meal item together
51
00:02:45,700 --> 00:02:48,210
because it turns out that I will actually build
52
00:02:48,210 --> 00:02:52,730
two components for rendering one meal item.
53
00:02:52,730 --> 00:02:54,860
And you will see which components these are
54
00:02:54,860 --> 00:02:55,993
in just a second.
55
00:02:56,860 --> 00:03:00,390
So, in the MealItem folder, which is in the Meals folder,
56
00:03:00,390 --> 00:03:03,760
I will add a MealItem JS file.
57
00:03:03,760 --> 00:03:06,300
And attached, of course, unsurprisingly,
58
00:03:06,300 --> 00:03:11,300
you find a MealItem.module.css file with some styling.
59
00:03:13,230 --> 00:03:16,890
And then here we can create our MealItem component
60
00:03:16,890 --> 00:03:21,563
which receives some props, so our component function,
61
00:03:22,490 --> 00:03:24,113
and of course export it.
62
00:03:25,230 --> 00:03:30,000
And now let's work on the markup for these meal items.
63
00:03:30,000 --> 00:03:34,440
For that I will return, whoops, I will return a list item.
64
00:03:34,440 --> 00:03:37,300
That's the wrapper around every meal item,
65
00:03:37,300 --> 00:03:41,130
which semantically makes sense because all these meal items
66
00:03:41,130 --> 00:03:43,420
will be rendered in an unordered list.
67
00:03:43,420 --> 00:03:46,343
So, having li elements makes a lot of sense,
68
00:03:47,330 --> 00:03:49,840
but inside of that li element
69
00:03:49,840 --> 00:03:52,923
I then want to have two divs side by side.
70
00:03:53,840 --> 00:03:57,540
And in the first div we'll have a h3 tag
71
00:03:57,540 --> 00:04:00,383
where I want to output the name of that meal.
72
00:04:01,420 --> 00:04:05,070
And I expect to get that name through props
73
00:04:05,070 --> 00:04:08,040
because we are rendering these meal items
74
00:04:08,040 --> 00:04:11,210
for all the meals in the DUMMY_MEALS array.
75
00:04:11,210 --> 00:04:13,980
So, therefore here in the MealItem component
76
00:04:15,940 --> 00:04:18,420
I will now access props.name.
77
00:04:18,420 --> 00:04:21,060
Of course on which prop you expect
78
00:04:21,060 --> 00:04:23,080
to get that name is up to you.
79
00:04:23,080 --> 00:04:26,330
You could also name this props.title, or .n,
80
00:04:26,330 --> 00:04:27,740
or whatever you want.
81
00:04:27,740 --> 00:04:31,680
It's your component so it's up to you which props,
82
00:04:31,680 --> 00:04:34,020
which attributes you could say,
83
00:04:34,020 --> 00:04:37,460
should later be set on that component.
84
00:04:37,460 --> 00:04:39,010
You just need to make sure
85
00:04:39,010 --> 00:04:40,850
that whatever names you're using here
86
00:04:40,850 --> 00:04:45,000
to access the data are the prop names you later use
87
00:04:45,000 --> 00:04:47,993
in AvailableMeals for passing down the data.
88
00:04:49,050 --> 00:04:54,050
So, here I will go for props name, and I will reformat this.
89
00:04:54,380 --> 00:04:57,130
And below that h3 tag I'll add a div
90
00:04:57,130 --> 00:04:59,740
where I want to output their description.
91
00:04:59,740 --> 00:05:03,120
And I'll therefore access a description prop here.
92
00:05:03,120 --> 00:05:06,600
Again, the prop names are up to you.
93
00:05:06,600 --> 00:05:11,600
And another div with the price, however, here, whoops,
94
00:05:14,130 --> 00:05:16,340
however, here I actually don't want to access
95
00:05:16,340 --> 00:05:18,980
props price like this but instead I will add
96
00:05:18,980 --> 00:05:21,180
a little constant here before we return
97
00:05:21,180 --> 00:05:22,890
which I'll name price.
98
00:05:22,890 --> 00:05:26,460
And this constant will simply format
99
00:05:26,460 --> 00:05:28,190
the price a little bit.
100
00:05:28,190 --> 00:05:30,503
For this I'll use a template literal.
101
00:05:31,590 --> 00:05:34,190
And I'll put a dollar sign,
102
00:05:34,190 --> 00:05:36,240
and then use this special syntax
103
00:05:36,240 --> 00:05:38,780
with dollar sign curly braces.
104
00:05:38,780 --> 00:05:40,830
So, we got two dollar signs here,
105
00:05:40,830 --> 00:05:44,550
one simply to output the character dollar sign
106
00:05:44,550 --> 00:05:47,600
and one in combination with the curly braces
107
00:05:47,600 --> 00:05:52,120
to inject dynamic content into this template literal.
108
00:05:52,120 --> 00:05:53,710
And the dynamic content
109
00:05:53,710 --> 00:05:57,763
I want to inject is props.price.toFixed2.
110
00:05:58,920 --> 00:05:59,880
And this will simply make sure
111
00:05:59,880 --> 00:06:02,563
that we always render two decimal places.
112
00:06:04,220 --> 00:06:06,440
And then it's this price constant,
113
00:06:06,440 --> 00:06:08,770
which I'll output here in this div
114
00:06:08,770 --> 00:06:11,070
simply to output this formatted price
115
00:06:11,070 --> 00:06:14,853
with two decimal places and a dollar sign in front of it.
116
00:06:17,350 --> 00:06:20,070
And then here in this second div
117
00:06:20,070 --> 00:06:23,060
I want to render a simple form
118
00:06:23,060 --> 00:06:27,810
which allows users to enter the amount you want to use here,
119
00:06:27,810 --> 00:06:30,590
the amount of meals you want to add to the Cart,
120
00:06:30,590 --> 00:06:33,700
and then the Add to Cart button.
121
00:06:33,700 --> 00:06:36,230
And that's this extra component
122
00:06:36,230 --> 00:06:37,430
which I'm going to add.
123
00:06:37,430 --> 00:06:39,750
A component which holds this form
124
00:06:39,750 --> 00:06:42,210
to not have all this form markup
125
00:06:42,210 --> 00:06:44,543
and logic in this component.
126
00:06:45,680 --> 00:06:47,890
So, therefore here I will already add
127
00:06:47,890 --> 00:06:52,890
a MealItemForm.js file,
128
00:06:53,100 --> 00:06:56,510
and we'll work on that in a second as well.
129
00:06:56,510 --> 00:06:57,830
Before we do that though
130
00:06:57,830 --> 00:07:00,600
let's work on the styling for the meal item.
131
00:07:00,600 --> 00:07:03,940
And therefore since we already added the CSS file
132
00:07:03,940 --> 00:07:08,843
I will import classes from MealItem.module.css.
133
00:07:09,880 --> 00:07:11,480
And now here on the list item
134
00:07:11,480 --> 00:07:14,633
we can add a class name of classes.meal,
135
00:07:15,770 --> 00:07:19,530
on the div here for the description
136
00:07:19,530 --> 00:07:23,910
I will add a class name of classes.description,
137
00:07:23,910 --> 00:07:28,763
and on the price its class name classes.price.
138
00:07:30,110 --> 00:07:32,630
And that's the meal item finished now.
139
00:07:32,630 --> 00:07:34,410
Now, before we work on the form
140
00:07:34,410 --> 00:07:36,280
we can already use the meal item
141
00:07:36,280 --> 00:07:38,853
in the AvailableMeals component.
142
00:07:40,010 --> 00:07:42,689
There at the top we just need to import
143
00:07:42,689 --> 00:07:47,689
MealItem from ./MealItem to dive into that MealItem folder,
144
00:07:48,430 --> 00:07:50,110
and then again MealItem to access
145
00:07:50,110 --> 00:07:52,763
the MealItem file in that folder.
146
00:07:54,370 --> 00:07:57,930
And then here, where we map our DUMMY_MEALS,
147
00:07:57,930 --> 00:08:02,690
we now can map them to a meal item instead of a list item.
148
00:08:02,690 --> 00:08:07,113
So, MealItem like this as a self-closing component,
149
00:08:07,960 --> 00:08:10,250
and there we now should add a key.
150
00:08:10,250 --> 00:08:12,870
We should've added this before as well with the list item,
151
00:08:12,870 --> 00:08:15,050
but it was just temporary.
152
00:08:15,050 --> 00:08:17,000
But now we should definitely add it,
153
00:08:17,000 --> 00:08:21,543
and access meal.id here because every DUMMY_MEAL has an ID.
154
00:08:23,050 --> 00:08:27,530
And I will also pass in the name prop
155
00:08:27,530 --> 00:08:31,170
because in MealItem I am accessing the name.
156
00:08:31,170 --> 00:08:35,440
I'm also accessing description and price,
157
00:08:35,440 --> 00:08:40,289
and therefore I will pass in the name with meal.name,
158
00:08:40,289 --> 00:08:45,290
the description with meal.description,
159
00:08:45,620 --> 00:08:50,620
and the price with meal.price.
160
00:08:50,630 --> 00:08:53,593
And I'll reformat this to make this easier to read.
161
00:08:55,080 --> 00:08:57,660
Now, if you preferred that you could also
162
00:08:57,660 --> 00:08:59,550
pass in the overall meal
163
00:08:59,550 --> 00:09:02,750
instead of these separate props.
164
00:09:02,750 --> 00:09:05,650
And inside of MealItem you would then have to access
165
00:09:05,650 --> 00:09:08,920
props.meal.description and so on.
166
00:09:08,920 --> 00:09:10,420
I'm not doing this here,
167
00:09:10,420 --> 00:09:13,193
but this is an alternative you could definitely go for.
168
00:09:14,120 --> 00:09:17,223
But I will go for the separate props here.
169
00:09:18,200 --> 00:09:19,270
And with that saved
170
00:09:19,270 --> 00:09:21,920
we should have something like this already.
171
00:09:21,920 --> 00:09:24,080
Now, let's work on the form,
172
00:09:24,080 --> 00:09:26,110
which should appear here on the right,
173
00:09:26,110 --> 00:09:28,443
for adding them to the Cart.
13582
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.