Task model + reactive editing

main.js

-let tasks = [
-  {done: true, description: "Do Laundry"},
-  {done: false, description: "Do Homework"},
-  {done: false, description: "Do Chores"},
+class Task extends EventTarget {
+  constructor(data){
+    super()
+    this.data = data
+  }
+
+  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"))
+  }
+}
+
+let tasks = [
+  new Task({done: true,  description: "Do Laundry" }),
+  new Task({done: false, description: "Do Homework"}),
+  new Task({done: false, description: "Do Chores"  }),
 ]
 
 class TaskView {
@@ -15,11 +39,23 @@ class TaskView {
     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.element.querySelector("[name=done]").checked = this.task.done
+    this.fields.done.checked = this.task.done
     this.element.querySelector("task-description").innerText = this.task.description
   }
 }
@@ -28,11 +64,33 @@ 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
+    })
   }
 
-  update(task) {
-    this.element.querySelector("[name=done]").checked = task.done
-    this.element.querySelector("[name=description]").value = task.description
+  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
   }
 }
 
@@ -43,7 +101,7 @@ let list = document.querySelector("task-list")
 for (let task of tasks){
   let view = new TaskView(task)
 
-  view.element.addEventListener("click", () => detail_view.update(task) )
+  view.element.addEventListener("click", () => detail_view.task = task )
 
   list.appendChild(view.element)
 }
\ No newline at end of file