1
00:00:00,660 --> 00:00:06,270
This lesson, we're going to be making the list fully interactive, so so far we have content coming

2
00:00:06,270 --> 00:00:12,960
from a JSON file that also stores to local storage, and that gives us the ability to make some updates.

3
00:00:12,960 --> 00:00:16,800
So variable to toggle the active and not active.

4
00:00:16,820 --> 00:00:20,690
So the different statuses in that state consistent within the my list.

5
00:00:21,030 --> 00:00:22,920
This lesson, we're taking it one step further.

6
00:00:23,070 --> 00:00:29,130
We're going to have the option to remove items from the list and also still be able to refresh the page,

7
00:00:29,430 --> 00:00:32,510
also reload the initial JSON data.

8
00:00:32,520 --> 00:00:36,300
So make a request to the JSON data and load that onto the page.

9
00:00:36,540 --> 00:00:39,470
And then also finally also add to the list.

10
00:00:39,750 --> 00:00:42,870
So adding in additional items into the list.

11
00:00:43,020 --> 00:00:45,360
And these are also going to be interactive.

12
00:00:45,540 --> 00:00:47,700
They're also going to get stored to the local storage.

13
00:00:47,820 --> 00:00:50,040
And then you can also remove these if you need.

14
00:00:50,850 --> 00:00:52,600
This lesson is going to be covering quite a bit.

15
00:00:52,620 --> 00:00:57,480
So let's get start in the last one, we made the list items clickable so we can click on each one of

16
00:00:57,510 --> 00:00:58,560
the list items.

17
00:00:58,860 --> 00:01:05,550
And in this lesson, we want to make them even more dynamic where we can set and make these interactive.

18
00:01:05,730 --> 00:01:13,080
I'm also going to be adding in to the list item, creating a class called Box and adding the box padding

19
00:01:13,080 --> 00:01:22,460
to each one of the items and will set a default width of that and also setting margin.

20
00:01:22,860 --> 00:01:30,780
So top and bottom of 10 picks and right and left of zero and going into the JavaScript as we're constructing

21
00:01:30,810 --> 00:01:31,650
the device.

22
00:01:33,320 --> 00:01:41,120
We can do a class list and add the box class to the elements, so it's going to space them out a little

23
00:01:41,120 --> 00:01:49,970
bit more and also actually let's make this slightly less, so do five and then also adding in a border

24
00:01:54,590 --> 00:01:59,510
and really feint type of border around it so we can see each one of the list items.

25
00:01:59,840 --> 00:02:03,710
So we wanted to have an option that we can add items to the list.

26
00:02:03,950 --> 00:02:07,430
And we also want to have an option where we can remove items from the list.

27
00:02:07,700 --> 00:02:09,860
So right now we've got the ability to click.

28
00:02:10,580 --> 00:02:14,160
We also want to have an option to remove it from the list entirely.

29
00:02:14,720 --> 00:02:16,490
So let's add that in.

30
00:02:16,490 --> 00:02:22,970
And as we're constructing the elements, we're going to append and add in a span to the div and the

31
00:02:22,970 --> 00:02:26,910
span is going to give us an option to remove the items.

32
00:02:26,920 --> 00:02:34,190
So just creating and just as we created the div, we're using create elements and we'll create the span

33
00:02:34,610 --> 00:02:39,030
and then within the span it'll just have some tax content.

34
00:02:39,650 --> 00:02:47,410
And right now we can just have it as an X and then for the div append the span content.

35
00:02:49,130 --> 00:02:51,200
So that gives us our X there.

36
00:02:51,590 --> 00:02:54,970
And also we want to apply some styling to the spane.

37
00:02:55,520 --> 00:02:59,750
We don't have to do anything specific because it's already going to be contained within the box.

38
00:03:00,050 --> 00:03:08,540
So box span and you can set with four of 20 picks, heights of 20 picks.

39
00:03:10,690 --> 00:03:11,440
Border.

40
00:03:14,750 --> 00:03:17,330
And America, red border around it.

41
00:03:23,610 --> 00:03:26,070
And of course, you can style it as needed.

42
00:03:27,920 --> 00:03:33,020
And actually, they're going to decrease the border radius, so it's not as around.

43
00:03:36,590 --> 00:03:44,830
And we'll transform it into an uppercase X, so that gives us an X where we can delete content and also

44
00:03:44,850 --> 00:03:46,680
the color to this to be red.

45
00:03:47,120 --> 00:03:49,730
So it's always going to be red within that element.

46
00:03:50,660 --> 00:03:54,530
So now we've got the Xs and also add in.

47
00:03:56,080 --> 00:04:08,140
Margin to the left, so that keeps the ex slightly off and spend let's add an event listener.

48
00:04:08,170 --> 00:04:15,570
So this event that we're listening for is going to be a click event and fires off the object and well,

49
00:04:15,640 --> 00:04:18,550
right now we'll just track it into the console.

50
00:04:20,230 --> 00:04:26,590
So we're clicking whether we click on the X or not, it's still taking and firing off both click events.

51
00:04:26,890 --> 00:04:33,550
So we want to stop that from happening where it's only going to fire off only the event for the X button.

52
00:04:33,790 --> 00:04:40,360
And there's a method within JavaScript that you can stop the propagation.

53
00:04:40,930 --> 00:04:45,160
And what this will do is this will stop it from moving up to the next level.

54
00:04:45,370 --> 00:04:48,520
So now when I click the X, it's no longer toggling.

55
00:04:48,520 --> 00:04:50,380
It's just firing off that one event.

56
00:04:50,590 --> 00:04:58,090
But if I click the parent and not clicking the span, it's going to allow me to still click and underline

57
00:04:58,330 --> 00:05:02,420
and actually don't like that it is doing the text decoration of the underlying.

58
00:05:02,950 --> 00:05:05,290
So how about we get rid of that altogether?

59
00:05:05,530 --> 00:05:07,940
And there's also options as well that you could do that.

60
00:05:08,410 --> 00:05:16,720
So what we want to do is we want to remove out the X and also for the box span.

61
00:05:17,800 --> 00:05:27,760
Once we hover over it, let's set the cursor to pointer and we'll also update the background color.

62
00:05:28,780 --> 00:05:30,490
So that's slightly off.

63
00:05:31,780 --> 00:05:39,580
So whenever we hover over it, we see there's a slight tint to the X for the color.

64
00:05:42,800 --> 00:05:49,850
And also set the ex to be black, so now whenever they get clicked, what we want to do is we want to

65
00:05:49,850 --> 00:05:52,480
actually remove that particular element.

66
00:05:52,880 --> 00:05:59,090
We have the index value of the element from the list that we can remove.

67
00:05:59,840 --> 00:06:04,850
And we also know which element it is on the page that we can remove as well.

68
00:06:05,000 --> 00:06:14,990
So let's select the parent so div remove and then we're also take the element out of my list.

69
00:06:16,160 --> 00:06:23,810
And because this is an array, we have a way to remove the item using splice.

70
00:06:25,810 --> 00:06:32,320
So within my list, and I'm actually going to move the span down to the bottom.

71
00:06:35,260 --> 00:06:36,850
So it's in my list.

72
00:06:40,010 --> 00:06:50,150
Using JavaScript splice method and we have the index value of where we want to slice, and we were to

73
00:06:50,150 --> 00:06:56,960
remove out one item from the list and we'll console logged on my list just to make sure that it's still

74
00:06:56,960 --> 00:06:57,650
consistent.

75
00:06:58,490 --> 00:07:05,120
And that's one of the real challenges, is to make sure that we're consistent with what the user sees

76
00:07:05,120 --> 00:07:07,430
as well as what we've got within our list.

77
00:07:07,700 --> 00:07:14,180
So we're able to effectively update the list, and that means that we should save it to the local storage

78
00:07:14,180 --> 00:07:14,660
as well.

79
00:07:15,230 --> 00:07:16,400
And I'll create a function.

80
00:07:19,710 --> 00:07:22,690
And I'll create a function just called Sèvres to storage.

81
00:07:23,010 --> 00:07:31,110
So what this one will do is since we're doing the same thing multiple times, it's easier if we just

82
00:07:31,110 --> 00:07:38,310
create and every time we do an update to it, we just run the one function that saves it to storage.

83
00:07:38,580 --> 00:07:40,850
So that's also going to clean up your code as well.

84
00:07:42,030 --> 00:07:46,610
So every time we make an update to the list, make sure that you are saving it to the storage.

85
00:07:47,910 --> 00:07:49,590
So we also want to.

86
00:07:50,670 --> 00:07:56,430
So now that we've removed items, it's actually removed it from the local storage.

87
00:07:56,850 --> 00:08:04,120
So we want to have a way to reload the contents from the JSON file into the local storage.

88
00:08:04,140 --> 00:08:10,350
So let's set that up as well and we'll call it function reload.

89
00:08:11,940 --> 00:08:18,590
So what this will do is this is actually going to reload the contents and that will just run the fetch.

90
00:08:19,530 --> 00:08:27,270
So it gives us an opportunity to kick that off and reload the content from the Web you URL and we can

91
00:08:27,270 --> 00:08:29,760
create a button on the page that will run that.

92
00:08:30,360 --> 00:08:39,150
So button one and using the documents create elements that's creating elements on the page and the element

93
00:08:39,150 --> 00:08:51,030
is going to be a regular button and button one, set the text content, reload JSON data and then whenever

94
00:08:51,030 --> 00:08:58,920
the button one and add an event listener and whatever the button gets clicked, what will happen is

95
00:08:58,920 --> 00:09:01,740
it will run the reloader function.

96
00:09:06,800 --> 00:09:15,290
So let's do a refresh and we need to also add the button on the page, button one, and actually I don't

97
00:09:15,290 --> 00:09:21,590
want to send it to the output as we're clearing the output so we can append it to the document body

98
00:09:22,730 --> 00:09:25,720
and append the button one object to the body.

99
00:09:26,390 --> 00:09:33,710
So that will always give us an opportunity to reload the data back to its initial loading coming from

100
00:09:33,710 --> 00:09:34,550
the adjacent file.

101
00:09:36,560 --> 00:09:42,500
So also, if you want to add to the list, so we just got to make sure that the structure is going to

102
00:09:42,500 --> 00:09:43,070
be the same.

103
00:09:43,280 --> 00:09:48,820
So we need to create two input areas and we can set those up to add to the list.

104
00:09:49,130 --> 00:09:53,030
So let's cretz the inputs as well as the button.

105
00:09:53,030 --> 00:09:59,410
So input one and using the documents and you could do this in regular HTML as well.

106
00:09:59,810 --> 00:10:06,200
So I'm just creating the input and also inputs too.

107
00:10:06,560 --> 00:10:09,490
And this is going to be the number of guests.

108
00:10:09,500 --> 00:10:15,500
So create elements and it's also going to be an input and will change the types.

109
00:10:16,280 --> 00:10:21,520
And then we also need another button and this will be the one that adds up to to the list.

110
00:10:21,920 --> 00:10:25,930
So it creates elements and the element that we're creating is going to be a button.

111
00:10:26,450 --> 00:10:31,430
So let's add all of this to the page will create one main container.

112
00:10:32,870 --> 00:10:42,920
So using the documents create and this is just going to be a div so we can add both the inputs and the

113
00:10:42,920 --> 00:10:44,200
content into the div.

114
00:10:44,360 --> 00:10:49,520
So let's add that in and append to the div.

115
00:10:50,390 --> 00:11:05,200
So div one append and input one div one append inputs two and if one I turned the button two.

116
00:11:05,720 --> 00:11:13,240
And then lastly let's add it to the page so I'd give one to the page.

117
00:11:13,250 --> 00:11:14,780
So that gives us our inputs.

118
00:11:15,290 --> 00:11:16,340
Now let's update it.

119
00:11:16,340 --> 00:11:21,680
So button to text content add to the list.

120
00:11:22,340 --> 00:11:25,370
So give us a button that will add content to the list.

121
00:11:25,970 --> 00:11:32,630
Let's turn this into input one and add via a placeholder so the

122
00:11:35,240 --> 00:11:40,370
input one and set attributes.

123
00:11:43,910 --> 00:11:45,110
So the placeholder

124
00:11:47,690 --> 00:11:59,960
will just say name, so there's the attribute added to that and also for input, two will set the number.

125
00:12:00,740 --> 00:12:07,130
We we don't actually need a placeholder for this because this is actually going to be our type and the

126
00:12:07,130 --> 00:12:08,270
type is going to be No.

127
00:12:13,340 --> 00:12:20,150
So let's do a quick inspect on our Temel, so now that it's a no type, we can move it up and down with

128
00:12:20,150 --> 00:12:20,610
the number.

129
00:12:20,960 --> 00:12:28,960
Also, let's set some default values so and put two and set the value for that to be two.

130
00:12:29,750 --> 00:12:31,350
So it always has a default value.

131
00:12:32,270 --> 00:12:34,620
So that way we don't need the placeholder for it.

132
00:12:36,410 --> 00:12:41,900
And so what we want to happen is whenever the user clicks add to the list, we want to add it to the

133
00:12:41,900 --> 00:12:42,280
list.

134
00:12:42,530 --> 00:12:45,790
So we need to add an event listener to the button.

135
00:12:46,550 --> 00:12:53,690
So taking the button to let's add our event listener to the button to say whenever that button gets

136
00:12:53,690 --> 00:13:00,980
clicked, we want to run the function and we'll just call add to the list and they will create that

137
00:13:00,980 --> 00:13:04,190
function down here where we've got the rest of the functions.

138
00:13:07,850 --> 00:13:15,800
To list and we don't need to pass in any parameters, it's going to get the content from the inputs

139
00:13:16,130 --> 00:13:17,210
and these are global.

140
00:13:17,540 --> 00:13:22,880
So the input one input to our global, let's select those values.

141
00:13:24,170 --> 00:13:29,230
And for now, we're just console lockout's, the input one value.

142
00:13:30,110 --> 00:13:38,510
So we want the current value of whatever the button gets clicked and input to value and let's save that.

143
00:13:38,840 --> 00:13:46,520
So now when we add to here to the list and let me open up the console and we'll clear it so we get the

144
00:13:46,520 --> 00:13:48,290
content from the inputs.

145
00:13:48,530 --> 00:13:54,290
And we also have to make sure that it's consistent with what we have within the JavaScript, the JSON

146
00:13:54,290 --> 00:13:54,790
object.

147
00:13:55,100 --> 00:13:58,840
So we need to have a value for name guests and status.

148
00:13:59,150 --> 00:14:01,310
So let's construct that object.

149
00:14:02,240 --> 00:14:09,950
So our temporary object and having a name and the value for the name is can be whatever we've got for

150
00:14:09,950 --> 00:14:19,070
input, one value and then just comma separated out and then we had four guests and call that input

151
00:14:19,070 --> 00:14:20,300
to value.

152
00:14:20,330 --> 00:14:25,780
So it's the number and then the status by default can always be a boolean value.

153
00:14:25,790 --> 00:14:27,110
So just set it to be false.

154
00:14:28,310 --> 00:14:29,870
So it's going to create the object.

155
00:14:30,260 --> 00:14:33,190
So next up, we want to add this object.

156
00:14:33,530 --> 00:14:39,190
So we want to add it to the list and we also want to add it to our current list.

157
00:14:39,860 --> 00:14:50,840
So my list and push were pushed my object into the my list and want to run the save to storage of the

158
00:14:50,840 --> 00:14:51,470
my list.

159
00:14:54,270 --> 00:15:01,040
So going down to where we're pushing the object into the my list, so always add it into the storage,

160
00:15:01,620 --> 00:15:02,780
so let's see what happens.

161
00:15:02,830 --> 00:15:06,060
So now whenever we refresh, we've got that new item.

162
00:15:06,240 --> 00:15:08,190
But we also want to add it right to the page.

163
00:15:08,460 --> 00:15:13,950
So make to the list so we can get the index value of this item.

164
00:15:16,320 --> 00:15:19,590
And that index values can be whatever the current list.

165
00:15:23,260 --> 00:15:24,310
Length is going to be.

166
00:15:27,770 --> 00:15:36,800
So let's set up, get the value, and this is going to be whatever temporary my list like this.

167
00:15:37,520 --> 00:15:45,110
So this is whatever we've got for the first item there and then before as we're making the list.

168
00:15:47,900 --> 00:15:55,550
We can send the value, which is going to be the index value of the item and then also the might object,

169
00:15:55,580 --> 00:15:57,130
which we can also add to the list.

170
00:15:59,630 --> 00:16:06,050
So that way, as long as our structure is consistent, we should be able to add items to the list and

171
00:16:06,050 --> 00:16:08,000
then they should still function the same way.

172
00:16:08,180 --> 00:16:11,930
We should be able to do a refresh and have all of the items in the list.

173
00:16:11,930 --> 00:16:17,540
We can remove stuff from the list, refresh it, add new items into the list.

174
00:16:20,820 --> 00:16:26,460
Remove items from the list, so they're all interactive and clickable and our list is fully dynamic,

175
00:16:26,460 --> 00:16:32,580
saved into local storage, and if we ever want to refresh our JSON, we could just do a reload of the

176
00:16:32,600 --> 00:16:34,400
geoscience we're getting from the Jason list.

177
00:16:34,620 --> 00:16:40,590
So if we're updating the JSON list, then we can always update and do an update of the content within

178
00:16:40,590 --> 00:16:41,630
the JSON list.

179
00:16:44,140 --> 00:16:48,170
And this lesson, we're going to be almost wrapping up the project where we're going to be adding the

180
00:16:48,170 --> 00:16:55,040
option to reload the JSON data and also adding another button that we can click to remove items from

181
00:16:55,040 --> 00:17:00,530
the list, also having different functions that are going to handle some of the functionality that we've

182
00:17:00,560 --> 00:17:01,190
been creating.

183
00:17:01,190 --> 00:17:07,100
So separating those out so it's more logical within the application and then also adding input elements

184
00:17:07,310 --> 00:17:09,020
that can add to the list.

185
00:17:09,020 --> 00:17:14,390
So dynamically creating those adding those to the page so that whenever we click a button, we can add

186
00:17:14,390 --> 00:17:19,760
items to the end of the list and then also remove stuff from the list and reload the Jason.

187
00:17:19,770 --> 00:17:23,270
So creating the fully dynamic interactive list object.

188
00:17:23,300 --> 00:17:25,190
That's what we're doing in this lesson.

189
00:17:25,430 --> 00:17:28,730
So go ahead and add those to your own project.

190
00:17:30,340 --> 00:17:33,550
And coming up, we're just going to do a quick finalization of the app.