SM: task complete property & logic added.

Author: Steven Morrison

css/style.css

@@ -123,6 +123,11 @@ html {
     display: none;
 }
 
+.task-complete {
+    color: #aaa;
+    text-decoration: line-through;
+}
+
 .clear {
     clear: both;
 }

index.html

@@ -30,7 +30,7 @@ <h3 class="category-name">{{ cat.name }}</h3>
                     </li>
                     <li v-for="(task, taskIndex) in cat.tasks" class="task-list-item">
                         <div class="delete-icon task-delete-icon" v-on:click="showModal(taskIndex, 'task-delete', index)">X</div>
-                        <p>{{ task }}</p>
+                        <p v-bind:class="{'task-complete': task.complete}">{{ task.text }}</p>
 
                         <div class="clear"></div>
                     </li>

js/app.js

@@ -78,9 +78,15 @@ var app = new Vue({
             input.value = "";
         },
         createTask: function(category) {
-            var task = document.getElementById(category + '-task-input').value.trim();
-            // add task to category.tasks array & hide input
-            if(task.length) {
+            var taskInput = document.getElementById(category + '-task-input').value.trim();
+            
+            if(taskInput.length) {
+                // add task to category.tasks array & hide input    
+                var task = {
+                    'text': taskInput,
+                    'complete' : 0  
+                };
+
                 this.categories[category].tasks.push(task);
                 this.hideTaskInput(this.lastNewTaskCategory);
             }