62. Adding a Shopping List Edit Section

Jul 14, 2026 04:31 · 3:28 · English · Whisper Turbo · 1 Talare
Den här utskriften går ut idag. Uppgradering för permanent lagring →
Föreläsningsindex
Visar endast
0:02
S… Speaker 1 (62. Adding a Shopping List Edit Section)
So let's work on the shopping list added component.
0:04
S… Speaker 1 (62. Adding a Shopping List Edit Section)
In its template,
0:06
S… Speaker 1 (62. Adding a Shopping List Edit Section)
I want to add a bootstrap row and in there want to have a column
0:10
S… Speaker 1 (62. Adding a Shopping List Edit Section)
spanning the full width.
0:13
S… Speaker 1 (62. Adding a Shopping List Edit Section)
Like that.
0:14
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And in there,
0:16
S… Speaker 1 (62. Adding a Shopping List Edit Section)
I'll add a form element.
0:18
S… Speaker 1 (62. Adding a Shopping List Edit Section)
Now important,
0:19
S… Speaker 1 (62. Adding a Shopping List Edit Section)
remove the action because we're not going to send a request to the server
0:23
S… Speaker 1 (62. Adding a Shopping List Edit Section)
once this is submitted.
0:24
S… Speaker 1 (62. Adding a Shopping List Edit Section)
But we will have a look at submitting forms later in this course.
0:28
S… Speaker 1 (62. Adding a Shopping List Edit Section)
We have a whole section about that.
0:30
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And that is when we will fill this form with more life.
0:33
S… Speaker 1 (62. Adding a Shopping List Edit Section)
For now in this form,
0:35
S… Speaker 1 (62. Adding a Shopping List Edit Section)
I want to have a row.
0:36
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And this should now maybe have a width of only...
0:42
S… Speaker 1 (62. Adding a Shopping List Edit Section)
five on small devices.
0:44
S… Speaker 1 (62. Adding a Shopping List Edit Section)
On very small devices,
0:45
S… Speaker 1 (62. Adding a Shopping List Edit Section)
it should span the full width,
0:46
S… Speaker 1 (62. Adding a Shopping List Edit Section)
which is why I'm using the SM class here.
0:48
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And it should also have the form group,
0:52
S… Speaker 1 (62. Adding a Shopping List Edit Section)
bootstrap class attached to it,
0:54
S… Speaker 1 (62. Adding a Shopping List Edit Section)
this div.
0:55
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And in here,
0:57
S… Speaker 1 (62. Adding a Shopping List Edit Section)
I'll have a label for the name of
1:01
S… Speaker 1 (62. Adding a Shopping List Edit Section)
my item.
1:01
S… Speaker 1 (62. Adding a Shopping List Edit Section)
So I'll say name here as a text.
1:03
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And I'll add an input of type text,
1:06
S… Speaker 1 (62. Adding a Shopping List Edit Section)
that's correct, with ID name,
1:07
S… Speaker 1 (62. Adding a Shopping List Edit Section)
so that this label refers to it.
1:10
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And then here,
1:11
S… Speaker 1 (62. Adding a Shopping List Edit Section)
this should receive the class form control to make
1:15
S… Speaker 1 (62. Adding a Shopping List Edit Section)
it look nice in Bootstrap's world.
1:17
S… Speaker 1 (62. Adding a Shopping List Edit Section)
Next to it,
1:19
S… Speaker 1 (62. Adding a Shopping List Edit Section)
and that is why I chose to not give this column the full width,
1:22
S… Speaker 1 (62. Adding a Shopping List Edit Section)
I want to have another div with a width
1:26
S… Speaker 1 (62. Adding a Shopping List Edit Section)
of let's say two because it's going to be a very small input.
1:30
S… Speaker 1 (62. Adding a Shopping List Edit Section)
Then also the form group div or a class here.
1:33
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And then there's another label for the amount.
1:37
S… Speaker 1 (62. Adding a Shopping List Edit Section)
So let's say amount here.
1:39
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And then an input of type text
1:43
S… Speaker 1 (62. Adding a Shopping List Edit Section)
here, or maybe even of type number,
1:45
S… Speaker 1 (62. Adding a Shopping List Edit Section)
to be honest,
1:46
S… Speaker 1 (62. Adding a Shopping List Edit Section)
which gets the ID,
1:49
S… Speaker 1 (62. Adding a Shopping List Edit Section)
amount,
1:50
S… Speaker 1 (62. Adding a Shopping List Edit Section)
and then the class form control.
1:53
S… Speaker 1 (62. Adding a Shopping List Edit Section)
So that should give us the inputs the user will later use
1:57
S… Speaker 1 (62. Adding a Shopping List Edit Section)
to add new ingredients.
1:58
S… Speaker 1 (62. Adding a Shopping List Edit Section)
Below my inputs here,
2:02
S… Speaker 1 (62. Adding a Shopping List Edit Section)
I'll add another row,
2:04
S… Speaker 1 (62. Adding a Shopping List Edit Section)
which will now span the full width.
2:07
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And here I want to have a couple of buttons which allow me to manage this
2:11
S… Speaker 1 (62. Adding a Shopping List Edit Section)
item creation or editing process.
2:14
S… Speaker 1 (62. Adding a Shopping List Edit Section)
The first button I'll add here with the style
2:18
S… Speaker 1 (62. Adding a Shopping List Edit Section)
of button, button success to make it look green in Bootstrap's world will
2:22
S… Speaker 1 (62. Adding a Shopping List Edit Section)
be of type submit because this button should actually submit the form later.
2:26
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And I will say add there because it allows us to add a new item.
2:30
S… Speaker 1 (62. Adding a Shopping List Edit Section)
The second button will be of type
2:34
S… Speaker 1 (62. Adding a Shopping List Edit Section)
because it should not submit the form,
2:37
S… Speaker 1 (62. Adding a Shopping List Edit Section)
this button should simply delete the
2:41
S… Speaker 1 (62. Adding a Shopping List Edit Section)
selected ingredient because later we will be able to click
2:45
S… Speaker 1 (62. Adding a Shopping List Edit Section)
an ingredient.
2:46
S… Speaker 1 (62. Adding a Shopping List Edit Section)
It will then be loaded into the input fields up here.
2:49
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And if we click delete,
2:50
S… Speaker 1 (62. Adding a Shopping List Edit Section)
well,
2:51
S… Speaker 1 (62. Adding a Shopping List Edit Section)
it simply will be removed.
2:53
S… Speaker 1 (62. Adding a Shopping List Edit Section)
So delete item or just delete maybe.
2:56
S… Speaker 1 (62. Adding a Shopping List Edit Section)
And then the last one,
2:57
S… Speaker 1 (62. Adding a Shopping List Edit Section)
which allows us to clear the form.
2:59
S… Speaker 1 (62. Adding a Shopping List Edit Section)
If we loaded the item,
3:01
S… Speaker 1 (62. Adding a Shopping List Edit Section)
we wanted to add it and then decided to not do that,
3:05
S… Speaker 1 (62. Adding a Shopping List Edit Section)
I want to have a button which allows me to clear the form.
3:07
S… Speaker 1 (62. Adding a Shopping List Edit Section)
So here I will maybe make this blue with button primary.
3:11
S… Speaker 1 (62. Adding a Shopping List Edit Section)
If we save this,
3:13
S… Speaker 1 (62. Adding a Shopping List Edit Section)
this is actually how I want this form to look.
3:15
S… Speaker 1 (62. Adding a Shopping List Edit Section)
We have an input field for the amount,
3:18
S… Speaker 1 (62. Adding a Shopping List Edit Section)
for the name and our buttons,
3:20
S… Speaker 1 (62. Adding a Shopping List Edit Section)
which later will be filled with some life so that we can manage
3:24
S… Speaker 1 (62. Adding a Shopping List Edit Section)
this ingredient.

Denna utskrift genererades av AI (automatisk taligenkänning). Kan innehålla fel — verifiera mot originalljudet för kritisk användning. Politik för AI

❤️ Älskar du STT.ai? Berätta för dina vänner!
Sammanfattning
Klicka på Summarize för att generera en AI sammanfattning av denna utskrift.
Sammanfatta...
Fråga AI om detta Transcript
Fråga något om denna utskrift — AI kommer att hitta relevanta avsnitt och svar.
Skriv om en annan