1
00:00:00,150 --> 00:00:01,800
- So to get started with this project,

2
00:00:01,800 --> 00:00:04,050
the very first thing I wanna
do is I want to navigate

3
00:00:04,050 --> 00:00:05,752
into this after folder that I've created

4
00:00:05,752 --> 00:00:08,870
and I want to create a vite application.

5
00:00:08,870 --> 00:00:11,970
So we'll do vite at latest
inside of this folder.

6
00:00:11,970 --> 00:00:14,390
I want to do a vanilla
type script project.

7
00:00:14,390 --> 00:00:15,470
And we're just gonna install

8
00:00:15,470 --> 00:00:17,710
and run these dependencies right here.

9
00:00:17,710 --> 00:00:20,350
So once that's done, it
should open up our project.

10
00:00:20,350 --> 00:00:22,490
As you can see here, we just
have the boiler plate stuff.

11
00:00:22,490 --> 00:00:23,510
We're gonna remove all that

12
00:00:23,510 --> 00:00:25,470
so it doesn't really matter
what that looks like.

13
00:00:25,470 --> 00:00:27,900
Now if we go into here, you
can see let's just get rid

14
00:00:27,900 --> 00:00:29,610
of essentially all the
code inside of here.

15
00:00:29,610 --> 00:00:31,020
We don't need this, we don't need that.

16
00:00:31,020 --> 00:00:32,790
We're gonna keep the main dot TS

17
00:00:32,790 --> 00:00:34,530
but I'm gonna remove
everything that's inside

18
00:00:34,530 --> 00:00:36,810
of it for now and inside of our HTML

19
00:00:36,810 --> 00:00:39,420
we're gonna replace it
with this HTML right here.

20
00:00:39,420 --> 00:00:40,253
I'm just gonna copy

21
00:00:40,253 --> 00:00:42,330
over the actual HtML
we're using into here.

22
00:00:42,330 --> 00:00:43,350
There we go.

23
00:00:43,350 --> 00:00:44,183
And as you can see

24
00:00:44,183 --> 00:00:45,550
we're importing the style
sheet directly in here.

25
00:00:45,550 --> 00:00:46,590
We can do that if we want

26
00:00:46,590 --> 00:00:50,130
or we could remove that and
import it in our main dot TS.

27
00:00:50,130 --> 00:00:53,470
So we could say import styles dot CSS

28
00:00:53,470 --> 00:00:54,930
And if we just make sure we copy that

29
00:00:54,930 --> 00:00:57,090
over into here, you'll see

30
00:00:57,090 --> 00:00:59,990
that it should import those
styles for us automatically.

31
00:00:59,990 --> 00:01:03,240
We also wanna make sure we up
here import our script tag.

32
00:01:03,240 --> 00:01:07,020
So we'll say we're
gonna import that source

33
00:01:07,020 --> 00:01:09,090
slash main dot TS.

34
00:01:09,090 --> 00:01:10,020
There we go.

35
00:01:10,020 --> 00:01:10,853
Now as you can see,

36
00:01:10,853 --> 00:01:12,450
I have everything showing up
and my CSS styles are there

37
00:01:12,450 --> 00:01:14,009
but obviously nothing's happening

38
00:01:14,009 --> 00:01:16,920
'cause there's nothing inside
this TypeScript file yet.

39
00:01:16,920 --> 00:01:18,060
So right now I'm gonna close

40
00:01:18,060 --> 00:01:19,320
out of this placeholder version.

41
00:01:19,320 --> 00:01:21,060
We don't need that anymore
and I'm gonna close

42
00:01:21,060 --> 00:01:23,190
out of all these before files
'cause we don't need those.

43
00:01:23,190 --> 00:01:26,030
And I wanna look at the HTML
to see what we all need.

44
00:01:26,030 --> 00:01:28,200
So obviously we should
probably select our form

45
00:01:28,200 --> 00:01:29,450
'cause we need to make
sure we perform an action

46
00:01:29,450 --> 00:01:31,170
when we add a to do into this list here.

47
00:01:31,170 --> 00:01:32,910
'Cause right now it
just refreshes our page.

48
00:01:32,910 --> 00:01:35,730
So let's get this form
element on our page.

49
00:01:35,730 --> 00:01:40,390
We can say constant form is
equal to document query selector

50
00:01:40,390 --> 00:01:43,790
and I'm gonna get the element
that has this particular id.

51
00:01:43,790 --> 00:01:45,470
Now I know this is a form element

52
00:01:45,470 --> 00:01:48,333
so I'm gonna say HTML form element.

53
00:01:49,720 --> 00:01:50,760
There we go.

54
00:01:50,760 --> 00:01:52,170
Just like that as the type of this thing.

55
00:01:52,170 --> 00:01:54,120
So now we can get that information

56
00:01:54,120 --> 00:01:55,650
in there and then what
we could do if we wanted

57
00:01:55,650 --> 00:01:57,180
we could add an event listener

58
00:01:57,180 --> 00:02:01,520
onto our form for submit, just like that.

59
00:02:01,520 --> 00:02:02,490
There we go.

60
00:02:02,490 --> 00:02:04,740
You'll also notice that
TypeScript came in here

61
00:02:04,740 --> 00:02:06,840
and automatically put
that question mark syntax

62
00:02:06,840 --> 00:02:09,890
for me because this could
be undefined by default.

63
00:02:09,890 --> 00:02:11,410
Now it's entirely up to you whether

64
00:02:11,410 --> 00:02:13,550
or not you want to just add
in the exclamation point

65
00:02:13,550 --> 00:02:15,930
and tell TypeScript, Hey
I know this is going to

66
00:02:15,930 --> 00:02:17,160
be there so don't worry about it.

67
00:02:17,160 --> 00:02:19,719
Again, it's entirely up to
you which way you want to go.

68
00:02:19,719 --> 00:02:21,990
We'll just do this
exclamation point method

69
00:02:21,990 --> 00:02:24,930
because if this isn't
there, our code should fail

70
00:02:24,930 --> 00:02:26,210
it should throw an error that way.

71
00:02:26,210 --> 00:02:27,720
On the actual backend

72
00:02:27,720 --> 00:02:28,770
if we have error reporting,

73
00:02:28,770 --> 00:02:29,603
we'll see that error.

74
00:02:29,603 --> 00:02:32,370
While if we have this
question mark syntax here

75
00:02:32,370 --> 00:02:33,410
the code wouldn't throw an error

76
00:02:33,410 --> 00:02:35,010
but this form also wouldn't work.

77
00:02:35,010 --> 00:02:37,490
So that would kind of be a
bad thing to have happen.

78
00:02:37,490 --> 00:02:38,870
But I think doing it like this is better

79
00:02:38,870 --> 00:02:40,250
because if our code is broken

80
00:02:40,250 --> 00:02:42,160
and for some reason this form isn't there,

81
00:02:42,160 --> 00:02:43,910
it'll throw an error
that we can report back

82
00:02:43,910 --> 00:02:45,930
to with our error reporting software.

83
00:02:45,930 --> 00:02:47,390
Now inside of our form
what I wanna do is I

84
00:02:47,390 --> 00:02:49,290
wanna get the value inside this import.

85
00:02:49,290 --> 00:02:51,650
So we need to be able to
select this input as well.

86
00:02:51,650 --> 00:02:54,689
We look, this input has
an ID of to-do input

87
00:02:54,689 --> 00:02:57,900
so we'll just copy this
line down, get our input.

88
00:02:57,900 --> 00:03:01,590
This is going to be an HTML input element.

89
00:03:01,590 --> 00:03:05,620
This was called see here to do input.

90
00:03:05,620 --> 00:03:07,650
And I'm just gonna lead
that exclamation the point

91
00:03:07,650 --> 00:03:09,510
at the end just enforcing that hey

92
00:03:09,510 --> 00:03:11,040
this thing is always going to be there

93
00:03:11,040 --> 00:03:13,340
and if it's not, that's okay.
I know that the HTML has this

94
00:03:13,340 --> 00:03:15,230
so it should always be there.

95
00:03:15,230 --> 00:03:17,860
Then what we can do is we can
get that value inside here

96
00:03:17,860 --> 00:03:21,030
but first I wanna prevent the
default behavior of our form.

97
00:03:21,030 --> 00:03:23,740
Then we can get our to-do title

98
00:03:23,740 --> 00:03:25,460
or let's just say name
it doesn't really matter

99
00:03:25,460 --> 00:03:27,439
and we'll get that from our input dot

100
00:03:27,439 --> 00:03:29,460
and we should probably get
this input a better name.

101
00:03:29,460 --> 00:03:32,380
For example, we can say
this is our to-do input

102
00:03:32,380 --> 00:03:35,290
so we can get the value from that.

103
00:03:35,290 --> 00:03:37,680
Then I just wanna check to
make sure we have a value.

104
00:03:37,680 --> 00:03:41,410
So if our to-do name is
equal to an empty string

105
00:03:41,410 --> 00:03:43,080
then we're just going to return.

106
00:03:43,080 --> 00:03:43,920
Now once we have that,

107
00:03:43,920 --> 00:03:46,430
we obviously need to
create a brand new to-do.

108
00:03:46,430 --> 00:03:48,360
Let's create a new to-do

109
00:03:48,360 --> 00:03:49,940
and this new to-do is going to have a name

110
00:03:49,940 --> 00:03:52,360
which is just going to be our to-do name.

111
00:03:52,360 --> 00:03:54,150
It needs to have a complete status.

112
00:03:54,150 --> 00:03:55,880
We'll just set that to false.

113
00:03:55,880 --> 00:03:58,230
And also we should probably
use an id so we can

114
00:03:58,230 --> 00:04:00,420
identify which to do is
which for things like

115
00:04:00,420 --> 00:04:02,550
checking them as well as
clicking this delete button.

116
00:04:02,550 --> 00:04:04,950
We're gonna create an
ID and I'm gonna use the

117
00:04:04,950 --> 00:04:07,420
crypto dot random UUID function.

118
00:04:07,420 --> 00:04:09,920
That's just gonna generate a
completely random ID for us.

119
00:04:09,920 --> 00:04:11,580
Now the next thing we're
gonna need is some way

120
00:04:11,580 --> 00:04:13,320
to save this to-do.

121
00:04:13,320 --> 00:04:15,870
So what we can do is we
can create an array for

122
00:04:15,870 --> 00:04:16,837
all of our to-dos.

123
00:04:18,000 --> 00:04:20,240
DOS is gonna be equal to
an empty array by default.

124
00:04:20,240 --> 00:04:22,200
And then we'll add that
to-do to our array.

125
00:04:22,200 --> 00:04:25,350
So we'll just say push our new to-do.

126
00:04:25,350 --> 00:04:26,520
There we go.

127
00:04:26,520 --> 00:04:28,340
And you'll notice up to
this point we've only

128
00:04:28,340 --> 00:04:30,770
written two words of
TypeScript in our entire

129
00:04:30,770 --> 00:04:32,860
code base and everything else
is working perfectly fine.

130
00:04:32,860 --> 00:04:33,940
So we only have two lines

131
00:04:33,940 --> 00:04:36,040
with TypeScript and everything
else has been JavaScript

132
00:04:36,040 --> 00:04:38,320
but we've still got all that
really nice auto-complete.

133
00:04:38,320 --> 00:04:40,500
Now obviously as we start
creating more functions

134
00:04:40,500 --> 00:04:41,760
we're gonna need more TypeScript

135
00:04:41,760 --> 00:04:43,950
but so far we've got
really good auto-complete

136
00:04:43,950 --> 00:04:45,207
with just a little bit of TypeScript.

137
00:04:45,207 --> 00:04:46,490
Now the last thing I wanna do inside

138
00:04:46,490 --> 00:04:48,020
of here is to take our to-do input.

139
00:04:48,020 --> 00:04:49,639
I wanna change the value back

140
00:04:49,639 --> 00:04:52,440
to an empty string just
so it clears itself out.

141
00:04:52,440 --> 00:04:54,720
And if we do this and
I type and I click add

142
00:04:54,720 --> 00:04:56,870
you can see everything does
seem like it's working.

143
00:04:56,870 --> 00:04:58,440
We're just not rendering out any

144
00:04:58,440 --> 00:04:59,280
of the to-dos in this erase.

145
00:04:59,280 --> 00:05:01,620
We obviously have no
way to see what's going

146
00:05:01,620 --> 00:05:02,960
on with our different to-dos.

147
00:05:02,960 --> 00:05:04,620
So we should probably create a function

148
00:05:04,620 --> 00:05:07,320
that's like render new to-do,

149
00:05:07,320 --> 00:05:10,500
which takes in a to-do and then
it's going to render it out.

150
00:05:10,500 --> 00:05:11,730
Now this is where we're going to want to

151
00:05:11,730 --> 00:05:12,600
add some type script.

152
00:05:12,600 --> 00:05:15,320
Because right now, our
to-do has no type at all.

153
00:05:15,320 --> 00:05:16,560
So we need to create a type for this.

154
00:05:16,560 --> 00:05:18,400
We could do it in line if we wanted

155
00:05:18,400 --> 00:05:20,460
but I think it'd be better
to create a type for this

156
00:05:20,460 --> 00:05:23,160
because our entire application
revolves around to-dos.

157
00:05:23,160 --> 00:05:25,360
So we should probably have
a type for our to-dos.

158
00:05:25,360 --> 00:05:27,220
And generally I like to
define my types right

159
00:05:27,220 --> 00:05:28,600
after my imports.

160
00:05:28,600 --> 00:05:30,680
So we can say type to do here

161
00:05:30,680 --> 00:05:32,580
and we know it's going to be an id,

162
00:05:32,580 --> 00:05:33,540
which is a string.

163
00:05:33,540 --> 00:05:35,360
We know it's gonna be a
name which is a string

164
00:05:35,360 --> 00:05:37,760
and a complete field, which is a Boolean.

165
00:05:37,760 --> 00:05:40,040
That's how we've defined
our to-do right here.

166
00:05:40,040 --> 00:05:42,520
Now what we can do is we
can say that our to-do

167
00:05:42,520 --> 00:05:44,970
is going to be this specific shape.

168
00:05:44,970 --> 00:05:47,139
Then we need to write all
the code for rendering

169
00:05:47,139 --> 00:05:49,890
this out and it should
look just like this LI

170
00:05:49,890 --> 00:05:51,000
element when we're done.

171
00:05:51,000 --> 00:05:52,230
So I'm gonna come in here,

172
00:05:52,230 --> 00:05:53,730
I'm just gonna paste down that LI element

173
00:05:53,730 --> 00:05:56,070
comment it out just so we have a reference

174
00:05:56,070 --> 00:05:57,579
to this when we're trying
to write out our code.

175
00:05:57,579 --> 00:05:59,730
So let's go ahead and let's
create this first element.

176
00:05:59,730 --> 00:06:04,680
We'll say constant list
item equals document

177
00:06:04,680 --> 00:06:06,150
dot create element.

178
00:06:06,150 --> 00:06:07,480
We're gonna create an li.

179
00:06:07,480 --> 00:06:08,610
And the really nice thing

180
00:06:08,610 --> 00:06:10,380
about this is this list
item is automatically typed

181
00:06:10,380 --> 00:06:11,790
as an HTML LI element

182
00:06:11,790 --> 00:06:14,450
since we're creating an LI element.

183
00:06:14,450 --> 00:06:16,090
Then I'm gonna take that list item

184
00:06:16,090 --> 00:06:17,980
take the class list and
we're gonna want to add to it

185
00:06:17,980 --> 00:06:21,210
this specific class
right here of list item.

186
00:06:21,210 --> 00:06:23,130
Then let's create the next thing in line

187
00:06:23,130 --> 00:06:24,590
which is going to be our label.

188
00:06:24,590 --> 00:06:27,270
So we'll say constant label is equal

189
00:06:27,270 --> 00:06:29,760
to document create element.

190
00:06:29,760 --> 00:06:34,329
There's a label and we need to
add some class list to that.

191
00:06:34,329 --> 00:06:38,250
So we'll say we wanna
add this list item label

192
00:06:38,250 --> 00:06:40,800
next we can come in here, we
can create our input element.

193
00:06:40,800 --> 00:06:43,570
So we'll say constant check box.

194
00:06:43,570 --> 00:06:48,320
This is gonna be document dot
create element of an input.

195
00:06:48,320 --> 00:06:52,030
This check box is going to
have a type here specifically

196
00:06:52,030 --> 00:06:53,310
of check box.

197
00:06:53,310 --> 00:06:55,870
And then we need to make sure
we give it this class as well.

198
00:06:55,870 --> 00:06:58,790
So we can say checkbox class list add

199
00:06:58,790 --> 00:07:00,550
and we'll give it that class.

200
00:07:00,550 --> 00:07:03,570
We can also do the exact same
thing for this span element.

201
00:07:03,570 --> 00:07:05,590
I'm just gonna copy this right here.

202
00:07:05,590 --> 00:07:08,440
And this is gonna be our text element.

203
00:07:08,440 --> 00:07:11,670
This is going to be a span. We
don't need to give it a type

204
00:07:11,670 --> 00:07:14,230
but we do need to give it
the input of label text.

205
00:07:14,230 --> 00:07:17,390
We also should make sure that
this is our text element.

206
00:07:17,390 --> 00:07:19,210
Now let's go ahead and we'll
create our final element

207
00:07:19,210 --> 00:07:20,530
before we start hooking everything up.

208
00:07:20,530 --> 00:07:22,630
And that's going to be our delete button.

209
00:07:22,630 --> 00:07:27,600
So we'll say delete button
document dot create element.

210
00:07:27,600 --> 00:07:31,030
This one's going to be a button

211
00:07:31,950 --> 00:07:34,780
and we're gonna add some
class list information to this

212
00:07:34,780 --> 00:07:36,980
which is delete button.

213
00:07:36,980 --> 00:07:38,400
There we go.

214
00:07:38,400 --> 00:07:40,500
We should also give it
the text here as well.

215
00:07:40,500 --> 00:07:45,500
So delete button dot inner text
is equal to the word delete.

216
00:07:45,810 --> 00:07:46,880
There we go.

217
00:07:46,880 --> 00:07:48,843
That should be all we need to do for this.

218
00:07:48,843 --> 00:07:50,250
So I can just delete this code right here

219
00:07:50,250 --> 00:07:51,960
'cause we've created all those elements.

220
00:07:51,960 --> 00:07:53,400
I should probably put
them all together though.

221
00:07:53,400 --> 00:07:54,740
So lemme bring that back real quick.

222
00:07:54,740 --> 00:07:57,270
We're gonna take our label

223
00:07:57,270 --> 00:07:59,460
and we're going to append our input

224
00:07:59,460 --> 00:08:01,770
which we called our checkbox as well

225
00:08:01,770 --> 00:08:03,050
as our text element inside of it.

226
00:08:03,050 --> 00:08:05,120
So we have both of these inside there.

227
00:08:05,120 --> 00:08:07,290
Then we're going to take our li,

228
00:08:07,290 --> 00:08:08,254
which we call list item.

229
00:08:08,254 --> 00:08:11,580
And inside of that, I'm going
to append our label followed

230
00:08:11,580 --> 00:08:13,890
by our button, which
we call delete button.

231
00:08:13,890 --> 00:08:14,760
There we go.

232
00:08:14,760 --> 00:08:16,140
And then finally, we need to add this

233
00:08:16,140 --> 00:08:17,590
to our overall list right here.

234
00:08:17,590 --> 00:08:19,090
So we need to select this UL.

235
00:08:19,090 --> 00:08:21,500
That is our list all the way up here.

236
00:08:21,500 --> 00:08:23,013
Let's get our list.

237
00:08:25,050 --> 00:08:29,770
We know that this is
an HTML UL list element

238
00:08:29,770 --> 00:08:32,250
and this is just called list I believe.

239
00:08:32,250 --> 00:08:33,089
Let me make sure.

240
00:08:33,089 --> 00:08:35,190
Yep, it's just called list.

241
00:08:35,190 --> 00:08:38,729
Now down here we can finally
append all of that to our list.

242
00:08:38,729 --> 00:08:41,700
So we can say we wanna add
our list item to our list.

243
00:08:41,700 --> 00:08:43,020
This is going to add an element.

244
00:08:43,020 --> 00:08:44,237
It's not gonna have any data inside of it

245
00:08:44,237 --> 00:08:46,050
it's just gonna be completely blank.

246
00:08:46,050 --> 00:08:49,930
But if we call this and
we pass in our to-do here

247
00:08:49,930 --> 00:08:52,210
in our case we called it new to-do

248
00:08:52,210 --> 00:08:53,729
we can get rid of this comment here

249
00:08:53,729 --> 00:08:54,689
and now when I save,

250
00:08:54,689 --> 00:08:56,490
I enter some information, click add.

251
00:08:56,490 --> 00:08:57,870
You can see it added a brand new to-do

252
00:08:57,870 --> 00:08:59,490
but all of our information is blank

253
00:08:59,490 --> 00:09:01,620
'cause we're not using
this to-do anywhere yet.

254
00:09:01,620 --> 00:09:03,040
We should probably make it
so that the text shows up

255
00:09:03,040 --> 00:09:05,100
the checkbox is checked and so on.

256
00:09:05,100 --> 00:09:06,380
So our checkbox here,

257
00:09:06,380 --> 00:09:08,400
we want to make it checked
based on our to-do.

258
00:09:08,400 --> 00:09:10,880
So the checked property
on this is going to

259
00:09:10,880 --> 00:09:15,880
be equal to do to-do dot
complete our text here.

260
00:09:16,410 --> 00:09:18,040
We should make it so that the text content

261
00:09:18,040 --> 00:09:20,430
or inner text doesn't
matter which one is equal

262
00:09:20,430 --> 00:09:21,750
to our to-do name.

263
00:09:21,750 --> 00:09:22,740
There we go.

264
00:09:22,740 --> 00:09:24,240
And that right there should
already clean things up.

265
00:09:24,240 --> 00:09:26,100
You can see here the name
has been properly added

266
00:09:26,100 --> 00:09:27,010
which is great.

267
00:09:27,010 --> 00:09:28,780
Next we should make it so
that when we click on this

268
00:09:28,780 --> 00:09:31,260
it's actually going to be
toggling the to-do property.

269
00:09:31,260 --> 00:09:32,880
'Cause right now when I click,

270
00:09:32,880 --> 00:09:34,380
it's not actually toggling my to-do,

271
00:09:34,380 --> 00:09:36,400
it's only toggling my checkbox.

272
00:09:36,400 --> 00:09:39,250
So what we can do is we
can add an event listener

273
00:09:39,250 --> 00:09:43,050
checkbox add event listener on change.

274
00:09:43,050 --> 00:09:45,310
I wanna run an event

275
00:09:45,310 --> 00:09:47,810
and this event is just gonna
take my to-do complete property

276
00:09:47,810 --> 00:09:51,810
and set it to whatever the check
property is of my checkbox.

277
00:09:51,810 --> 00:09:52,650
There we go.

278
00:09:52,650 --> 00:09:55,229
That's just making sure these
two things are now synced up.

279
00:09:55,229 --> 00:09:56,930
If we didn't have this, the information

280
00:09:56,930 --> 00:09:58,230
for our to-do would be out

281
00:09:58,230 --> 00:10:00,710
of sync from what our actual
checkbox information is.

282
00:10:00,710 --> 00:10:02,640
And the next thing we need
to do is our delete button.

283
00:10:02,640 --> 00:10:03,590
Make it so that works.

284
00:10:03,590 --> 00:10:05,840
So let's add an event listener for that.

285
00:10:05,840 --> 00:10:08,540
This is gonna be on click.

286
00:10:08,540 --> 00:10:10,470
What we need to do inside
of this one is first

287
00:10:10,470 --> 00:10:12,180
of all remove the element from the page.

288
00:10:12,180 --> 00:10:15,180
So our list item, we can remove that.

289
00:10:15,180 --> 00:10:17,229
Then what I wanna do is I
wanna update my to-do's.

290
00:10:17,229 --> 00:10:19,556
So I can say to-dos dot filter,

291
00:10:19,556 --> 00:10:21,020
I'm gonna go through each to-do

292
00:10:21,020 --> 00:10:23,970
and where the to-do dot ID is not equal

293
00:10:23,970 --> 00:10:26,670
to my current to-do dot id,

294
00:10:26,670 --> 00:10:29,176
then I'm gonna set that
equal to my new to-dos.

295
00:10:29,176 --> 00:10:30,009
My to-do's currently.

296
00:10:30,009 --> 00:10:30,842
There we go.

297
00:10:30,842 --> 00:10:32,430
So this filter is just
removing the one to-do,

298
00:10:32,430 --> 00:10:33,660
which is our current to-do

299
00:10:33,660 --> 00:10:34,890
and then we're resaving our to-dos.

300
00:10:34,890 --> 00:10:37,050
To do that we'll need to
make this a let variable

301
00:10:37,050 --> 00:10:38,520
and we also need to give this a type.

302
00:10:38,520 --> 00:10:41,010
We'll say that this is a to-do array

303
00:10:41,010 --> 00:10:42,920
so that way we know that
this is an array of to-dos

304
00:10:42,920 --> 00:10:45,770
and that'll get rid of all the
errors that we had down here.

305
00:10:45,770 --> 00:10:47,550
Now finally, if we give that a save

306
00:10:47,550 --> 00:10:48,480
we can type inside of here,

307
00:10:48,480 --> 00:10:49,560
click add, click delete.

308
00:10:49,560 --> 00:10:51,540
You can see all that's working.
We can even probably get rid

309
00:10:51,540 --> 00:10:53,880
of this placeholder at this
point. We don't need it anymore.

310
00:10:53,880 --> 00:10:54,900
There we go.

311
00:10:54,900 --> 00:10:55,733
Click.

312
00:10:55,733 --> 00:10:56,700
That's working and that's working.

313
00:10:56,700 --> 00:10:58,530
Last thing to do is make
it to when we refresh

314
00:10:58,530 --> 00:11:01,609
all that information is
persisted inside a local storage.

315
00:11:01,609 --> 00:11:03,610
We need some way to save our to-dos.

316
00:11:03,610 --> 00:11:05,970
Let's just create a function save to-dos.

317
00:11:05,970 --> 00:11:08,430
And this save to-dos function can just

318
00:11:08,430 --> 00:11:10,440
use our global to-dos
variable that we have

319
00:11:10,440 --> 00:11:15,120
up here so we can minimize
this down function

320
00:11:15,120 --> 00:11:16,979
save to-dos just like that.

321
00:11:16,979 --> 00:11:18,880
And this save to-dos
function is going to go

322
00:11:18,880 --> 00:11:19,780
into local storage.

323
00:11:19,780 --> 00:11:22,113
So we'll say local storage, do set item.

324
00:11:22,113 --> 00:11:25,290
This is going to be our
to-dos and we'll set it to

325
00:11:25,290 --> 00:11:27,910
JSON dot stringify of our to-dos.

326
00:11:27,910 --> 00:11:30,620
That is going to save our
information in local storage.

327
00:11:30,620 --> 00:11:32,400
So now if we type something in click add

328
00:11:32,400 --> 00:11:33,930
and check it refresh.

329
00:11:33,930 --> 00:11:35,453
It's not gonna be showing up,

330
00:11:35,453 --> 00:11:37,740
but it is being stored in local storage.

331
00:11:37,740 --> 00:11:39,580
So now all we need to
do is create a function

332
00:11:39,580 --> 00:11:41,630
for loading our to-dos.

333
00:11:41,630 --> 00:11:44,060
This load to-dos function
is just going to set

334
00:11:44,060 --> 00:11:45,300
or it's going to return.

335
00:11:45,300 --> 00:11:47,859
Actually our to-dos are going
to come from local storage.

336
00:11:47,859 --> 00:11:49,640
So first of all, we should
probably get our information

337
00:11:49,640 --> 00:11:50,970
from local storage.

338
00:11:50,970 --> 00:11:54,630
So this is going to be
local storage dot get item,

339
00:11:54,630 --> 00:11:55,463
all it to-dos

340
00:11:55,463 --> 00:11:57,020
and that's going to be coming from there.

341
00:11:57,020 --> 00:12:00,090
So this is going to be a string
or it's going to be null.

342
00:12:00,090 --> 00:12:02,040
And then we want to parse this as JSON

343
00:12:02,040 --> 00:12:05,380
So we can say JSON dot parse our value

344
00:12:05,380 --> 00:12:06,840
but by doing that we're
actually gonna get an error

345
00:12:06,840 --> 00:12:09,260
because JSON parse only accepts a string

346
00:12:09,260 --> 00:12:12,090
and this could be a string or null.

347
00:12:12,090 --> 00:12:13,930
So if for some reason this is null

348
00:12:15,960 --> 00:12:18,310
what we wanna do is just
return an empty string

349
00:12:18,310 --> 00:12:20,100
and then we can parse our value.

350
00:12:20,100 --> 00:12:21,170
But this is just going to return

351
00:12:21,170 --> 00:12:23,910
to us any because JSON parse returns any.

352
00:12:23,910 --> 00:12:26,530
So what we need to do here is
we either need to do a bunch

353
00:12:26,530 --> 00:12:28,710
of type checking to make
sure this is perfectly okay

354
00:12:28,710 --> 00:12:30,670
or we can just do a manual cast

355
00:12:30,670 --> 00:12:33,430
by saying it's going
to be as a to-do array.

356
00:12:33,430 --> 00:12:35,759
In our case, I'm gonna do a manual casting

357
00:12:35,759 --> 00:12:36,989
because I know for a fact,

358
00:12:36,989 --> 00:12:39,510
that the object we're saving is our to-dos

359
00:12:39,510 --> 00:12:40,350
which is a to-do array.

360
00:12:40,350 --> 00:12:43,359
So there should be no chance
that this is not a to-do array.

361
00:12:43,359 --> 00:12:45,690
This is just one of the
few use cases we're doing.

362
00:12:45,690 --> 00:12:48,870
An as casting is probably okay.

363
00:12:48,870 --> 00:12:50,630
So now we can load our to-dos

364
00:12:50,630 --> 00:12:53,100
by setting this up here to load to-dos.

365
00:12:53,100 --> 00:12:54,520
There we go.

366
00:12:54,520 --> 00:12:55,880
Give that a quick save.

367
00:12:55,880 --> 00:12:57,109
When I do this and refresh

368
00:12:57,109 --> 00:12:58,830
you'll still notice nothing's showing up.

369
00:12:58,830 --> 00:13:00,330
And the reason for that is we're never

370
00:13:00,330 --> 00:13:02,070
rendering the to-dos that we're loading

371
00:13:02,070 --> 00:13:05,430
so we should probably
call render new to-do

372
00:13:05,430 --> 00:13:07,550
and we should do that for
each one of our to-dos.

373
00:13:07,550 --> 00:13:12,120
So we'll say to-do's dot four each to-do

374
00:13:12,120 --> 00:13:13,420
we can just call this function

375
00:13:13,420 --> 00:13:15,280
so I can just pass it in there like that.

376
00:13:15,280 --> 00:13:17,670
We also don't even need
to manually type this

377
00:13:17,670 --> 00:13:20,850
as to-do array anymore since
this returns a to-do array.

378
00:13:20,850 --> 00:13:22,290
Now you can see all of our to-do's

379
00:13:22,290 --> 00:13:23,696
that are in local storage are showing up

380
00:13:23,696 --> 00:13:25,680
but if I check them or I delete them

381
00:13:25,680 --> 00:13:28,230
and refresh you notice none
of that is being removed.

382
00:13:28,230 --> 00:13:30,270
That's because in our render function,

383
00:13:30,270 --> 00:13:31,530
our checkbox when we check it

384
00:13:31,530 --> 00:13:33,680
we're not saving our to-do so
we should probably do that.

385
00:13:33,680 --> 00:13:34,800
And same here,

386
00:13:34,800 --> 00:13:36,320
we're not saving our
to-dos when we remove them.

387
00:13:36,320 --> 00:13:39,120
So we should probably
do that here as well.

388
00:13:39,120 --> 00:13:41,240
Now you can see if I delete
and check and refresh

389
00:13:41,240 --> 00:13:43,320
add a new one, check that one refresh.

390
00:13:43,320 --> 00:13:45,580
All that information is
being perfectly persisted

391
00:13:45,580 --> 00:13:47,560
and this is entirely working.

392
00:13:47,560 --> 00:13:48,859
Now if we do a quick examination

393
00:13:48,859 --> 00:13:50,680
of our code just to kind
of see what we've written

394
00:13:50,680 --> 00:13:52,380
you'll notice that the actual amount

395
00:13:52,380 --> 00:13:53,680
of TypeScript code is pretty minimal.

396
00:13:53,680 --> 00:13:55,290
We have this type right here,

397
00:13:55,290 --> 00:13:57,030
which is just one single type.

398
00:13:57,030 --> 00:13:58,650
We have three lines here where we had to

399
00:13:58,650 --> 00:14:00,180
do a generic to cast a type as well

400
00:14:00,180 --> 00:14:03,410
as this exclamation point to
say that this type exists.

401
00:14:03,410 --> 00:14:04,340
Then if we go further,

402
00:14:04,340 --> 00:14:06,660
you'll notice this entire
form event listener

403
00:14:06,660 --> 00:14:08,490
there's no types at all inside of here.

404
00:14:08,490 --> 00:14:10,860
This entire large function here

405
00:14:10,860 --> 00:14:12,880
absolutely no types at all, no types here.

406
00:14:12,880 --> 00:14:16,080
And then finally we have
one single cast right here.

407
00:14:16,080 --> 00:14:18,000
We have five instances
where we use TypeScript.

408
00:14:18,000 --> 00:14:20,920
We have a cast, we have, I
guess technically right here.

409
00:14:20,920 --> 00:14:22,200
We have a type.

410
00:14:22,200 --> 00:14:24,320
So that's one other type
that we have to worry about

411
00:14:24,320 --> 00:14:26,660
but it's like six different
instances of TypeScript

412
00:14:26,660 --> 00:14:28,440
in our entire project and
everything is working.

413
00:14:28,440 --> 00:14:29,800
We have type safety everywhere.

414
00:14:29,800 --> 00:14:31,133
And if I were to make a mistake,

415
00:14:31,133 --> 00:14:33,840
for example, this I
changed to be like names.

416
00:14:33,840 --> 00:14:36,090
You'll now see that we get
errors everywhere in our code

417
00:14:36,090 --> 00:14:38,120
where that should have been
named instead of names.

418
00:14:38,120 --> 00:14:39,810
What really is super nice,

419
00:14:39,810 --> 00:14:41,459
how great of a code experience we get

420
00:14:41,459 --> 00:14:43,520
with such a minimal amount of TypeScript

421
00:14:43,520 --> 00:14:45,410
and this pretty much
scales to any size project

422
00:14:45,410 --> 00:14:47,305
even as your project gets much larger,

423
00:14:47,305 --> 00:14:48,780
the amount of TypeScript you write

424
00:14:48,780 --> 00:14:50,790
is still relatively small
compared to the amount

425
00:14:50,790 --> 00:14:52,490
of JavaScript code you're writing.