Refactored Task and TaskView into modules

web/main.js

-class Task extends EventTarget {
-  constructor(data){
-    super()
-    this.data = data
-  }
-
-  get id(){
-    return this.data.id
-  }
-
-  get done(){
-    return this.data.done
-  }
-
-  set done(new_value){
-    this.data.done = new_value
-    this.dispatchEvent(new CustomEvent("change"))
-  }
-
-  get description(){
-    return this.data.description
-  }
-
-  set description(new_value){
-    this.data.description = new_value
-    this.dispatchEvent(new CustomEvent("change"))
-  }
-}
-
+import Task from "./tasks/task.js"
+import TaskView from "./tasks/view.js"
 
 class TaskController {
   constructor(){
@@ -65,36 +38,6 @@ let task_views = []
 
 let list = document.querySelector("task-list")
 
-class TaskView {
-  static template = `
-    <input type="checkbox" name="done"/> 
-    <task-description> -- </task-description>
-  `
-
-  constructor(task){
-    this.task = task
-    this.element = document.createElement("task-summary")
-    this.element.innerHTML = this.constructor.template
-
-    this.fields = {
-      done: this.element.querySelector("[name=done]"),
-    }
-
-    this.update()
-
-    this.task.addEventListener("change", () => this.update())
-
-    this.fields.done.addEventListener("change", () => {
-      this.task.done = this.fields.done.checked
-    })
-  }
-
-  update() {
-    this.fields.done.checked = this.task.done
-    this.element.querySelector("task-description").innerText = this.task.description
-  }
-}
-
 class DetailTaskView {
   constructor(element){
     this.element = element

web/tasks/task.js

+class Task extends EventTarget {
+  constructor(data){
+    super()
+    this.data = data
+  }
+
+  get id(){
+    return this.data.id
+  }
+
+  get done(){
+    return this.data.done
+  }
+
+  set done(new_value){
+    this.data.done = new_value
+    this.dispatchEvent(new CustomEvent("change"))
+  }
+
+  get description(){
+    return this.data.description
+  }
+
+  set description(new_value){
+    this.data.description = new_value
+    this.dispatchEvent(new CustomEvent("change"))
+  }
+}
+
+export default Task
\ No newline at end of file

web/tasks/view.js

+class TaskView {
+  static template = `
+    <input type="checkbox" name="done"/> 
+    <task-description> -- </task-description>
+  `
+
+  constructor(task){
+    this.task = task
+    this.element = document.createElement("task-summary")
+    this.element.innerHTML = this.constructor.template
+
+    this.fields = {
+      done: this.element.querySelector("[name=done]"),
+    }
+
+    this.update()
+
+    this.task.addEventListener("change", () => this.update())
+
+    this.fields.done.addEventListener("change", () => {
+      this.task.done = this.fields.done.checked
+    })
+  }
+
+  update() {
+    this.fields.done.checked = this.task.done
+    this.element.querySelector("task-description").innerText = this.task.description
+  }
+}
+
+export default TaskView
\ No newline at end of file