In this lecture, we are going to learn is how to delete calories first from the storage, then from
the UI.
So we're going to grab the parent and we're going to grab the child.
We're going to remove from that child, from that parent.
And also we're going to use map and splice methods.
We never use them or maybe we use one of them, but never map.
OK, now where are we going to call this?
We're going to call it here.
So I need the calories controller because I'm going to use these delete from the lead calorie.
We're inside our calories controller.
That's why I need to call it like this here.
I'm going to pass in the idea of the type that we found it up here in the previous lecture.
Now I just delete those console lock.
You can delete those things, but that will just for showing you can comment those things and refer
them back in your if you do a revision, that's it.
Now let's do this.
Delete Kalari.
I'm just going to copy it.
So we need to place this as a public matter on top in the first place, in the first right.
I'm going to do it like this, but it's far from finish.
What I need to do here is just type function.
OK, now delete
delete.
Kalari Very good.
This is for deleting a gallery.
Now here what we are going to do.
I'm just going to create two variables.
First, these will be array of IDs and by the name here we will store all of these IDs or the positions
of the elements that we have.
You will see why.
So we need to store their indexes and now I will say current position.
Cool.
OK, so I'm going to use the map method in the syntaxes area.
That map inside function in the function can have three parameters.
So we can pass in three values here parameters.
So it will be current value then.
It will be what then.
It will be the index of that element, an entire array.
But in our case, we're going to use only the what?
The current index.
OK, so as I told you and we're going to store it in this area, IDs in aggregate map, we're going
to use storage dot all calories in because we do have the type, the type can be burn or add.
So we're going to select either this or sorry, either this array or this array.
That's pretty much it's simple where I am.
Here it is.
No, what I'm going to do is I'm going to say map some until here.
Right.
This entire is replaced with this guy here.
And I put a map in inside.
I'm going to say the function.
And as I told you, we're going to only use the current index.
You can see current or current doesn't really matter.
Now, what we will do is I'm going to return the the current sorry that ID so I'm going to return those
IDs.
Right.
Make sure that you don't make a mistake here and say cancel, lock the array of IDs.
OK, now also what I do I will be Konza lock just for case I'm going to show you the entire storage,
all calories in based on this time I'm going to give me either add or burn.
So what are you doing here.
I will store.
I told you that I'm going to store their index.
Their position.
Right.
OK, let's see.
I'm going to add food one one hundred and fifty.
I'm going to just change this to enter just change three hit enter.
So I do have three times 150 to give me 450 of the total calories.
So if I go here now, if I click this button.
Yes.
What it will give me is basically it is, it will give me zero one and two.
So I get the IDs zero one and two.
Right.
Nice.
OK, so it gave me these objects, these three objects and it gave me its position.
So what I'm going to do next.
OK, so when I have these ideas and this is by the way, it's creating a new area, this is a new area
here.
I'm not changing the storage old calorie stuff.
Right.
That's why I printed it out.
That's why you can see it here and here.
That is why Map does not execute the function for every element without value.
So if you don't have values, it will not be able to execute this function in the Met method calls the
provider function once for each element in an array in order.
Qu, so it calls them in order.
Now it's going to disappear.
Yep.
So that is pretty much it.
Now what I want to see, I want in the current current current position, I want to hold what array
of IDs.
I want to grab that and I'm going to index off and I'm going to get the ID these I need them passing
from here.
Right.
And that I.D. will be I'm just going to show you what we're going to do.
OK, let's do this.
So I'm going to see this I.D. that will be died from the right that we're trying to delete.
It will be basically this zero that we just, you know, before we just cut it out from here, I'm just
going to show you, you know, I'm going back this idea here, right?
I'm just going to control and I'm going to say delete Kalari.
Yep.
I'm back there.
OK, no, I'm going to cancel that one.
I'm going to cancel all the time.
I'm just going to lock everything in order you to have what?
The entire picture.
Good.
Now I do of the ID type, the entire arrays of IDs with their positions.
And this guy here now indexable.
I need to explain this one.
I already we have done it.
This method returns the first index at which a given element can be found in error.
If the element is not be able to find it will give us minus one trying to delete something that is not
the error.
It will give us minus one.
So we need to check if current position is different than minus one.
OK, then I want to do something with the storage.
Then I want to delete the item from the storage input that I'm going to use splice not split and I'm
just going to pass in the current position that we found.
So this will look through the error in me to find me the current position, and that's why we're going
to print it out here.
See, I forgot about that position and I'm just going to say current position.
So that will be the current position of the element that we trying to delete.
Right.
OK, now it will be all khoury's that current position in here.
We're going to see what happened.
Come on, Tomáš one.
OK, no, the splice method adds or removed items to or from on the record and returns the remove item.
This will change the original re.
OK, so we are altering, we are changing the original array.
Right.
Based on the type we are changing.
If it's, if we are trying to delete something from add is going to be there permanently deleted.
Oh ok.
OK, ok.
Now do you want me to print out this one in front so you can be able to see the difference.
Probably over here, I'm just going to print it out here before not there.
Actually, we need to print it out here before we re deleting this one.
OK, so let's change it out.
I mean, let's test it out.
So food one point one hundred and fifty, then I have two two one one.
OK, I just need to present.
I forgot four.
That's it.
So I have four items altogether.
Four by one times.
One fifty is going to give us six hundred.
Yeah.
I'm going to delete some bad boys here.
I'm going to delete the number three.
I'm going to delete this number three.
So these devide two, it's coming from this one.
Right.
And it's not deleted from here.
Don't worry.
Now what it will say, I will say that I have four before and it will give me the Eraserheads zero one,
two, three.
And I'm saying, OK, the current position is to let these two and actually that is the first three
in when we delete it, we the splice matter.
Right, with this splice matter, we just removing that element.
OK, let's see if I don't have the food three.
How cool is this.
So now it's still it's not change here.
I'm going to delete the first one.
We each have the idea of zero and you will see.
What about the current position?
OK, we go down.
So that idea of zero type at current position zero now I did had zero one, two, three.
But now I don't have zero one because I print it out before I print out these three before.
And now I had one in three right now I have one in three.
How cool is this.
This is working ladies and gentlemen.
So what you can do.
You can comment all these it and you know what?
Yeah, comment this all this out.
And if you need them, just refer them.
If you understand me, congratulation to you.
You successfully deleted a gallery.
Now the next step will be the next step.
The next step is to pretty much remove from the UI.
Right.
So here is the calorie from the UI, we need to delete that one because we are not going to use it.
So so where are we going to build this?
Where are we going to create this function?
It's about UI, right.
Think about I'm going to say you are a controller.
You know that we're going to create this function in APU, a controller, and it will be the lead kalari
you or you can say from UI capital, you can put it there and I'm going to say here, I'm going to pass
in something else.
I'm going to pass in the parent.
Know that I regret that we have it here.
Right.
And actually the parent node holds the ID right.
Do you understand?
What are we trying to do?
You will see.
Okay, no, copy this one.
Go back, back, back, back, back to UI controller and in our public.
OK, here it is after the comma, we say delete Callery from you, you are, and I'm going to say here,
delete Kalari from UI and that will be to function in here.
I will have this idea so I can type any name I want.
Right.
So divided and we can test this out, this divide, but I'm not going to do it because you can do it.
You can control of this divide when you click the button and it's going to be firing there.
So far.
I'm just going to create a parent panel and I'm going to say the other one is going to be actual.
And it should be like that actual child now for the parent panel.
I will select the parent panel from this one.
And what I'm going to do, I'm going to say, OK, document the get element,
get sorted, get element by day instead of get this G, I put something else cute properly.
That's why it's not giving me showing me the.
Yeah.
The Preedy property values.
And I'm going to say parent.
No, so I'm going to let the parent know, right?
So what we can do, we can counsel.
So based on our are we're getting the parent panel.
So based on the idea we have, we go one level up.
For example, if we have this here, right, I'm going one level up and that's pretty much it.
I get the parent now, remember, we need to find a parent to bubble up the events.
Now, the actual child, you can do a lot better.
Parent panel.
All right.
And the actual child will be word document or get element bidi.
And I will say, if I do like this right and I'm going to say parent panel, dot, remove child and
I'm going to put the actual child that I found before.
Right.
Same old, same old, same old.
Nice some removing the child.
And if you want you don't need to like this.
Right.
You don't worry about it.
Just let's test it out.
We don't need to return anything.
OK, so it will be cool if we do this without any problems.
Hundred and fifty.
OK, for one it will be one hundred and fifty.
For two it will be a hundred and fifty for three.
For how many.
We have 750.
OK, too much.
Right.
We need to do something.
So I'm going to the first I'm going to start with the leading this four in here it is.
Is the lady the number four.
Yeah.
And there is food for gone from there.
OK, this food zero which is wheat etc..
I just want that to be gone as well in food one food two for three.
It pretty much we are all done ladies and gentlemen.
And if you're not happy about this, I don't know what you will be happy about.
So we tried and we successfully managed to delete these guys here.
Look at these.
We do have some problem.
Let's see, what was the problem?
750 was before, right?
That's not good.
They're good.
We're going to change it now.
The last step was to do only that.
We don't have this here.
We don't have it in the storage.
Now, the only one thing is to update these UI here.
And I told you that is one line of code write one line of code.
OK, I'm just gonna grab this calculate calories in here.
I'm just going to call it what?
Because here in calculate calories, we compute the calories again.
We not passing any parameters.
We are getting the calories, control or return the calories we are logging by those guys here.
You can comment this one if no one.
And we get display also we do the display front up calories.
OK, so I'm going to save it.
It's enough.
Let's toss it out.
So I'm going to say food one.
One hundred and fifty.
Right.
I'm going to make it not for how much we have.
Six hundred.
Let's put five.
OK, now you have five.
Seven hundred and fifty.
So I'm going to delete the number five.
Let's check first that we have 750 here, right.
We do have seven fifty.
This is one five zero five five zero.
OK, I'm going to do with the last one.
Now let's see if it's that is updated there.
Here we go.
It's updated and this one is increased.
Oh my God is working.
OK, let's do the food.
Number one gun here as well.
OK, let's delete all of this.
And I'm just going to leave the number of food.
Number two, that will be one hundred and fifty calories.
This is updated and that is here.
See what is there.
OK, one more.
We're going to add exercise.
Let's say X one thirty, x two thirty.
OK, let's see if the deletion working for this extra.
So I'm going to delete this extra gone right.
Minus 30 and I'm going to delete it one more.
Gone.
And if I go back here, nothing, if I go back here, she's going to let this guy here.
That is phenomenal.
Guys, I'm happy if you are happy and it's only two thousand three hundred remaining, so you should
be proud of yourself.
If you if you're here if you're watching this, then you are true blue.
You're golden.
I don't know what else to say about you guys, so thank you very much.
And I will see you in the next one.
We have a little bit cosmetic things to do, but you should stick around.
And yeah, we can update this format.
This number.
Yeah, we're going to update that one.
What else?
We can update also the numbers here that we do have for the calories.
Yeah, we're going to do a couple of things.
We're going to clear the form after third.
We I don't want this to be there.
Yeah.
Simple things, but very interesting to do.
So thank you very much.
And we successfully managed to finish what I think the Section two of this project.
That is phenomenal.
Congratulations.
And I'll see you soon.