Styling

package.json

@@ -2,7 +2,7 @@
   "name": "todo-app",
   "version": "1.0.0",
   "description": "A Vue.js project",
-  "author": "Jeremy Kithome <[email protected]>",
+  "author": "Ben Richter <[email protected]>",
   "private": true,
   "scripts": {
     "start": "parcel index.html",

src/App.vue

@@ -1,10 +1,19 @@
 <template>
   <div id="app">
-    <h1 class="ui dividing centered header">VueDO</h1>
-    <div class='ui three column centered grid'>
-      <div class='column'>
+    <div class='ui centered grid'>
+      <div class='twelve wide mobile eight wide tablet six wide computer column'>
+
+        <h2 class="ui dividing header">
+          <i class="check square outline icon"></i>
+          <div class="content">
+            VueDO
+            <div class="sub header">Vue2 basic demo</div>
+          </div>
+        </h2>
+
         <todo-list :todos="todos"></todo-list>
         <create-todo @create-todo="createTodo"></create-todo>
+
       </div>
     </div>
   </div>

src/components/ListView/Todo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ui centered card" :class="{ 'green' :todo.done }">
+  <div class="ui fluid card" :class="{ 'green' :todo.done }">
     <!--yoda, ternary: :class="todo.done ? 'green' : 'red'"  -->
 
 

src/components/ListView/_ListView.vue

@@ -1,9 +1,15 @@
 <template>
   <div>
-    <p class="tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
-    <p class="tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
 
-    <todo @delete-todo="deleteTodo" @complete-todo="completeTodo" v-for="todo in todos" :todo.sync="todo"></todo>
+    <div class="four column centered row">
+      <p class="column tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
+      <p class="column tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
+    </div>
+
+    <todo @delete-todo="deleteTodo"
+          @complete-todo="completeTodo"
+          v-for="(todo, index) in todos" :key="index"
+          :todo.sync="todo" />
   </div>
 </template>