For that attached you find a starting project as you saw it multiple times in the course already a very
trivial project with a basically empty index H html file and an empty apt.
Yes file.
And here we're going to build a small little demo application a little project.
Now the the app we're going to build will not be too complex but it will be a nice application where
we essentially will be able to manage a couple of projects where a project essentially is as a goal
you could say is that we have lists of projects and we'll have two lists of projects an active list
and a finished list and we'll be able to drag and drop items from one list to the other and stuff like
that.
Now of course the application itself will be nice but the most important thing is that it will allow
us to practice many of the things we learned thus far and that's of course the goal of this module.
Now all the one important node for this module I'm going to write all the code in one single file in
this one single app.
Yes file in this day four will become a very very big file in the module after it is module.
I'll dive into that problem and show you how typescript allows us to split this fall.
But for the moment since we don't know this yet and thus far we had node size issues.
Let's focus on our demo application and for Dad we'll actually start by working on the Enigma HMO file
attached you find a new file downloaded and replace all the content in this starting index age html
file with that downloaded file and do the same for app CSX.
There we have no file yet.
Simply add the file which you find a teacher's lecture to your project next to index H.
Because dear we also import it.
So what's going on here in these files in the index age to metal file.
We're importing the app CSF file for some styling and the app J is file for some javascript logic.
Of course we're not going to write any javascript code like this.
We're going to write code an apt yes but that will get compiled to a javascript file of course.
Now in the body of that age html file you find a couple of template tax template tax are default H Tim
Al tax supported by modern browsers which allow us to specify some H T Mal code which is not loaded
immediately which is not visible immediately which is not rendered immediately so to say but instead
which can be reached via javascript then Dale for all the wire typescript to then render it when we
want to render it to control it with JavaScript and TypeScript and there you see I have a form with
free inputs where basically a title a description and a people input where we can decide what the title
of our project is what the description of our project is and how many people can be assigned to it or
should be assigned to it.
And then the ad project button.
Then we have a number template which just holds a list item that will be used to render a single project
in our list of projects which is then this template here.
There you see I have a header with age 2 section and then an unordered list and indeed that unordered
list will later hold multiple single projects based on this template which will render the data entered
here fruity form at the top and everything will then be appended with the help of typescript to this
day here with the IDF app now.
App CSA is just hold some see us as styles you can of course look through that.
I'll not focus on this here since that has nothing to do with TypeScript and now it's our job to write
some types of code which in the end fetches whatever the user enters here.
Well actually first of all which renders this form then fetches whatever the user enters validates what
the user enters.
So the title description and people has valid values listens to a click on this button or to the submission
of the form to be precise then creates a new project.
So a new javascript object in the end which is stored in some array probably where this array is then
rendered to this list.
And of course the entire list also needs to be added to the DOM.
So these are all the steps.
And of course these are quite a few steps.
Now if you're feeling very confident of course definitely take this as a chance to pause right now and
try implementing this on your own.
No matter how it looks in the end that you just have a setup where it is form is visible where users
can enter something dear and where for every project you enter something you render a list item in this
list which also should be visible if you reached at that's already amazing.
Of course we're all the implementers step by step together.
And they're off to once this is implemented.
We'll also make sure that we actually render two lists and we can switch projects between these lists
with drag and drop and so on.
So first things first though let's get started.