- So now that we've covered a ton
of stuff related to TypeScript,
let's go ahead
and try to create our very own TypeScript project.
This is going to be a relatively simple project
but you're gonna need to have a few things in TypeScript
that you have to do
for like casting different types
because we're working with the DOM,
but it's just a really simple Todo list project.
What I have open up right now on my screen,
on the left,
is going to be the starting code.
If you go to the description of this video
there'll be a link to get this starting code
directly from GitHub.
Just download the code, copy it
and paste it into your own project.
It's just a CSS file as well as an HTML file.
It's relatively straightforward
and it's gonna give you this output right here.
And what I want you to do
is I want you to convert this
to an actual working to-do list
that function just like this.
So as you can see,
when I click on these different things,
it's going to check them and uncheck them.
And also if I type in something here,
click add to do,
it shows up here,
I can delete them.
And most importantly, when I refresh,
all of this is saved locally in local storage.
So I can see all the information here.
Now, this placeholder task right here,
you can see it on the left hand side,
is just this LI section.
This is just there to show you
what the different class names is
as well as the structure of this LI element,
so you know what it's supposed to look like.
That way all the styling and everything works fine.
Just make sure it looks exactly like this
and you're gonna be perfectly fine.
And when it comes to the styling
for checked and unchecked,
as you can see all that's handled in the CSS,
you don't have to do any JavaScript
or TypeScript for that at all.
So go ahead, try to build out this project yourself,
and in the next video
I'll show you exactly how I would do this
and you'll probably be surprised
how little actual TypeScript code
you need to write to make this work.