Instructor: So let's now build
a very simple, shopping list view.
And as always,
we start by creating the new file,
then let's get our elements,
simply by copying it from here
and okay
So we're only gonna have
two small methods in here,
one to render the item and in one to
delete the item from the user interface.
Okay, so very simple stuff here in this view.
So the first one is to render the item,
and in order to do that,
we will simply receive the item as an input,
and the other function will be delete the item,
for which we need an ID,
so in a similar way to the list model.
Okay, so based on an ID
we can delete the item
and in order to render it
we need to have the item object itself.
So let's start with this one here,
create a marker variable such as before,
and so let's get that marker
here from our HTML file.
So where is that, so here we have
the UL, which contains the
shopping list items.
So all of these items are inside
the shopping list element.
Okay, so let's copy this one,
alright. And since we're at it
we can also create the
shopping list here in our dumb element,
and it is in the base,
so shopping will be
document.query selector
and then shopping list.
Alright, so the first thing
that we're gonna use is the ID.
And so just like before let's
add a data attribute here.
So data item ID should be
equal to item.ID.
So the one that we passed in here
with the list item.
Okay so this is the same way that we did before,
so we specified a data attribute here
in this view such like we did here in the search view.
Okay, and remember that one,
so in here somewhere we should have, well,
where is that?
so uh ya it's here in the button.
So here we have this data attribute
which is data go to it, so we called
go to to this one so we can later
select the elements based on
that data attribute and based on an ID in our case.
Okay, So this will be useful
in order to delete the item.
So we have the ID attribute,
let's now include the count,
and the count is actually here in the value.
Okay, so we have an input field,
and that input field has a predefined value,
and that value is what we want to specify here.
And it will be item.count.
Okay, and the same thing goes for the step.
So the step is like the change that happens
when we hit the arrow buttons on the number field.
So let me show that to you,
here in this example,
So we have this list here,
and you see that for example
here we have 0.25,
and when we hit the UP button,
then it will increase by 025 to 0.5
and then to 025,
okay, and so we can define that step
and if we do the same here
then it will increase not to 1.25 but to two,
three, and so on and so forth.
And here for example it will increase to nine,
then to 13, and so on and so forth.
Okay so we define that we want the count
also to be a step.
Of course, if you want to manually change it by hand
we can also write in.
Okay so whenever we click these buttons here
our value gets updated.
So next up we have here,
the, the unit, and of course
so item.unit, and in here we have the ingredient.
Okay, and finally we also want to add a class here
so that we can later select this input
so that we can then read this
value here to update it in our model.
Right? So when we want to do this updating
here we need the new count, and that
new count is, or course,
gonna come through this input field.
Okay, and so we want to read the value,
and so in order to do that let's
edit class here so we can then easily read it out
so this is going to be called
uh shopping count value.
So very simple.
Okay now all we have to do is to
insert this marker to our elements.shopping
adjacent HTML,
and we will do this here at before end.
Okay, so that one is added after the other.
Okay, so if we already have two items
there then we want the third one to be
after the first two, right?
Okay, so that one is now done,
let's move on to the next one.
And so let's now actually already
use this data item ID
property that we have here,
because in order to delete
item function all we pass in is the ID.
And so now we have to select
the element that we want to delete,
based on that ID.
So documented query selector,
and now we can use this CSS attribute selector,
which is simply using these brackets.
So we wanna select based on data,
item ID which should be equal to, and now we want
the quotes, and then we pass in the ID, and that's it.
And so now when we pass in the ID,
we will be able to select the exact element,
because here we basically attached that ID
to our element here, okay
and so the goal was of course,
to be able to do exactly this.
Okay, and so now remember
how we actually remove stuff
from the user interface,
we have to move up to the parent,
so that we can then remove the child.
So remove child, and then item again,
and that's it.
So right now we cannot really test this,
because you don't have all your control yet,
I mean we could but it's not really necessary
so we're just gonna move in to the controller
right now in the next video,
and then we're gonna be able to see
if all of this works,
Okay, so see you there
in a second.