Refactor the todo app.

zarahzachz · Nov 8, 2018 · 0b9d20e · 0b9d20e
1 parent a5ffc01
commit 0b9d20e
Show file tree

Hide file tree

Showing 40 changed files with 44 additions and 16,245 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>novuember</title>
+
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
   </head>
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
   </body>
 </html>
diff --git a/src/components/TodoApp.vue b/src/components/TodoApp.vue
@@ -1,14 +1,49 @@
 <template>
-  <div>Todo App here</div>
+  <div>
+    <todo-list v-bind:todos="todos"></todo-list>
+    <create-todo v-on:create-todo="addTodo"></create-todo>
+  </div>
 </template>
 
 <script>
+import TodoList from './todo-components/TodoList';
+import CreateTodo from './todo-components/CreateTodo';
+
 export default {
   name: 'TodoApp',
+  components: {
+    TodoList,
+    CreateTodo,
+  },
+  data() {
+    return {
+      todos: [{
+        title: 'Todo A',
+        project: 'Project A',
+        done: false,
+      }, {
+        title: 'Todo B',
+        project: 'Project B',
+        done: true,
+      }, {
+        title: 'Todo C',
+        project: 'Project C',
+        done: false,
+      }, {
+        title: 'Todo D',
+        project: 'Project D',
+        done: false,
+      }],
+    };
+  },
+  methods: {
+    addTodo(newTodo) {
+      this.todos.push(newTodo);
+    },
+  },
 };
 </script>
 
 <style scoped>
 
 </style>
-
diff --git a/to-do-app/src/components/CreateTodo.vue → ...components/todo-components/CreateTodo.vue b/to-do-app/src/components/CreateTodo.vue → ...components/todo-components/CreateTodo.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='ui basic content center aligned segment'>
-    <button class='ui basic button icon' v-on:click="openForm" v-show="!isCreating">
+    <button class='ui basic button icon' v-on:click="openForm()" v-show="!isCreating">
       <i class='plus icon'></i>
     </button>
     <div class='ui centered card' v-show="isCreating">
@@ -12,13 +12,13 @@
           </div>
           <div class='field'>
             <label>Project</label>
-            <input type='text' ref='project' defaultValue="">
+            <input v-model="projectText" type='text' ref='project' defaultValue="">
           </div>
           <div class='ui two button attached buttons'>
             <button class='ui basic blue button' v-on:click="sendForm()">
               Create
             </button>
-            <button class='ui basic red button' v-on:click="closeForm">
+            <button class='ui basic red button' v-on:click="closeForm()">
               Cancel
             </button>
           </div>

diff --git a/to-do-app/src/components/Todo.vue → src/components/todo-components/Todo.vue b/to-do-app/src/components/Todo.vue → src/components/todo-components/Todo.vue
diff --git a/to-do-app/src/components/TodoList.vue → src/components/todo-components/TodoList.vue b/to-do-app/src/components/TodoList.vue → src/components/todo-components/TodoList.vue
diff --git a/to-do-app/.babelrc b/to-do-app/.babelrc
diff --git a/to-do-app/.editorconfig b/to-do-app/.editorconfig
diff --git a/to-do-app/.eslintignore b/to-do-app/.eslintignore
diff --git a/to-do-app/.eslintrc.js b/to-do-app/.eslintrc.js
diff --git a/to-do-app/.gitignore b/to-do-app/.gitignore
diff --git a/to-do-app/.postcssrc.js b/to-do-app/.postcssrc.js
diff --git a/to-do-app/README.md b/to-do-app/README.md
diff --git a/to-do-app/build/build.js b/to-do-app/build/build.js
diff --git a/to-do-app/build/check-versions.js b/to-do-app/build/check-versions.js
diff --git a/to-do-app/build/logo.png b/to-do-app/build/logo.png