Day 16 中场休息，来做点酷东西

好的，Max 的课程进行到这边，是时候来休息一下，整合前面所学的东西了。要来做的是一个可以让使用者新增专案的小专案～

专案的结构长这样：

HTML 的 head 简单的引入了 css 档跟 JavaScript 档，说明一下 body 的架构：

上方跟下方的 template 们是要让 JavaScript 透过 id 动态渲染资料进来，我们要做的事是抓取到使用者在表单输入的内容，然後个别验证 Title、Description、People 的内容，最後按下 ADD PROJECT 按钮送出一个新的 Project，最後会显示在下面的 List 里面。

开工！

一开始先 npm install 下载套件，然後下 tsc -w 指令来自动监看并编译 .ts 的档案。我们先来把表格渲染出来吧！Max 带我们练习物件导向的写法：

class ProjectInput {
  templateElement: HTMLTemplateElement
  hostElement: HTMLDivElement
  element: HTMLFormElement

  constructor() {
    this.templateElement = document.getElementById(
      'project-input'
    )! as HTMLTemplateElement
    this.hostElement = document.getElementById('app') as HTMLDivElement

    const importedNode = document.importNode(this.templateElement.content, true)
    this.element = importedNode.firstElementChild as HTMLFormElement
    this.attach()
  }

  private attach() {
    this.hostElement.insertAdjacentElement('afterbegin', this.element)
  }
}

const prjInput = new ProjectInput()

上面做了几件事情：

取得使用者输入的 template 跟要渲染的 div，为了让 constructor 里面可以存取到 templateElement 跟 hostElement，要先在 class 写好 field。另外 TypeScript 不知道用 getElementById 方法取到的值是不是真的如同在 field 设定好的型别以及是不是 null，於是用了惊叹号确保一定会有这个值以及做了 type casting。
再来就是要把使用者输入的值给拿到，这边用了 importNode 方法，复制了一份指定节点的内容，第二个参数是指说要不要把全部的内容都一并复制。
建立一个 attach() 方法在 hostElement 插入拿到的值。
建立一个 ProjectInput 的实例。