Welcome back, my friends will come to another lecture today, what we're going to do is we are going
to add a couple of things here, because this is not coming from the data base.
I mean, our local storage is coming from the function that we create.
And that was this concept.
Make L.A. right.
And we just call this function here.
That's why whenever we press some data, it's there.
So how we can do this, there are different ways, but we can achieve this with a simple for each loop.
By the way, let's call the lock.
I'm sorry.
Cancel this data.
Right, because they should have hold some something inside.
One more thing that you need to do is also go to settings from time to time.
If you have problems, you can clear the browsing data clearer and you can clear this.
See all the cookies and you can clear the cookies that will sometimes fix some of the problems.
Now, I'm just going to go inspect here.
I'm going to go to an application.
I don't have anything here.
I can just delete this.
Now I'm going to add first, second, third, fourth, fifth and so forth, so on.
Now, the thing is that this is here and it's in our local storage.
But if we refresh, it's still in our local storage, but not here.
So all we can do this now, we can create data for each for each loop here in here.
I will put the items right and I'm sorry, not items item and what we can do.
I have never shown you this foreach loop, but it's very, very simple and very fast, actually.
Now make sure that you close this one here.
I'm just going to make it a little bit bigger.
Oops, not that big.
OK, now here we will like to call it Make Ally again with this item.
So what this item will have, I'm just going to console lock and you will be able to see it a lot,
this item.
Now remember, here we create this data with these items.
So I hope I'm just going to refresh here and let's go to the console.
And we do have first, second, third, fourth, fifth.
Ignore this error, ignores the first one.
So we have this this is the console log from the the aerialists in the second one is from this one.
And here again, we concerned about the items.
No, I'm just going to remove this.
So now we know that we can loop through each and element of this data variable that holds in here.
There are now.
So it doesn't matter how many times I will refresh, there will be here.
And that is cool.
So they don't come from the actually from they come from this one this they come from here.
So if I remove it from here, if I refresh now they will not be there.
Right.
So I just need to add them again.
First, second, third, fourth, fifth and so on.
Now that's cool.
That is working.
Now, let's fix this button here, because what I want to achieve so what we did here, just going to
recap once.
So we are doing a loop through everything that our data very will have this one here.
Right.
And that's connected well from the local storage and get all the items there.
And so so that contains everything from the local storage.
So we can run these make elai just to recreate what we have done here.
That's pretty much it.
Now, one more thing that we need to do is we need to remove, not remove.
Actually, we need to focus on how when we click the button.
So we need to clear this now.
At the moment, if I click and it's not working right.
And by the way, we just hold that variable here, document, query, select committee and reset and
we can use it now.
Now, when this button actually we're going to hook it up with the and add event listener in this event,
listener will be on click.
So when I click with a mouse, then this function will fire off and semicolon here.
Now I just want to use the local storage function clear, remember.
And let's find a way let's see what's happening, so I'm just going to go there and I will clear, but
if I go inspect the cargo lock, I still have I want this area also to clear I don't want to I don't
want it to make any confusions here.
And it's best to items every set up to empty area.
And we didn't actually check it in our application yet.
It's clear there now what I want, because this one was reset.
So the things that we need to do something here, the first thing that I want to do is while you tell
that so we can say first child.
So you will see in a minute what I'm going to do.
So while you were, you know, the first show, so until we have this means until we have the first
child in our U.S. list, I'm going to say you will not remove, remove, remove child.
And I'll see you the first child.
So that first child.
Just first child.
So what these will do until this list here is just going to make it again so we don't have anything.
I'm just going to clear it.
So when we clear this list so we can say first, second, third, fourth, fifth and so on, so forth.
Now we do have this and we do have this list here.
But what I do here, I set these items, Erica Materi in a loop, whatever I have, you know, you well.
I looked through the first child and until the first child this condition is met, it will always go
here.
So that means that I can remove that child.
So that is what I'm doing now.
When I click it here, you see what's happening.
Items is set to zero.
This is gone.
Nothing is even the area.
It should be empty.
Right?
That's it.
We did everything by the book.
So that is when we click this button.
So that's pretty much what I want to show you for this lecture.
You now our application is 99 percent working.
So one, two, three, four, five.
So we do have this one.
And if you go to the application, we do have that one.
If you go in a console, if you refresh, it will stay there.
Now, I'm just going to copy it.
I'm just going to delete this one.
She's going to open another one, Google Chrome.
And I'm just going to create here and it's there.
Right.
It's there.
So means it's working.
It's loading all the things from the items that are stored in our local storage.
So thank you very much.
I hope you enjoyed this one.
And we will do a couple of more changes here.
We need to fix this when I click.
I want that to be removed.
It also I want that to be removed from here.
So we need to remove from the array from this well, first and I need to remove from the local storage
because now this is coming from the local storage.
Right?
This button is working.
This is not because now you can pretty much do the same thing instead of formed on our listener.
You can just hook that button.
Yeah, yeah.
But that is what we have done so far.
And you can change it.
You can try new things.
But we have a couple of more things to do and we are done with this part of the application.
So thank you very much.
I hope you enjoyed this so far.
If you d if you do please like share subscribe, put a five star review, whatever you want to do there
and.
Yeah.
And get a new comment from me.
So send me something interesting.
Take care and see you in the next one.