1
00:00:00,090 --> 00:00:01,410
- So now that we've covered a ton

2
00:00:01,410 --> 00:00:02,790
of stuff related to TypeScript,

3
00:00:02,790 --> 00:00:03,623
let's go ahead

4
00:00:03,623 --> 00:00:05,790
and try to create our very
own TypeScript project.

5
00:00:05,790 --> 00:00:08,400
This is going to be a
relatively simple project

6
00:00:08,400 --> 00:00:10,470
but you're gonna need to have
a few things in TypeScript

7
00:00:10,470 --> 00:00:11,303
that you have to do

8
00:00:11,303 --> 00:00:12,420
for like casting different types

9
00:00:12,420 --> 00:00:14,130
because we're working with the DOM,

10
00:00:14,130 --> 00:00:16,980
but it's just a really
simple Todo list project.

11
00:00:16,980 --> 00:00:18,870
What I have open up
right now on my screen,

12
00:00:18,870 --> 00:00:19,703
on the left,

13
00:00:19,703 --> 00:00:20,940
is going to be the starting code.

14
00:00:20,940 --> 00:00:22,980
If you go to the description of this video

15
00:00:22,980 --> 00:00:24,654
there'll be a link to
get this starting code

16
00:00:24,654 --> 00:00:26,340
directly from GitHub.

17
00:00:26,340 --> 00:00:28,110
Just download the code, copy it

18
00:00:28,110 --> 00:00:29,730
and paste it into your own project.

19
00:00:29,730 --> 00:00:33,030
It's just a CSS file as
well as an HTML file.

20
00:00:33,030 --> 00:00:34,530
It's relatively straightforward

21
00:00:34,530 --> 00:00:36,960
and it's gonna give you
this output right here.

22
00:00:36,960 --> 00:00:37,920
And what I want you to do

23
00:00:37,920 --> 00:00:39,060
is I want you to convert this

24
00:00:39,060 --> 00:00:40,830
to an actual working to-do list

25
00:00:40,830 --> 00:00:42,120
that function just like this.

26
00:00:42,120 --> 00:00:42,953
So as you can see,

27
00:00:42,953 --> 00:00:44,130
when I click on these different things,

28
00:00:44,130 --> 00:00:46,440
it's going to check them and uncheck them.

29
00:00:46,440 --> 00:00:47,940
And also if I type in something here,

30
00:00:47,940 --> 00:00:48,773
click add to do,

31
00:00:48,773 --> 00:00:49,650
it shows up here,

32
00:00:49,650 --> 00:00:50,520
I can delete them.

33
00:00:50,520 --> 00:00:52,380
And most importantly, when I refresh,

34
00:00:52,380 --> 00:00:55,050
all of this is saved
locally in local storage.

35
00:00:55,050 --> 00:00:57,270
So I can see all the information here.

36
00:00:57,270 --> 00:00:58,980
Now, this placeholder task right here,

37
00:00:58,980 --> 00:01:00,150
you can see it on the left hand side,

38
00:01:00,150 --> 00:01:01,830
is just this LI section.

39
00:01:01,830 --> 00:01:03,120
This is just there to show you

40
00:01:03,120 --> 00:01:04,410
what the different class names is

41
00:01:04,410 --> 00:01:07,140
as well as the structure
of this LI element,

42
00:01:07,140 --> 00:01:08,640
so you know what it's
supposed to look like.

43
00:01:08,640 --> 00:01:10,980
That way all the styling
and everything works fine.

44
00:01:10,980 --> 00:01:12,780
Just make sure it looks exactly like this

45
00:01:12,780 --> 00:01:14,700
and you're gonna be perfectly fine.

46
00:01:14,700 --> 00:01:15,900
And when it comes to the styling

47
00:01:15,900 --> 00:01:16,980
for checked and unchecked,

48
00:01:16,980 --> 00:01:19,050
as you can see all that's
handled in the CSS,

49
00:01:19,050 --> 00:01:20,370
you don't have to do any JavaScript

50
00:01:20,370 --> 00:01:22,410
or TypeScript for that at all.

51
00:01:22,410 --> 00:01:25,020
So go ahead, try to build
out this project yourself,

52
00:01:25,020 --> 00:01:25,853
and in the next video

53
00:01:25,853 --> 00:01:27,450
I'll show you exactly how I would do this

54
00:01:27,450 --> 00:01:28,500
and you'll probably be surprised

55
00:01:28,500 --> 00:01:30,360
how little actual TypeScript code

56
00:01:30,360 --> 00:01:32,160
you need to write to make this work.