58. Displaying Recipe Details

0:02

S… Speaker 1 (58. Displaying Recipe Details)

In the last lecture,

0:03

S… Speaker 1 (58. Displaying Recipe Details)

we finished this recipe list component.

0:06

S… Speaker 1 (58. Displaying Recipe Details)

Now let's work on the recipe detail.

0:08

S… Speaker 1 (58. Displaying Recipe Details)

Now for the recipe detail here,

0:11

S… Speaker 1 (58. Displaying Recipe Details)

there I want to output the information about the selected recipe.

0:16

S… Speaker 1 (58. Displaying Recipe Details)

So in here,

0:17

S… Speaker 1 (58. Displaying Recipe Details)

in this HTML file,

0:19

S… Speaker 1 (58. Displaying Recipe Details)

I'll add another bootstrap row and then a column spanning

0:23

S… Speaker 1 (58. Displaying Recipe Details)

over the full width.

0:24

S… Speaker 1 (58. Displaying Recipe Details)

And keep in mind,

0:25

S… Speaker 1 (58. Displaying Recipe Details)

the detail will be added to our component here

0:30

S… Speaker 1 (58. Displaying Recipe Details)

in the recipes component.

0:31

S… Speaker 1 (58. Displaying Recipe Details)

So it will be in this column on the right to the list.

0:36

S… Speaker 1 (58. Displaying Recipe Details)

But in there I want to have a column spanning the full available width.

0:40

S… Speaker 1 (58. Displaying Recipe Details)

And I want to start by displaying the image.

0:43

S… Speaker 1 (58. Displaying Recipe Details)

So let's add the image here.

0:45

S… Speaker 1 (58. Displaying Recipe Details)

And let's add the image responsive class to it.

0:49

S… Speaker 1 (58. Displaying Recipe Details)

Now I will fill this with life and I'll put some data

0:53

S… Speaker 1 (58. Displaying Recipe Details)

there later.

0:54

S… Speaker 1 (58. Displaying Recipe Details)

Below the image I'll have another row.

0:58

S… Speaker 1 (58. Displaying Recipe Details)

In this row also have a column spanning the full width.

1:02

S… Speaker 1 (58. Displaying Recipe Details)

And here maybe output the recipe name.

1:05

S… Speaker 1 (58. Displaying Recipe Details)

So recipe name would be nice to see here.

1:08

S… Speaker 1 (58. Displaying Recipe Details)

Then maybe another row with another column

1:13

S… Speaker 1 (58. Displaying Recipe Details)

in there spanning the full width again.

1:15

S… Speaker 1 (58. Displaying Recipe Details)

And here,

1:16

S… Speaker 1 (58. Displaying Recipe Details)

what I want to add is I want to have buttons which allow me to manage

1:20

S… Speaker 1 (58. Displaying Recipe Details)

this recipe.

1:21

S… Speaker 1 (58. Displaying Recipe Details)

So a button which allows us to add it to the shopping list

1:25

S… Speaker 1 (58. Displaying Recipe Details)

and then one which allows us to edit it or to delete it.

1:29

S… Speaker 2 (58. Displaying Recipe Details)

And actually,

1:30

S… Speaker 1 (58. Displaying Recipe Details)

we could use a dropdown here.

1:33

S… Speaker 1 (58. Displaying Recipe Details)

Such a dropdown may be added here by adding a div with

1:37

S… Speaker 1 (58. Displaying Recipe Details)

the bootstrap class button group.

1:39

S… Speaker 1 (58. Displaying Recipe Details)

And again,

1:40

S… Speaker 1 (58. Displaying Recipe Details)

this is just how to create a nice looking dropdown using the bootstrap CSS framework,

1:44

S… Speaker 1 (58. Displaying Recipe Details)

which is the framework we use in this project.

1:47

S… Speaker 1 (58. Displaying Recipe Details)

Here, we need a button which will open the dropdown.

1:50

S… Speaker 1 (58. Displaying Recipe Details)

This will be of type button and it will receive a class of

1:54

S… Speaker 1 (58. Displaying Recipe Details)

button.

1:55

S… Speaker 1 (58. Displaying Recipe Details)

Then I'll use the button primary look,

1:57

S… Speaker 1 (58. Displaying Recipe Details)

which is this bluish button.

1:58

S… Speaker 1 (58. Displaying Recipe Details)

And very important,

2:00

S… Speaker 1 (58. Displaying Recipe Details)

it will also receive the class dropdown toggle because it will act as such.

2:04

S… Speaker 1 (58. Displaying Recipe Details)

On this button,

2:05

S… Speaker 1 (58. Displaying Recipe Details)

I want to say manage recipe

2:11

S… Speaker 1 (58. Displaying Recipe Details)

maybe because we want to allow the user to manage this single recipe.

2:15

S… Speaker 1 (58. Displaying Recipe Details)

And I want to add this span with the class caray to have this

2:19

S… Speaker 1 (58. Displaying Recipe Details)

arrow pointing to the bottom again.

2:21

S… Speaker 1 (58. Displaying Recipe Details)

And I will distribute this over multiple lines so that it's really easy to see

2:26

S… Speaker 1 (58. Displaying Recipe Details)

what's going on here.

2:28

S… Speaker 1 (58. Displaying Recipe Details)

That's the button opening the drop down below it I'll have an unordered list

2:32

S… Speaker 1 (58. Displaying Recipe Details)

with the class drop down menu and that is exactly

2:36

S… Speaker 1 (58. Displaying Recipe Details)

the same setup as we chose in the header here where we also had this

2:40

S… Speaker 1 (58. Displaying Recipe Details)

drop down menu unordered list because that's the nice thing about bootstrap

2:45

S… Speaker 1 (58. Displaying Recipe Details)

drop downs work to the same no matter if you place them here in the header or Use

2:49

S… Speaker 1 (58. Displaying Recipe Details)

a separate button for them and then here the list items the separate

2:53

S… Speaker 1 (58. Displaying Recipe Details)

actions I want to have the first one

2:56

S… Speaker 1 (58. Displaying Recipe Details)

pointing to just hash for now should actually allow us to add

3:01

S… Speaker 1 (58. Displaying Recipe Details)

ingredients to shopping list maybe.

3:05

S… Speaker 1 (58. Displaying Recipe Details)

Let's see if that is too long of a string.

3:07

S… Speaker 1 (58. Displaying Recipe Details)

Then I want to have a button which allows us to edit recipe

3:12

S… Speaker 1 (58. Displaying Recipe Details)

and one which allows us to delete the

3:16

S… Speaker 1 (58. Displaying Recipe Details)

recipe.

3:17

S… Speaker 1 (58. Displaying Recipe Details)

Maybe let's rename the first one to shopping list so that it's not that much longer

3:21

S… Speaker 1 (58. Displaying Recipe Details)

than the other ones.

3:22

S… Speaker 2 (58. Displaying Recipe Details)

With that,

3:24

S… Speaker 1 (58. Displaying Recipe Details)

that should be a working dropdown,

3:25

S… Speaker 1 (58. Displaying Recipe Details)

but we're not going to find out before we implement it.

3:28

S… Speaker 1 (58. Displaying Recipe Details)

Something we'll do after the directive section.

3:30

S… Speaker 2 (58. Displaying Recipe Details)

Now,

3:32

S… Speaker 1 (58. Displaying Recipe Details)

below this dropdown here,

3:34

S… Speaker 1 (58. Displaying Recipe Details)

though, I want to add another row.

3:38

S… Speaker 1 (58. Displaying Recipe Details)

And in this row here with another column spanning the full width,

3:42

S… Speaker 1 (58. Displaying Recipe Details)

I want to output the description of this recipe.

3:45

S… Speaker 1 (58. Displaying Recipe Details)

Well, and then at the very bottom,

3:47

S… Speaker 1 (58. Displaying Recipe Details)

I'll add the last row for now,

3:48

S… Speaker 1 (58. Displaying Recipe Details)

also with a full width column.

3:50

S… Speaker 1 (58. Displaying Recipe Details)

Here,

3:51

S… Speaker 1 (58. Displaying Recipe Details)

we'll output the ingredients.

3:52

S… Speaker 1 (58. Displaying Recipe Details)

We're not storing any ingredients on our recipe now,

3:55

S… Speaker 1 (58. Displaying Recipe Details)

but we'll do so soon,

3:57

S… Speaker 1 (58. Displaying Recipe Details)

and this is a nice place to output it.

3:59

S… Speaker 1 (58. Displaying Recipe Details)

So that is the recipe detail component,

4:01

S… Speaker 1 (58. Displaying Recipe Details)

having all the logic inside of it,

4:03

S… Speaker 1 (58. Displaying Recipe Details)

which we need to display the details,

4:05

S… Speaker 1 (58. Displaying Recipe Details)

and then having some options to go somewhere else in our app or

4:09

S… Speaker 1 (58. Displaying Recipe Details)

to trigger something else in our app,

4:11

S… Speaker 1 (58. Displaying Recipe Details)

like editing the recipe.

4:12

S… Speaker 1 (58. Displaying Recipe Details)

We'll, of course, add all those features throughout the course.

4:15

S… Speaker 1 (58. Displaying Recipe Details)

And now with that added and set up here,

4:18

S… Speaker 1 (58. Displaying Recipe Details)

let's see how that looks like.

4:21

S… Speaker 1 (58. Displaying Recipe Details)

Looks pretty good.

4:22

S… Speaker 1 (58. Displaying Recipe Details)

We got the name,

4:23

S… Speaker 1 (58. Displaying Recipe Details)

description ingredients,

4:24

S… Speaker 1 (58. Displaying Recipe Details)

a button which doesn't work,

4:25

S… Speaker 1 (58. Displaying Recipe Details)

of course.

4:26

S… Speaker 1 (58. Displaying Recipe Details)

We're going to fix this later in the course.

4:27

S… Speaker 1 (58. Displaying Recipe Details)

And we don't see an image at the top because right now image,

4:31

S… Speaker 2 (58. Displaying Recipe Details)

well,

4:32

S… Speaker 1 (58. Displaying Recipe Details)

doesn't have a source or anything like that.

4:34

S… Speaker 2 (58. Displaying Recipe Details)

Now,

4:35

S… Speaker 1 (58. Displaying Recipe Details)

of course, it would be nice if we could select a recipe here in the list

4:39

S… Speaker 1 (58. Displaying Recipe Details)

and display it in this recipe detail component.

4:42

S… Speaker 1 (58. Displaying Recipe Details)

But one issue we have with this is we can't

4:46

S… Speaker 1 (58. Displaying Recipe Details)

get our selected recipe into the detail component.

4:49

S… Speaker 1 (58. Displaying Recipe Details)

because the detail component is added here in our recipes component

4:53

S… Speaker 1 (58. Displaying Recipe Details)

where we also have the list and communicating between the two components

4:58

S… Speaker 1 (58. Displaying Recipe Details)

list and detail

5:00

S… Speaker 1 (58. Displaying Recipe Details)

is something we don't know how to do right now.

5:02

S… Speaker 1 (58. Displaying Recipe Details)

We have the same issue in the list component where we had to put

5:07

S… Speaker 1 (58. Displaying Recipe Details)

in the code for a single item temporarily because if we would outsource

5:11

S… Speaker 1 (58. Displaying Recipe Details)

it to the recipe item component,

5:13

S… Speaker 1 (58. Displaying Recipe Details)

we couldn't pass our recipe in this loop of

5:17

S… Speaker 1 (58. Displaying Recipe Details)

recipes to that component.

5:19

S… Speaker 1 (58. Displaying Recipe Details)

So that cross -component communication is a huge issue right

5:23

S… Speaker 1 (58. Displaying Recipe Details)

now, but no worries,

5:24

S… Speaker 1 (58. Displaying Recipe Details)

that is something we're going to dive deeper into in the next course section.

5:29

S… Speaker 1 (58. Displaying Recipe Details)

And thereafter, we'll come back to this and enable all that communication,

5:33

S… Speaker 1 (58. Displaying Recipe Details)

which allows us to outsource this code into its own component and

5:37

S… Speaker 1 (58. Displaying Recipe Details)

make these links clickable so that we actually load the right recipe on the right.

5:41

S… Speaker 1 (58. Displaying Recipe Details)

Before doing this,

5:43

S… Speaker 1 (58. Displaying Recipe Details)

let's wrap up this section here,

5:45

S… Speaker 1 (58. Displaying Recipe Details)

this first part of our project,

5:47

S… Speaker 1 (58. Displaying Recipe Details)

by working on the shopping list feature.

58. Displaying Recipe Details

摘要

询问 AI 有关此分页