Adding tasks

index.html

@@ -18,7 +18,7 @@
       <button>Delete</button>
     </task-detail>
 
-    <button>Add Task</button>
+    <button id="add_button">Add Task</button>
     <script src="main.js"></script>
 
   </body>

main.css

@@ -27,4 +27,8 @@ task-detail {
   grid-area: detail;
 
   background-color: #eee;
+}
+
+#add_button { 
+  grid-area: controls;
 }
\ No newline at end of file

main.js

@@ -98,10 +98,16 @@ let detail_view = new DetailTaskView(document.querySelector("task-detail"))
 
 let list = document.querySelector("task-list")
 
-for (let task of tasks){
+let addTask = function(task){
   let view = new TaskView(task)
-
   view.element.addEventListener("click", () => detail_view.task = task )
-
   list.appendChild(view.element)
-}
\ No newline at end of file
+}
+
+for (let task of tasks){ addTask(task) }
+
+this.addButton = document.querySelector('#add_button')
+this.addButton.addEventListener("click", () => {
+  addTask(new Task({done: false, description: "New Task"}))
+})
+