1
00:00:02,780 --> 00:00:06,800
Welcome back, my friends will come to another lecture today, what we're going to do is we are going

2
00:00:06,800 --> 00:00:12,360
to add a couple of things here, because this is not coming from the data base.

3
00:00:12,620 --> 00:00:17,440
I mean, our local storage is coming from the function that we create.

4
00:00:17,450 --> 00:00:19,040
And that was this concept.

5
00:00:19,250 --> 00:00:20,290
Make L.A. right.

6
00:00:20,300 --> 00:00:21,900
And we just call this function here.

7
00:00:22,400 --> 00:00:26,580
That's why whenever we press some data, it's there.

8
00:00:26,660 --> 00:00:34,690
So how we can do this, there are different ways, but we can achieve this with a simple for each loop.

9
00:00:34,730 --> 00:00:37,250
By the way, let's call the lock.

10
00:00:37,710 --> 00:00:38,480
I'm sorry.

11
00:00:38,660 --> 00:00:40,540
Cancel this data.

12
00:00:41,040 --> 00:00:44,370
Right, because they should have hold some something inside.

13
00:00:44,720 --> 00:00:48,200
One more thing that you need to do is also go to settings from time to time.

14
00:00:48,210 --> 00:00:54,410
If you have problems, you can clear the browsing data clearer and you can clear this.

15
00:00:55,010 --> 00:01:00,780
See all the cookies and you can clear the cookies that will sometimes fix some of the problems.

16
00:01:00,800 --> 00:01:04,210
Now, I'm just going to go inspect here.

17
00:01:04,490 --> 00:01:05,900
I'm going to go to an application.

18
00:01:06,080 --> 00:01:07,490
I don't have anything here.

19
00:01:07,490 --> 00:01:08,740
I can just delete this.

20
00:01:09,200 --> 00:01:20,010
Now I'm going to add first, second, third, fourth, fifth and so forth, so on.

21
00:01:20,020 --> 00:01:23,930
Now, the thing is that this is here and it's in our local storage.

22
00:01:23,930 --> 00:01:27,470
But if we refresh, it's still in our local storage, but not here.

23
00:01:27,530 --> 00:01:35,780
So all we can do this now, we can create data for each for each loop here in here.

24
00:01:35,780 --> 00:01:43,610
I will put the items right and I'm sorry, not items item and what we can do.

25
00:01:43,610 --> 00:01:49,740
I have never shown you this foreach loop, but it's very, very simple and very fast, actually.

26
00:01:50,160 --> 00:01:53,480
Now make sure that you close this one here.

27
00:01:55,490 --> 00:01:57,470
I'm just going to make it a little bit bigger.

28
00:01:57,650 --> 00:01:59,900
Oops, not that big.

29
00:02:00,260 --> 00:02:07,580
OK, now here we will like to call it Make Ally again with this item.

30
00:02:08,120 --> 00:02:14,680
So what this item will have, I'm just going to console lock and you will be able to see it a lot,

31
00:02:15,770 --> 00:02:17,060
this item.

32
00:02:17,460 --> 00:02:24,710
Now remember, here we create this data with these items.

33
00:02:24,770 --> 00:02:31,700
So I hope I'm just going to refresh here and let's go to the console.

34
00:02:31,700 --> 00:02:34,790
And we do have first, second, third, fourth, fifth.

35
00:02:35,010 --> 00:02:36,950
Ignore this error, ignores the first one.

36
00:02:37,160 --> 00:02:45,590
So we have this this is the console log from the the aerialists in the second one is from this one.

37
00:02:45,890 --> 00:02:48,770
And here again, we concerned about the items.

38
00:02:49,670 --> 00:02:51,460
No, I'm just going to remove this.

39
00:02:51,650 --> 00:02:57,500
So now we know that we can loop through each and element of this data variable that holds in here.

40
00:02:57,500 --> 00:02:58,250
There are now.

41
00:02:58,520 --> 00:03:01,760
So it doesn't matter how many times I will refresh, there will be here.

42
00:03:02,420 --> 00:03:04,090
And that is cool.

43
00:03:04,100 --> 00:03:11,020
So they don't come from the actually from they come from this one this they come from here.

44
00:03:11,180 --> 00:03:15,320
So if I remove it from here, if I refresh now they will not be there.

45
00:03:15,320 --> 00:03:15,680
Right.

46
00:03:15,800 --> 00:03:17,570
So I just need to add them again.

47
00:03:17,750 --> 00:03:25,420
First, second, third, fourth, fifth and so on.

48
00:03:25,520 --> 00:03:26,990
Now that's cool.

49
00:03:26,990 --> 00:03:28,210
That is working.

50
00:03:28,400 --> 00:03:35,810
Now, let's fix this button here, because what I want to achieve so what we did here, just going to

51
00:03:35,810 --> 00:03:37,040
recap once.

52
00:03:37,310 --> 00:03:42,290
So we are doing a loop through everything that our data very will have this one here.

53
00:03:42,830 --> 00:03:43,250
Right.

54
00:03:43,490 --> 00:03:47,870
And that's connected well from the local storage and get all the items there.

55
00:03:48,470 --> 00:03:53,330
And so so that contains everything from the local storage.

56
00:03:53,630 --> 00:03:59,540
So we can run these make elai just to recreate what we have done here.

57
00:04:00,090 --> 00:04:00,860
That's pretty much it.

58
00:04:02,510 --> 00:04:10,100
Now, one more thing that we need to do is we need to remove, not remove.

59
00:04:10,100 --> 00:04:13,550
Actually, we need to focus on how when we click the button.

60
00:04:15,200 --> 00:04:18,170
So we need to clear this now.

61
00:04:18,170 --> 00:04:21,350
At the moment, if I click and it's not working right.

62
00:04:21,920 --> 00:04:28,910
And by the way, we just hold that variable here, document, query, select committee and reset and

63
00:04:28,910 --> 00:04:29,900
we can use it now.

64
00:04:30,170 --> 00:04:36,770
Now, when this button actually we're going to hook it up with the and add event listener in this event,

65
00:04:36,770 --> 00:04:38,660
listener will be on click.

66
00:04:38,780 --> 00:04:46,220
So when I click with a mouse, then this function will fire off and semicolon here.

67
00:04:46,380 --> 00:04:51,770
Now I just want to use the local storage function clear, remember.

68
00:04:55,110 --> 00:05:03,870
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

69
00:05:03,870 --> 00:05:12,060
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

70
00:05:12,060 --> 00:05:13,770
want it to make any confusions here.

71
00:05:13,770 --> 00:05:20,120
And it's best to items every set up to empty area.

72
00:05:21,360 --> 00:05:26,450
And we didn't actually check it in our application yet.

73
00:05:26,580 --> 00:05:32,460
It's clear there now what I want, because this one was reset.

74
00:05:33,360 --> 00:05:41,850
So the things that we need to do something here, the first thing that I want to do is while you tell

75
00:05:42,120 --> 00:05:45,990
that so we can say first child.

76
00:05:50,360 --> 00:05:52,050
So you will see in a minute what I'm going to do.

77
00:05:52,070 --> 00:05:57,470
So while you were, you know, the first show, so until we have this means until we have the first

78
00:05:57,470 --> 00:06:06,080
child in our U.S. list, I'm going to say you will not remove, remove, remove child.

79
00:06:07,340 --> 00:06:10,680
And I'll see you the first child.

80
00:06:11,060 --> 00:06:12,990
So that first child.

81
00:06:12,990 --> 00:06:14,160
Just first child.

82
00:06:14,510 --> 00:06:21,940
So what these will do until this list here is just going to make it again so we don't have anything.

83
00:06:21,950 --> 00:06:22,820
I'm just going to clear it.

84
00:06:23,360 --> 00:06:32,840
So when we clear this list so we can say first, second, third, fourth, fifth and so on, so forth.

85
00:06:33,080 --> 00:06:38,060
Now we do have this and we do have this list here.

86
00:06:39,140 --> 00:06:47,510
But what I do here, I set these items, Erica Materi in a loop, whatever I have, you know, you well.

87
00:06:47,720 --> 00:06:53,090
I looked through the first child and until the first child this condition is met, it will always go

88
00:06:53,090 --> 00:06:53,410
here.

89
00:06:53,420 --> 00:06:55,470
So that means that I can remove that child.

90
00:06:55,700 --> 00:06:57,620
So that is what I'm doing now.

91
00:06:57,620 --> 00:07:01,010
When I click it here, you see what's happening.

92
00:07:01,400 --> 00:07:03,040
Items is set to zero.

93
00:07:03,200 --> 00:07:04,150
This is gone.

94
00:07:04,370 --> 00:07:06,620
Nothing is even the area.

95
00:07:06,620 --> 00:07:08,390
It should be empty.

96
00:07:08,390 --> 00:07:08,760
Right?

97
00:07:08,930 --> 00:07:09,480
That's it.

98
00:07:09,710 --> 00:07:12,430
We did everything by the book.

99
00:07:12,710 --> 00:07:15,780
So that is when we click this button.

100
00:07:16,610 --> 00:07:20,390
So that's pretty much what I want to show you for this lecture.

101
00:07:21,140 --> 00:07:23,890
You now our application is 99 percent working.

102
00:07:24,170 --> 00:07:33,480
So one, two, three, four, five.

103
00:07:34,370 --> 00:07:35,660
So we do have this one.

104
00:07:35,990 --> 00:07:39,590
And if you go to the application, we do have that one.

105
00:07:39,770 --> 00:07:43,230
If you go in a console, if you refresh, it will stay there.

106
00:07:43,610 --> 00:07:45,400
Now, I'm just going to copy it.

107
00:07:45,410 --> 00:07:47,110
I'm just going to delete this one.

108
00:07:48,140 --> 00:07:50,270
She's going to open another one, Google Chrome.

109
00:07:50,630 --> 00:07:53,360
And I'm just going to create here and it's there.

110
00:07:53,600 --> 00:07:54,010
Right.

111
00:07:54,680 --> 00:07:55,300
It's there.

112
00:07:55,490 --> 00:07:57,110
So means it's working.

113
00:07:57,560 --> 00:08:04,670
It's loading all the things from the items that are stored in our local storage.

114
00:08:04,760 --> 00:08:05,750
So thank you very much.

115
00:08:06,090 --> 00:08:07,280
I hope you enjoyed this one.

116
00:08:07,280 --> 00:08:09,260
And we will do a couple of more changes here.

117
00:08:09,590 --> 00:08:11,330
We need to fix this when I click.

118
00:08:11,330 --> 00:08:12,860
I want that to be removed.

119
00:08:13,340 --> 00:08:15,380
It also I want that to be removed from here.

120
00:08:15,380 --> 00:08:22,460
So we need to remove from the array from this well, first and I need to remove from the local storage

121
00:08:22,460 --> 00:08:24,710
because now this is coming from the local storage.

122
00:08:24,950 --> 00:08:25,320
Right?

123
00:08:25,760 --> 00:08:26,960
This button is working.

124
00:08:26,960 --> 00:08:33,620
This is not because now you can pretty much do the same thing instead of formed on our listener.

125
00:08:33,800 --> 00:08:35,060
You can just hook that button.

126
00:08:35,390 --> 00:08:36,260
Yeah, yeah.

127
00:08:36,260 --> 00:08:39,530
But that is what we have done so far.

128
00:08:39,830 --> 00:08:41,210
And you can change it.

129
00:08:41,420 --> 00:08:43,940
You can try new things.

130
00:08:44,330 --> 00:08:49,310
But we have a couple of more things to do and we are done with this part of the application.

131
00:08:49,580 --> 00:08:50,390
So thank you very much.

132
00:08:50,570 --> 00:08:52,310
I hope you enjoyed this so far.

133
00:08:52,310 --> 00:08:58,610
If you d if you do please like share subscribe, put a five star review, whatever you want to do there

134
00:08:58,790 --> 00:08:59,240
and.

135
00:08:59,540 --> 00:08:59,990
Yeah.

136
00:09:00,110 --> 00:09:02,810
And get a new comment from me.

137
00:09:03,080 --> 00:09:04,760
So send me something interesting.

138
00:09:05,000 --> 00:09:06,500
Take care and see you in the next one.