Complete task specification

devpunks · Jul 7, 2017 · f8179c5 · f8179c5
1 parent 4d59d07
commit f8179c5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/examples/to-do/index.es b/examples/to-do/index.es
@@ -3,15 +3,15 @@ Element `to-do`
 (class extends HTMLElement {
 
   initialize () {
-    this.context
-      .tasks = ['Wash clothes', 'Eat food']
+    this.context.tasks =
+      [{ task: 'Wash clothes' }, { task: 'Eat food' }]
   }
 
   onsubmit (event, input = this.select `input`) {
     event.preventDefault ()
 
-    this.context
-      .tasks.push (input.value)
+    this.context.tasks
+      .push (input.value)
 
     input.value = ''
   }
@@ -26,10 +26,9 @@ Element `to-do`
       .map (checkbox => checkbox.checked = true)
   }
 
-  complete (event) {
-    event.prevent () // from painting
-
-    console.log ('complete', event.target)
+  complete (event, id = event.target.id) {
+    this.context.tasks
+      [id].completed = true
   }
 
   remove (event) {
@@ -44,7 +43,13 @@ Element `to-do`
   clear (event) {
     event.preventDefault ()
 
-    console.log ('clearing')
+    const
+      completed = this.selectAll
+        `input[type=checkbox]:checked`
+
+    for (let checkbox of completed)
+      this.context.tasks
+        .splice (checkbox.id, 1)
   }
 
   get tasks ()

diff --git a/examples/to-do/index.html b/examples/to-do/index.html
@@ -14,9 +14,10 @@ <h1>{name}'s &lt;to-do&gt; List</h1>
 
     <template name=tasks>
       <fieldset>
-        <input  id={#} type=checkbox> <!--    {#} - current index -->
+        <!-- {#} - current index -->
+        <input id={#} onclick=complete type=checkbox>
 
-        <label for={#}>{self}</label> <!-- {self} - current item -->
+        <label for={#}>{task}</label>
 
         <button onclick=remove>Remove</button>
       </fieldset>