In the starter files we have in our index.html:
app.css: Can be found in the repo.
Note: In the html we have a lot of <template> tags. Template tags are default HTML tags supported by modern browsers, which allow us to specify some HTML 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 JS/TS to then render it when we want to render it, to control it with JS and TS.
So, here I have a form with 3 inputs a title a description and a people input, which will be what is the title of the project, what will be the description of the project and how many people will be assigned to it. Then there is a add project button.
Then from line: 29 we have another template. It just holds a list item that will be used to render a single project. Then there is an unordered list. Which will be used to show multiple single projects based on the last template.
At last, on line 40 everything will be appended using TS and this div.
And now it's our job to write some TypeScript 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.
We will use the Object Oriented approach here. Which is optional.
So, here first in our constructor we are getting the templateElement and the hostElement(where we want to render the final output). Then using the private attach function we are rendering the form to the hostElement. So, when a new object will be created of this class I will render a form.
Note: On line 13 , using importNode() →
Here we are using this.templateElement.content which will give us the HTML code for the templateElement. Import node also takes a second argument which defines whether it should import this with a deep clone or not. So all levels of nesting inside of the template and I definitely want to do that, so I will pass true.
On line 14, using importedNode.firstElementChild it returns the first child that is an element, and null otherwise.
On line 19, using insertAdjacentElement() → Here it takes first argument as where exactly to insert an adjacent element. ‘afterbegin’ means after the begining of the targeting element.
Now, our output will be:
