1
00:00:00,000 --> 00:00:04,560
What's going on fellow web developers? My name is Tyler Pots, and in today's video we're

2
00:00:04,560 --> 00:00:11,520
building this to do list application that uses local storage and it's built using few

3
00:00:11,520 --> 00:00:19,200
JS. Now we've built this exact same to do app in vanilla jarffs, gives you can find the actual

4
00:00:19,200 --> 00:00:24,080
video links down below if you want to watch that one. So let me just show you what we can do here.

5
00:00:24,080 --> 00:00:29,120
So we can give in a name, we can then click office and if we refresh space, this will be saved

6
00:00:29,120 --> 00:00:33,520
because it's stored in local storage. Another thing we do is add it to do. So let's just say

7
00:00:34,320 --> 00:00:41,760
make a video. Now we can select if it's business or personal, let's just select business and here add

8
00:00:41,760 --> 00:00:47,520
to do. And there you go you see make a video. We can then also say we can select personal and change

9
00:00:47,520 --> 00:00:57,040
this from make a video to eat lunch with Steve. And there you go you see we've got a personal one here

10
00:00:57,040 --> 00:01:03,600
if we refresh the page these will be consistent. We can also tick this check list and refresh page

11
00:01:03,600 --> 00:01:10,560
and you'll see this is also consistent. We can also edit these make a YouTube video. And if we refresh

12
00:01:10,560 --> 00:01:15,680
again it all saves as you update and change things which really awesome. We say again we've done

13
00:01:15,680 --> 00:01:19,760
this let's just delete it now so we don't have it refresh and there you go you can see it's working

14
00:01:19,760 --> 00:01:24,240
as expected. Everything works really nice and this is what we're going to be building in today's

15
00:01:24,240 --> 00:01:32,880
video. So without further ado let's get in to the code. Okay guys that as you can see here we have an

16
00:01:32,880 --> 00:01:37,280
empty folder inside official studio code. So the first one we're going to do is open up my terminal

17
00:01:37,280 --> 00:01:43,440
and we're going to be using feet to actually create our boilerplate art you know our our start

18
00:01:43,440 --> 00:01:50,000
starting code. So we're going to say MPM create feet at latest then we're going to give it a name

19
00:01:50,000 --> 00:01:54,480
I'm just going to put dot to say create in the current directory. I'm going to do double hash and then

20
00:01:54,480 --> 00:02:00,160
10 play and I'm going to sell it as few which go use just a few JS versions. Let's hit enter

21
00:02:02,160 --> 00:02:07,440
and then it's got our protection. We're going to say to do app here enter and then we can run MPM

22
00:02:07,440 --> 00:02:13,440
install to actually install the dependencies. Now while that's doing that let me just quickly

23
00:02:13,520 --> 00:02:21,280
go into our tutorial into our source and paste a CSS file. Now this CSS you can find in the

24
00:02:21,280 --> 00:02:26,480
GitHub link below or if you want to watch me actually code all the CSS. I want to explain it

25
00:02:26,480 --> 00:02:31,280
you can head over to the JavaScript version of this tutorial and check out. I don't really

26
00:02:31,280 --> 00:02:36,720
like to take the long time to rewrite the CSS so I decided that I would be easier just to paste it.

27
00:02:36,720 --> 00:02:42,400
Let me just quickly show you this inside of here and I'll quickly I'll slowly scroll down

28
00:02:42,560 --> 00:02:48,000
it. I should see this quite a bit of code. So for a hundred odd lines but it's very straightforward

29
00:02:48,000 --> 00:02:54,000
and if you do want to get this code you can get in the GitHub link below or watch the U of the

30
00:02:54,000 --> 00:02:58,240
JavaScript video which will also be linked down below if you want to learn it how to do it in two

31
00:02:58,240 --> 00:03:02,960
different ways you can check it out down there and there you go that's everything in this file.

32
00:03:02,960 --> 00:03:09,120
So with that out of the way let's go into well let's check if that's ran that hit has ran we can

33
00:03:09,120 --> 00:03:15,520
now say mpm run death and just hit run and then if we just refresh over on the right here you'll see

34
00:03:15,520 --> 00:03:22,080
we are given this just plain template here. So let's remove all that code let's go to app.fu

35
00:03:22,080 --> 00:03:28,720
actually let's go to main first and let's just import our main.css file you could see that's now

36
00:03:28,720 --> 00:03:33,600
changed away this looks and close up we're done with that we can delete this assets folder we can

37
00:03:33,600 --> 00:03:40,320
delete the components folder we can delete everything in there in here and this whole style

38
00:03:40,320 --> 00:03:46,800
tags we're using a css file and there you go we could just put it in there saying like hello world

39
00:03:46,800 --> 00:03:54,400
obviously wrapped this in the tag and there you go that's working and you can see that's changing

40
00:03:54,400 --> 00:03:59,760
as we go. So first what we're going to do is we're going to start off by just adding in some

41
00:04:00,480 --> 00:04:05,840
um markups and we want to import some sorry not markups some JavaScript so we want to import

42
00:04:06,240 --> 00:04:16,480
and we're going to say ref on mounted and computed also we want to get watch from few so these

43
00:04:16,480 --> 00:04:21,280
are different things you can use with the composition API in few gs we've got our reference

44
00:04:22,000 --> 00:04:27,200
which is basically how we're going to handle our state we've got on mounted which is going to be used

45
00:04:28,160 --> 00:04:34,560
when we first render the page or render the component we're going to call this here and this

46
00:04:34,560 --> 00:04:39,840
what we're going to use to get our local storage out of local storage we're going to use compute

47
00:04:39,840 --> 00:04:43,760
it because we want to have things in order so we're going to have a to do so array but then we're

48
00:04:43,760 --> 00:04:51,440
going to have a computed value which is going to be a a to b or a to c sorry compute it lists

49
00:04:51,520 --> 00:04:56,400
rather than having or not a to be done by date sorry so it'll be ordered by the date it was

50
00:04:56,400 --> 00:05:02,640
created and then what was half a watch file here which will basically watch for any changes in our

51
00:05:02,640 --> 00:05:09,040
references and if they update our local storage so let's start off with creating a few references

52
00:05:09,040 --> 00:05:16,080
so we're going to say to do's is equal to a empty array we're going to say to do's

53
00:05:16,080 --> 00:05:23,120
const name sorry t equal to an empty string we're going to have an input which is going to be our

54
00:05:23,120 --> 00:05:27,600
content and we're going to set that to an empty string so that's going to be the content we enter

55
00:05:27,600 --> 00:05:35,040
inside of our actual input for field we're going to say input and we're going to give a category

56
00:05:35,040 --> 00:05:39,200
and this is also just going to be we're going to set this to null because it's going to be null by default

57
00:05:39,280 --> 00:05:50,240
we then want our to do's underscore asynchronous or ascending sorry asynchronous and what we're

58
00:05:50,240 --> 00:05:59,360
going to do is say array to do's dot value dot saw and I'm going to sort a b and I'm going to say

59
00:06:00,160 --> 00:06:08,880
break this into its own little function here and we're just going to return b dot created at minus

60
00:06:09,200 --> 00:06:17,120
a dot created at and that should or cancel save that should give us back a asynchronous or a

61
00:06:17,120 --> 00:06:25,200
synchronous ascending list by date so it should show the latest front and the oldest afterwards

62
00:06:25,200 --> 00:06:30,720
or I might be wrong and I need to flip b and a round but we'll find out in a moment now we've

63
00:06:30,720 --> 00:06:36,480
done the filtering we next want to let's start with our markups let's actually get some things

64
00:06:36,480 --> 00:06:41,600
displaying on the page so inside of our template the first one we'll do so I'm going to create a

65
00:06:41,600 --> 00:06:51,760
main tag with the class of app and an inside of here we're going to have a greeting a set where I've

66
00:06:51,760 --> 00:06:59,120
got caps lock on it will not turn off a her we want a section called greeting and inside of here we're

67
00:06:59,200 --> 00:07:06,400
going to have a h2 with the class of title which is actually going to be a let's go say what's

68
00:07:06,960 --> 00:07:12,960
up comma and then we're going to put it in an input field let's go a bit of type text we're going

69
00:07:12,960 --> 00:07:22,000
to give it a placeholder of name here and we're going to say phi model is going to be equal to name

70
00:07:22,560 --> 00:07:27,440
which is same we set up here so you can see with nothing in there it's there but we can then enter

71
00:07:27,440 --> 00:07:32,880
our own name and that should save however it's not going to save as we refresh you can see it's now

72
00:07:32,880 --> 00:07:37,200
removed and it's no longer there which is kind of annoying we kind of want it to be persistent so

73
00:07:37,200 --> 00:07:43,280
what we want to do is we want to call this watch function we're going to say name and then we're going

74
00:07:43,280 --> 00:07:49,040
to say new value we don't need the old value for this and we're going to go in here and we can

75
00:07:49,120 --> 00:07:56,960
even console log new value or we can say local storage dot set item name and we're going to set the

76
00:07:56,960 --> 00:08:03,040
name equal to the new value so what this is going to do is we're going to be watching this name

77
00:08:03,040 --> 00:08:08,000
if this changes we're going to get the new value it's changed to and we're going to set our local

78
00:08:08,000 --> 00:08:13,440
storage to name but this still is a good work let's say here we go set my name to Tyler and we're

79
00:08:13,440 --> 00:08:18,800
going to refresh nothing's going to happen if we open up our console it goes application you can see

80
00:08:18,800 --> 00:08:24,160
name has been set to Tyler we also have to do so which we could delete so you can see my name has been

81
00:08:24,160 --> 00:08:32,560
set to Tyler we could also change it to like Steve we need to save this side sorry um I don't

82
00:08:32,560 --> 00:08:36,640
know what happened so Steve you can see that's now changed to Steve we could change it to Tyler

83
00:08:37,600 --> 00:08:43,120
but when we refresh it will not be set because we're not actually pulling it from the local storage

84
00:08:43,120 --> 00:08:48,080
so to do that we're going to call on mounted we're going to create an arrow function and in here

85
00:08:48,080 --> 00:08:56,640
we're going to say name dot value is equal to local storage dot get item name then we're going to

86
00:08:56,640 --> 00:09:03,200
say else an empty string hit save and there you go you can see that set and we delete this and we

87
00:09:03,200 --> 00:09:07,760
refresh you can see we get nothing there and then we can enter our name and it is saved and there you

88
00:09:07,760 --> 00:09:12,160
go that is all we need to do to actually save the name we can also do a similar thing with the

89
00:09:12,160 --> 00:09:17,440
to do but I'll show you that once we get there let's get back down to the marker so underneath this

90
00:09:17,520 --> 00:09:23,200
section we need a place to actually create a to do so we're going to create a create to do

91
00:09:23,200 --> 00:09:30,000
section we're going to have a h or sorry a h free and this is going to say create a to do

92
00:09:30,800 --> 00:09:36,960
and there you go you can see that there we can probably make that block capitals that looks a lot better

93
00:09:37,760 --> 00:09:42,640
and then under this we're going to create a form which is going to have an

94
00:09:42,640 --> 00:09:49,200
add submit bound bind to it so we can say add submit so when we submit this we're going to

95
00:09:49,200 --> 00:09:54,640
prevent default and we're going to call add to do which we don't currently have so let's just

96
00:09:54,640 --> 00:10:00,560
create a constant called add to do and so let's say let's just do an empty function for now we'll

97
00:10:00,560 --> 00:10:08,480
deal with that a bit later so underneath our form let's create a h for that just says what's on

98
00:10:08,480 --> 00:10:14,640
your to do list question mark so this is where we're going to add that we don't want an input

99
00:10:14,640 --> 00:10:21,840
field again an just an input field if it will want to work an input field of type text

100
00:10:22,880 --> 00:10:29,040
we're then going to give it a placeholder which goes said to e.g make a video

101
00:10:29,440 --> 00:10:40,240
and then we want to set the fee model to be equal to input content so now we have this and as we enter

102
00:10:40,240 --> 00:10:45,920
this we can actually see this changing in our input content sections any time we change this

103
00:10:46,640 --> 00:10:53,760
our input is now balanced to a bounded to this so this is now set so let's just remove that

104
00:10:53,760 --> 00:10:58,240
and let's just make this more readable so let's break these down onto these attributes down

105
00:10:58,240 --> 00:11:05,120
onto separate lines here um give that one of those and there you go so that's now easier to read

106
00:11:05,920 --> 00:11:12,880
now underneath this section we want enough a h for and this is going to say pick a catter gory

107
00:11:12,880 --> 00:11:18,240
so we're going to have a category you can actually select so we have on to do so you could say make

108
00:11:18,240 --> 00:11:23,200
a video and then in the categories you want to know if this is a business it's this for our business

109
00:11:23,280 --> 00:11:29,040
or is this just a personal to do so to do that we're going to create a diff with the class of

110
00:11:29,040 --> 00:11:34,320
options inside of this we're going to have two labels they're not going to have four

111
00:11:34,320 --> 00:11:38,800
solemn they don't don't need x we're going to have our inputs inside of them and we'll call this

112
00:11:38,800 --> 00:11:45,920
of type radio we don't well we need a name and this is going to be called catter gory we do not need

113
00:11:45,920 --> 00:11:51,520
the ID although it probably would be useful to have one in these cases but for this one we do not

114
00:11:53,920 --> 00:11:59,920
actually no let's just give it them the ID of catter gory once i think i style the ID and we're

115
00:11:59,920 --> 00:12:08,400
having enough one of category two in a minute we're going to have the foul u to be biss niss oh biss niss

116
00:12:10,160 --> 00:12:18,160
that's the one and then we're going to feed model this to be attached to our input catter gory

117
00:12:18,800 --> 00:12:25,760
so what we're doing here is we're getting an input we set a radio and you can see it here

118
00:12:25,760 --> 00:12:31,760
and we're going to set a catter gory one biss niss and input catter gory we don't need this

119
00:12:31,760 --> 00:12:36,160
ID i don't feed catter g i'm going to remove it i'm i'm taking the risk if we need it i'll take

120
00:12:36,160 --> 00:12:41,280
you know we'll find that we're going to then create a spank called bubble and as you can see it's

121
00:12:41,280 --> 00:12:46,800
already there it's styled because this is all in the CSS and we're going to call this biss niss

122
00:12:46,880 --> 00:12:51,040
because this is the biss niss bubble now underneath here we're going to create this

123
00:12:51,040 --> 00:12:56,640
diff and call it business and there you go we've got our business selector now we can copy this

124
00:12:58,000 --> 00:13:05,760
paste this underneath change the value to personal and change this also to personal and finally

125
00:13:05,760 --> 00:13:11,120
this business at the bottom to personal hit save and you can see we have a array that's changing

126
00:13:11,120 --> 00:13:16,560
and if we so you're not on a radio button that's changing if we say input catter gory underneath

127
00:13:17,200 --> 00:13:22,400
set well there you go so we can business personal business personal business personal business

128
00:13:22,400 --> 00:13:27,440
personal you can see they just change depending on what you click um which is great so let's just

129
00:13:27,440 --> 00:13:36,720
remove that as well now underneath the options diff we're going to add in just a submit button here

130
00:13:36,720 --> 00:13:42,560
so we're going to create an input of type submit which is just going to have the value of add to do

131
00:13:42,560 --> 00:13:52,080
and there you go you can see we've got the button here so that's great we now have a form that can

132
00:13:52,080 --> 00:13:58,240
add a to do but the problem is the add to do is empty so what we need to do is actually add in some

133
00:13:58,240 --> 00:14:03,040
code here so the first thing we're going to do is we're going to check if our input content

134
00:14:04,000 --> 00:14:13,680
content is dot value dot trim just to make sure it's put space in there is equal to an empty string

135
00:14:13,680 --> 00:14:17,920
so if it's equal to an empty string that means no one's put any content in there if it's just

136
00:14:17,920 --> 00:14:25,840
spaces like this it will also remove those spaces um what we're going to check if our input category

137
00:14:25,840 --> 00:14:32,880
dot value is equal to null so basically if we have no nothing in there if

138
00:14:32,880 --> 00:14:38,400
one of these is true so if this is empty or this isn't been selected we're just going to return

139
00:14:38,400 --> 00:14:43,360
and we're not going to do anything so if we hit add to do now nothing happens we can put a log

140
00:14:43,360 --> 00:14:49,760
part here saying add to do just so we have you see if we hit this in our console there is no add

141
00:14:49,760 --> 00:14:55,760
to do but if we fill this in and say test and hit business and add to do you can see add to do shows

142
00:14:55,760 --> 00:15:01,280
if we just add spaces and do this you can see add to do doesn't render again look if I clear that

143
00:15:01,360 --> 00:15:06,480
it does not if I do a t here you can see it does so there you go you can see that's how that works

144
00:15:08,480 --> 00:15:13,920
so the next thing we want to do is we want to say to do's dot value dot push and we're going to push

145
00:15:13,920 --> 00:15:21,520
in some content which is going to be input dot content dot value we're going to get our category

146
00:15:21,520 --> 00:15:26,560
value and then we need to create that this is actually going to be a new date dot get time

147
00:15:27,360 --> 00:15:32,800
and the reason we just get time is because this returns our date in milliseconds which is what

148
00:15:32,800 --> 00:15:42,160
we're going to use to compare inside of our to do's a sending so what to do is value push that

149
00:15:42,160 --> 00:15:45,920
is good we also need one more thing in here it's going to be done and we're going to set this to

150
00:15:45,920 --> 00:15:50,960
false because by default nothing is going to be set to done which is great now that should

151
00:15:50,960 --> 00:15:56,480
actually save every time we add a to do however this is just going to add it to our to do's array

152
00:15:56,560 --> 00:16:01,520
and not to our local storage so we need to take the same method we use down here and change it

153
00:16:01,520 --> 00:16:08,800
up a bit so we're going to say watch to do's we're say if there's a new value what we're going to do

154
00:16:08,800 --> 00:16:18,480
is basically do the same as before local storage dot set item to do's to to to to uh well yes Jason dot

155
00:16:19,440 --> 00:16:28,640
stringify new foul but this isn't going to work by default so this is going to allow

156
00:16:28,640 --> 00:16:34,640
us to once we first initially set our to do's this will work however this will not work

157
00:16:34,640 --> 00:16:40,240
when we push because push is adding like inside video only way to call a watch is to completely

158
00:16:40,240 --> 00:16:46,480
change the to do's value by doing so such as to do's dot value is equal to and whatever you want

159
00:16:46,800 --> 00:16:53,680
now to combat that we can actually pass some options in here and one of the options is called

160
00:16:53,680 --> 00:16:57,760
deep and we can set this to true so what deep means is it's going to look through everything it's

161
00:16:57,760 --> 00:17:04,640
going to look through each individual array item element in here and then if any of it changes so

162
00:17:04,640 --> 00:17:10,240
if anything changes inside of this deep pull catch it and then we'll call this function again

163
00:17:10,960 --> 00:17:18,320
so let's just hit save and let's just try this out let's just say make a video let's say to business

164
00:17:18,320 --> 00:17:24,800
and hit add to do and we get into date dot get time it's not a construction date oh I need to

165
00:17:24,800 --> 00:17:30,960
pass in parentheses there because I'm calling a date let's refresh it let's try this one more time

166
00:17:30,960 --> 00:17:38,560
let's say make a video question oh just not question one business add to do and then nothing happened

167
00:17:38,880 --> 00:17:43,200
but if we go to application you can see we now have to do's in here let's say we add enough

168
00:17:43,200 --> 00:17:50,000
for make a let's say get lunch and set this to personal and to do you can see we now have a second

169
00:17:50,000 --> 00:17:56,400
item here we have our make a video and our get lunch now just because I want to test this inside

170
00:17:56,400 --> 00:18:03,040
of underneath the bomb here let's just dump out our to do's a s c because I want to see which

171
00:18:03,040 --> 00:18:09,760
which way to make a video is first I get lunch is last so I think that means this needs to be

172
00:18:09,760 --> 00:18:18,800
be and this needs to be a oh also we're not gonna have anything there because our creator that

173
00:18:18,800 --> 00:18:25,760
is not actually sorry our actual we're not pulling our to do so this now our to do's array is actually

174
00:18:26,400 --> 00:18:33,360
so to fix that in on mounted we want to say to do's dot foul value is equal to json dot

175
00:18:33,360 --> 00:18:38,800
pass because we stringify it originally and then we'll get all of them to do's otherwise we're going to

176
00:18:38,800 --> 00:18:45,120
excuse me that should just be a plane array actually this can be removed and if that comes back

177
00:18:45,120 --> 00:18:50,320
from nothing we would just pass in an array and there you go so you can see get lunch is now first

178
00:18:50,320 --> 00:18:55,280
rather than last because we made to get lunch after so if we added a new one to this let's say just test

179
00:18:55,280 --> 00:19:00,320
a business one and you can test becomes first which is exactly what we want because if we change

180
00:19:00,320 --> 00:19:09,040
this to to do's you'll see test should swap to last or not maybe not and maybe I'm doing this

181
00:19:09,040 --> 00:19:15,120
completely wrong in my head but hopefully that works so if we change these around it seems to work

182
00:19:15,120 --> 00:19:21,840
if I make a video was our last one which is fine that means b minus a save is correct it must

183
00:19:21,840 --> 00:19:26,640
mean that to do's it's just being pulled back in a correct order which is fine um this is actually

184
00:19:26,640 --> 00:19:32,640
still working if it does end up being in the wrong order which is fine that's good okay so now we've

185
00:19:32,640 --> 00:19:38,640
got that working we have one more section to do which is actually listing that to do's out so underneath

186
00:19:38,640 --> 00:19:45,680
this section we want to create a new to do high-fant list section we want to create a H3 which is just

187
00:19:45,680 --> 00:19:56,160
going to say to do list there you go and underneath this we want to say death dot list now in here

188
00:19:56,160 --> 00:20:02,400
we want to have a death this is going to have a fee for a texture we'll go say for every to do

189
00:20:02,400 --> 00:20:09,920
inside of to do's a ascending we're then going to pass through a class balance we're going to

190
00:20:09,920 --> 00:20:16,080
pass these ten plate strings and we're say to do high-fant item so you can see there's free

191
00:20:16,080 --> 00:20:21,120
items and I'll list and now we've got these blank boxes there and we're going to check if to do

192
00:20:21,120 --> 00:20:27,760
dot done if that's so this passes and and method here and we're just going to pass back

193
00:20:27,760 --> 00:20:35,600
done and that will basically set this to done if the to do is actually set to done so underneath here

194
00:20:35,600 --> 00:20:41,360
we just want to say we want to add in a label with nothing can and inside the label we want to say

195
00:20:41,360 --> 00:20:57,040
input of checkbox we do not need a name or a ID have we do need a fee model set to to do dot done

196
00:20:57,920 --> 00:21:04,800
now underneath this we want a span with the class of bubble again we're going to bind it

197
00:21:04,800 --> 00:21:10,400
and you see these ten plate literals here and we're going to pass in a dollar sign I'm going

198
00:21:10,400 --> 00:21:19,120
to break this down I'm going to say to do dot catter gory oh god to do dot catter gory

199
00:21:19,760 --> 00:21:30,080
if it's equal to business then we're going to pass through let me just close this as well

200
00:21:30,080 --> 00:21:35,680
because it's going to error out so we're going to pass through business otherwise we're going

201
00:21:35,680 --> 00:21:41,200
to pass through personal and I have just realized we don't even need to do any of this because this

202
00:21:41,200 --> 00:21:49,040
will even be business or personal so all we need to do is pass through to do dot catter gory

203
00:21:49,680 --> 00:21:54,640
so I I just went to write all that out to do a turnary operator when I didn't need to and

204
00:21:54,640 --> 00:21:58,720
there you go you can see we have these checkboxes we can check and if I check them and refresh

205
00:21:58,720 --> 00:22:03,360
you can see it's actually safe because now get lunch is set to true if we untick that

206
00:22:03,360 --> 00:22:09,200
you'll see get lunch is now done false um so that's basically showing that's working

207
00:22:09,200 --> 00:22:16,240
we then want a to do content diff let's scroll down and inside this to do content we want to pass

208
00:22:16,240 --> 00:22:24,960
an input which is a type text with the model being our to do dot content safe and there you go

209
00:22:24,960 --> 00:22:34,160
we now have this here and we can actually update it so test could be um test a test a add

210
00:22:34,160 --> 00:22:39,440
I don't know test an add and add get you grab the right that Tyler there you go test an add

211
00:22:39,440 --> 00:22:44,240
and there you go it sees actually updated inside of our local storage if we refresh it actually

212
00:22:44,240 --> 00:22:48,880
is safe which is good we can close that now because I think you've got the point of local storage

213
00:22:48,880 --> 00:22:55,520
and how it works now underneath this we just want actions and inside of here we just need one

214
00:22:55,520 --> 00:23:00,160
button we originally had two buttons one with an edit button one with a delete however we can actually

215
00:23:00,160 --> 00:23:04,480
just update this whenever we want by just typing in here now rather than having an edit button

216
00:23:04,480 --> 00:23:09,840
that does it for you so once you change this button say delete this will also have the class of

217
00:23:10,800 --> 00:23:15,760
and we're going to have a click event now this is going to say remove to do and we are going to

218
00:23:15,760 --> 00:23:21,280
pass through the to do we want to remove now this is going to work because we do not have this function

219
00:23:21,280 --> 00:23:27,280
so let's go up here and underneath and to do let's pay a constant called remove to do which

220
00:23:27,280 --> 00:23:33,520
go be equal to a arrow function and we're going to say to do dot value is equal to to do

221
00:23:33,520 --> 00:23:39,040
dot value dot filter we're going to get the current we're going to go we're going to loop through

222
00:23:39,040 --> 00:23:43,840
every single to do in there and we'll check if it's not equal to to do then we're going to add

223
00:23:43,840 --> 00:23:49,280
it back to rate if it is equal to to do then we're not going to add it back and this will return

224
00:23:49,280 --> 00:23:54,240
false and then it will only have the ones we don't want oh I've just created a new tab that's

225
00:23:54,240 --> 00:23:58,800
fine refresh and now let's just delete test and add right so let's just delete and there you

226
00:23:58,800 --> 00:24:05,520
go you can see that works so that is everything actually working in this tutorial so now we can add a new

227
00:24:05,520 --> 00:24:13,840
to do let's say complete or edit this video oh I'm going to have to do that so let's say that our

228
00:24:13,840 --> 00:24:19,120
business add to do edit this video is now at top because it was a lot when we added and then we can

229
00:24:19,120 --> 00:24:25,840
get our lunch make a video and let's just say we've done our lunch we've made the video we just

230
00:24:25,840 --> 00:24:30,320
need to edit is now there you go let's say we just want to delete the lunch and there you go you can

231
00:24:30,320 --> 00:24:35,440
see that's all working really great now one thing I have noticed is this is still filled out and we

232
00:24:35,440 --> 00:24:43,040
kind of want to reset that so how we do that is we were say to do no input content dot value is equal to

233
00:24:43,040 --> 00:24:49,600
an empty string and input dot category value is equal to null now every time we submit a new one let's

234
00:24:49,600 --> 00:24:56,640
say make pizza because that's a fun thing to do and to do you can see that is reset and that's a lot

235
00:24:56,640 --> 00:25:02,400
better so there you go you can see that is working and that is really nice so we can tick this off

236
00:25:02,400 --> 00:25:07,280
we can tick this one off delete them and everything it's working so guys if you learn saying

237
00:25:07,280 --> 00:25:14,240
no do not forget to leave a thumbs up smash that subscribe button if you want to see more and

238
00:25:14,240 --> 00:25:18,880
don't forget to leave a comment if you have any questions if you're new around here you can always

239
00:25:19,520 --> 00:25:23,920
jump in our discord description down or discord we're in the description down below

240
00:25:23,920 --> 00:25:29,520
and ask any questions in our help channels if you get stuck or just join the community and have some fun

241
00:25:29,520 --> 00:25:33,600
also we have membership on this channel so if you are a long-term business you've been watching

242
00:25:33,600 --> 00:25:37,680
these videos for a while and you want to support me on my channel please consider looking at the

243
00:25:37,680 --> 00:25:42,000
membership just click the join have a look at the perks you can get by looking at those and then

244
00:25:42,000 --> 00:25:46,960
hopefully if that's something that you want you can actually click on it and support the channel

245
00:25:46,960 --> 00:25:54,800
perks as well but for now guys thank you for watching this video and I will see you in the next one peace