So now that we're able to fetch the user input and all to validate it with the help of our typescript
the driven validation logic here.
Let's move on and let's make sure we do more with that gathered user input than just output it in the
console because at the moment this of course is what we're doing right in the end I'm just printing
the things the information we gathered to the console.
And that's not our final goal in this application.
Instead the goal should be that we all are rendered is list of projects here based on this template
where every project item is based on this template here and we output the information we gathered here.
So that will be the next thing I want to work on.
Besides having our project input class here which is responsible for rendering the forum and gathering
the user input I want to have a number of class which is responsible for rendering a list of projects.
And actually I will split dad into two classes one class for the list and one class per project item
in the list.
And then we need to find some way of passing that gathered input here basically to our project list
and add a new item to it.
So let's tackle is step by step I'd say and let's start by adding a project list class.
Now the exact place where you added is up to you.
The order does not matter because JavaScript in the end will pass this entire file entirely before it
executes it.
So it will be aware of all classes.
Still I will added here above the project input class because I kind of for a lie on the project list
class which I'm about to build inside of the project input class.
But again it does really matter.
So here I'll have my project list class project list and the idea of this class here is a bit related
to what we did in a project input 1 to reach out to my template here and then render it in a certain
place off the application and they offer what we can do here is we can again add a constructor we can
add the fields we need and there will need the template element and the host element in the end so we
can add both here to our project list will also need the element itself.
I'd say so the concrete element which is getting rendered and the types will differ though the host
element will still be a diff because I want to render that list in that div here as well but the concrete
element which we do render of course is not a form element but if we have a look at our list template
here we see there is a section inside of it.
So we have a section element that turns out there is no element no section element.
So we'll just have a regular H html element because every element has this type here for some tax there
are more specialized types.
If they aren't we can just use H to meld hype.
So now of course we need to get access to these elements so we can copy this code here actually from
the constructor of the project input added to the constructor of project list and now adjust adjust
some things.
For example my template element of course now doesn't have an idea of project input that's now project
list instead.
So let's copy that and use this year to select the element.
I will still cost it and I still know with certainty that I get it.
So this doesn't change to host elements still as he did with the idea app.
So this does not change then I import my content and then I well store the first element of the import
template.
So basically the first element in the template which is the section I stored that in the element property
here.
However this is not a h HTML form element it's just an aged him out element here.
Now we also can assign an I.D. here and actually D I.D. should be dynamic not hardcoded because we'll
have more than one list of projects I want to have two lists in the final app one for the active projects
and one for the inactive projects and therefore I want to get some additional information that constructor
the the type of the project and I'll use that typescript short because you learn about where you can
add an excess or in front of the parameter private or public to automatically create a property of the
same name and stored the value that's passed in on this argument in that equally named property.
So now this class will have a property named type as well.
And now the question is what's the type of this type parameter.
And this should actually be a literal type and union type.
It's either active or finished.
We even have active projects or finished projects.
So that's an argument I expect to get when the project list is instantiated.
And with that we have to type property.
These ideas should be then be based on this.
It should be.
And for that I use a template literal here.
It should be type dash projects so ever active dash projects or finished dash projects.
That's my idea here.
You can always use this stored type so that typescript understands that we're using this property and
that it's not unused.
So with that we're getting access to all the core elements and we're adding an I.D. to the section which
we get out of our template.
Now of course we want to we want to render it right.
That's the idea.
For this I'll again add a private method attach just as we had it in the project input and in there
it's now the goal.
Q Well attached is to the DOM to now render dad list to the Don so instead of attach I will actually
do the same as I did and attach 4D project form so we can copy that line here and add it to attach.
I have my whole list element and I want to insert an adjacent element.
After the beginning and this should be the element we extracted from the template here.
However I actually don't want to do that after the beginning but instead before end which means before
the closing tag off the host element.
And then we can call attach here in the constructor of course to attach our created element here to
the Don.
No there is one important difference compared to the project input though for this list it's not done
with just adding the list to the DOM.
The input was finished right the form here was finished.
We had all the inputs there.
All we needed to do was set up an event listener.
Now for the list here we actually haven't had her with an empty H2 tag for example.
And I want to add some text there so I will add another new method to your private method render content
could be a fitting name.
And my idea here is to fill the the blank spaces in that template with some life here.
For that let's go to that render content method and done a couple of things I want to do.
One thing is that for that unordered list which is part of my project list here I want to add an idea
to it.
Of course you don't have to do that but I want to do that so that if we need to selected later we can
do that with these.
So I'll create a list idea here is stored in a constant and this will be a template literal so it will
be a string where we can inject dynamic content and I want to based is on the type of the surrounding
project list.
So off the surrounding section and then add projects list thereafter.
Now we can reach out to the unordered list which we get in our element which is that section here right
element is that section so to get the unordered list inside of there we can for example use a query
selector and search for the first and in this case only unordered list we know we will get one because
we know there will be one and then we can add an idea here which should be the list idea.
That's one thing which you'll want to do.
I also want to set the text content of that age to tag here and for this we can reach out to this element
query selector find the first and only H to tag we know we will find one hence the exclamation mark
to rule out dead no case and set the text content equal to this thought.
Type 2 uppercase remember distort type is either active we're finished with two opera case we convert
this to all caps plus projects.
So does it stand simply that they're heading for this section and now with that we're we're generally
done we have no items in that list yet.
We'll work on this later but we're generally done.
We can call this the render of content after we attached it to the DOM for example.
Now it would be nice to see that an action of course again list items ends on will be missing but it
would be nice to see something in action here well for that let's go to the bottom of the file where
we instantiate the project input and there we can now all instantiate our lists we have the active project
list which we instantiate by calling new project list and there we have to pass in that type argument
which is either active or finished here since I'm rendering the active list I of course pass in active
and then here we have the finished project list where I of course pass it finished if we now save that
it should compile without errors and hence what you should see if you go back are d to empty sections
here with the headings here and while the empty space where later items will be added project items
will be added now for the moment we have no such project items still.
So as a next step we should work on some way of making sure that when we click at project that we create
a new project in code so a new data structure which represents a project and that we then passed is
information about this new project to the active projects list here to this active projects section
because every new project should be active by default.
This will be our next goal.
And again there will be many different ways of implementing this we'll do it together with one way I
came up with in the next lecture.