Extracted TaskController and DetailView

web/main.js

 import Task from "./tasks/task.js"
-import TaskView from "./tasks/view.js"
+import TaskController from "./tasks/controller.js"
 
-class TaskController {
-  constructor(){
-    this.tasks = []
-  }
-
-  addTask(task){
-    let view = new TaskView(task)
-    view.element.addEventListener("click", () => detail_view.task = task )
-    list.appendChild(view.element)
-    task_views.push(view)
-
-    task.addEventListener("change", () => this.save(task))
-  }
-
-  async refresh(){
-    let tasks_response = await fetch("/tasks", {method: "GET"})
-    let tasks_data = await tasks_response.json()
-  
-    for (let task_data of tasks_data){ this.tasks.push(new Task(task_data)) }
-    for (let task of this.tasks){ this.addTask(task) }
-  }
-
-  async save(task){
-    let tasks_response = await fetch(`/tasks/${task.id}`, {
-      method: "PUT",
-      body: JSON.stringify(task.data),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    })
-  }
-}
-
-let task_views = []
-
-let list = document.querySelector("task-list")
-
-class DetailTaskView {
-  constructor(element){
-    this.element = element
-    this.fields = {
-      done: this.element.querySelector("[name=done]"),
-      description: this.element.querySelector("[name=description]")
-    }
-
-    this.fields.description.addEventListener("input", () => {
-      this.task.description = this.fields.description.value
-    })
-
-    this.fields.done.addEventListener("change", () => {
-      this.task.done = this.fields.done.checked
-    })
-
-    this.deleteButton = this.element.querySelector("#delete_button")
-
-    this.deleteButton.addEventListener("click", () => {
-      let summary_view_for_deleted_task = task_views.find((summary_view) => summary_view.task === this.task)
-      
-      task_views.remove(summary_view_for_deleted_task)
-      tasks.remove(this.task)
-
-      list.removeChild(summary_view_for_deleted_task.element)
-
-    })
-  }
-
-  get task(){
-    return this._task
-  }
-
-  set task(new_task){
-    this._task = new_task
-    this._task.addEventListener("change", () => this.update())
-    this.update()
-  }
-
-  update() {
-    this.fields.done.checked = this.task.done
-    this.fields.description.value = this.task.description
-  }
-}
-
-let detail_view = new DetailTaskView(document.querySelector("task-detail"))
+let task_controller = new TaskController()
 
 let addButton = document.querySelector('#add_button')
-addButton.addEventListener("click", () => {
-  addTask(new Task({done: false, description: "New Task"}))
-})
-
-let task_controller = new TaskController()
 
 let main = async () => {
+  addButton.addEventListener("click", () => {
+    task_controller.addTask(new Task({done: false, description: "New Task"}))
+  })
+
   task_controller.refresh()
 }
 

web/tasks/controller.js

+import Task from "./task.js"
+import TaskView from "./view.js"
+import DetailTaskView from "./detail_view.js"
+
+class TaskController {
+  constructor(){
+    this.tasks = []
+    this.task_views = []
+
+    this.list_element = document.querySelector("task-list")
+    this.detail_view = new DetailTaskView(document.querySelector("task-detail"))
+  }
+
+  addTask(task){
+    let view = new TaskView(task)
+    view.element.addEventListener("click", () => this.detail_view.task = task )
+    this.list_element.appendChild(view.element)
+    this.task_views.push(view)
+
+    task.addEventListener("change", () => this.save(task))
+  }
+
+  async refresh(){
+    let tasks_response = await fetch("/tasks", {method: "GET"})
+    let tasks_data = await tasks_response.json()
+  
+    for (let task_data of tasks_data){ this.tasks.push(new Task(task_data)) }
+    for (let task of this.tasks){ this.addTask(task) }
+  }
+
+  async save(task){
+    let tasks_response = await fetch(`/tasks/${task.id}`, {
+      method: "PUT",
+      body: JSON.stringify(task.data),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+  }
+}
+
+export default TaskController
\ No newline at end of file

web/tasks/detail_view.js

+class DetailTaskView {
+  constructor(element){
+    this.element = element
+    this.fields = {
+      done: this.element.querySelector("[name=done]"),
+      description: this.element.querySelector("[name=description]")
+    }
+
+    this.fields.description.addEventListener("input", () => {
+      this.task.description = this.fields.description.value
+    })
+
+    this.fields.done.addEventListener("change", () => {
+      this.task.done = this.fields.done.checked
+    })
+
+    this.deleteButton = this.element.querySelector("#delete_button")
+
+    this.deleteButton.addEventListener("click", () => {
+      let summary_view_for_deleted_task = task_views.find((summary_view) => summary_view.task === this.task)
+      
+      task_views.remove(summary_view_for_deleted_task)
+      tasks.remove(this.task)
+
+      list.removeChild(summary_view_for_deleted_task.element)
+
+    })
+  }
+
+  get task(){
+    return this._task
+  }
+
+  set task(new_task){
+    this._task = new_task
+    this._task.addEventListener("change", () => this.update())
+    this.update()
+  }
+
+  update() {
+    this.fields.done.checked = this.task.done
+    this.fields.description.value = this.task.description
+  }
+}
+
+export default DetailTaskView
\ No newline at end of file