62. Adding a Shopping List Edit Section

Jul 14, 2026 04:31 · 3:28 · English · Whisper Turbo · 1 Ցուցադրել
Այս տեքստը կավարտվի այսօր։ Ավելացնել մշտական պահպանման համար →
Ընդհանուր
Ցույց տալ միայն
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.

Այս տեքստը ստեղծվել է AI (խոսքի ավտոմատ ճանաչում)-ի կողմից։ Այն կարող է սխալներ պարունակել։ Հետաքրքիր օգտագործման համար ստուգեք սկզբնական ձայնագրությունը։ Օգտագործողի քաղաքականություն

❤️ Սիրում ես STT.ai-ին, պատմիր ընկերներիդ։
Հոդված
Սեղմեք «Սահմանել» այս տեքստի AI- ի ամփոփում ստանալու համար։
Համադրում...
Հարցրեք AI-ին այս տեքստի մասին
Ձեր հարցը այս տեքստի մասին — AI-ն կգտնի հարմար հատվածներ և կպատասխանի։
Հատկություն