Refactored to MVC architecture

dist/index.html

@@ -12,7 +12,7 @@
     </aside>
     <main>
       <input type="text" name="todoInputField" id="todoInputField">
-      <button>+</button>
+      <button class="addTodoButton">+</button>
       <div class="content">
         <table>
           <thead>

src/index.html

@@ -12,7 +12,7 @@
     </aside>
     <main>
       <input type="text" name="todoInputField" id="todoInputField">
-      <button>+</button>
+      <button class="addTodoButton">+</button>
       <div class="content">
         <table>
           <thead>

src/index.js

@@ -1,42 +1,8 @@
-import {createTodo} from "./create.js";
-// import {} from "./project";
 import css from "./style.css";
 import '@fortawesome/fontawesome-free/js/fontawesome'
 import '@fortawesome/fontawesome-free/js/solid'
-
+import {listenForAdd} from "./modules/controller";
 
 window.addEventListener("load", () => {
-    createTodo();
+    listenForAdd();
 });
-
-
-
-
-// // Set todo status to complete module
-// // Get all check icons and add event listeners to them
-// let done = document.querySelectorAll(".fa-circle-check");
-// done.forEach((item) => {
-//   item.addEventListener("click", (event) => {
-//     completeTask(event);
-//   });
-// });
-
-// // Mark task complete
-// const completeTask = (event) => {
-//   let task = event.target.nextElementSibling;
-//   let text = task.innerHTML;
-//   if (text.includes("<del>")) {
-//     task.parentNode.parentNode.setAttribute("data-complete", "false");
-//     text = task.firstElementChild.textContent;
-//     task.innerHTML = text;
-//   } else {
-//     task.innerHTML = `<del>${text}</del>`;
-//     task.parentNode.parentNode.setAttribute("data-complete", "true");
-//   }
-// };
-
-// Changing todo priority module
-
-// Dom manipulation module
-
-// Popup form https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup_form

src/modules/controller.js

@@ -0,0 +1,15 @@
+import {addTodo} from "./model.js";
+import {display} from "./view.js";
+
+let todoInputField = document.querySelector("#todoInputField");
+const addButton = document.querySelector(".addTodoButton");
+
+function listenForAdd() {
+    console.log(addButton);
+    addButton.addEventListener("click", () => {
+        let todoTitle = todoInputField.value;
+        display(addTodo(todoTitle));
+    });
+}
+
+export {listenForAdd};

src/todo.js → src/modules/entities.js

@@ -1,11 +1,4 @@
-/* Todo objects
-- Title
-- Description
-- DueDate
-- Priority
-*/
-
-export default class Todo {
+class Todo {
     title;
     description;
     dueDate;
@@ -49,6 +42,6 @@ export default class Todo {
     getPriority() {
         return this.priority;
     }
-
 }
 
+export {Todo};

src/modules/model.js

@@ -0,0 +1,11 @@
+import {Todo} from "./entities";
+
+const todoList = [];
+
+function addTodo(title, due, prio){
+    let newTodo = new Todo(title, due, prio);
+    todoList.push(newTodo);
+    return todoList;
+}
+
+export {addTodo};

src/modules/view.js

@@ -0,0 +1,20 @@
+const todoTable = document.querySelector("table");
+
+function display(currentTodoArray){
+    // Wipeout current list
+    todoTable.innerHTML = "";
+    // loop through list
+    currentTodoArray.forEach((todo)=>{
+        // Create and add a new row to the table
+        todoTable.appendChild(createRow(todo.title));
+    })
+}
+
+function createRow(title) {
+    console.log(title);
+    const newRow = document.createElement("tr");
+    newRow.innerHTML=`<td>${title}</td>`;
+    return newRow;
+}
+
+export {display};