From 116bfba3e351c17b4a2000cdee541b57a09f636e Mon Sep 17 00:00:00 2001 From: Benjamin-Re Date: Wed, 13 Apr 2022 20:38:35 +0200 Subject: [PATCH] Refactored to MVC architecture --- dist/index.html | 2 +- dist/main.js | 52 ++++++++++++++++++++-------- src/create.js | 46 ------------------------ src/index.html | 2 +- src/index.js | 38 ++------------------ src/modules/controller.js | 15 ++++++++ src/{todo.js => modules/entities.js} | 11 ++---- src/modules/model.js | 11 ++++++ src/modules/view.js | 20 +++++++++++ src/project.js | 4 --- 10 files changed, 89 insertions(+), 112 deletions(-) delete mode 100644 src/create.js create mode 100644 src/modules/controller.js rename src/{todo.js => modules/entities.js} (83%) create mode 100644 src/modules/model.js create mode 100644 src/modules/view.js delete mode 100644 src/project.js diff --git a/dist/index.html b/dist/index.html index 4bd207d..fc15285 100644 --- a/dist/index.html +++ b/dist/index.html @@ -12,7 +12,7 @@
- +
diff --git a/dist/main.js b/dist/main.js index d4ae1fa..b38e724 100644 --- a/dist/main.js +++ b/dist/main.js @@ -139,36 +139,58 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem /***/ }), -/***/ "./src/create.js": -/*!***********************!*\ - !*** ./src/create.js ***! - \***********************/ +/***/ "./src/index.js": +/*!**********************!*\ + !*** ./src/index.js ***! + \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"createTodo\": () => (/* binding */ createTodo)\n/* harmony export */ });\n/* harmony import */ var _todo_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./todo.js */ \"./src/todo.js\");\n\r\n\r\nconst createTodo = () => {\r\n // Get the basic elements on the page - the add button, the content container and the input field\r\n const addButton = document.querySelector(\"main > button\");\r\n const tableBody = document.querySelector(\"tbody\");\r\n const inputField = document.querySelector(\"#todoInputField\");\r\n\r\n // Add new row to content table\r\n addButton.addEventListener(\"click\", (e) => {\r\n const newTodo = new _todo_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](inputField.value);\r\n // Look for the last rows id and increment it for the next one, or if none exists, then it should return undefined = falsy and therefore assign 0\r\n let id = parseInt (\r\n document.querySelector(\"tbody\")?.lastElementChild?.getAttribute(\"id\")\r\n ) + 1 || 0;\r\n const newItem = generateRow(id, newTodo.getTitle());\r\n tableBody.appendChild(newItem);\r\n });\r\n}\r\n\r\n//function to create new row\r\nconst generateRow = (id, text) => {\r\nlet newRow = document.createElement(\"tr\");\r\nnewRow.setAttribute(\"id\", id);\r\nnewRow.innerHTML = `\r\n \r\n \r\n \r\n `;\r\n return newRow;\r\n};\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/create.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/fontawesome */ \"./node_modules/@fortawesome/fontawesome-free/js/fontawesome.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/solid */ \"./node_modules/@fortawesome/fontawesome-free/js/solid.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _modules_controller__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/controller */ \"./src/modules/controller.js\");\n\r\n\r\n\r\n\r\n\r\nwindow.addEventListener(\"load\", () => {\r\n (0,_modules_controller__WEBPACK_IMPORTED_MODULE_3__.listenForAdd)();\r\n});\r\n\n\n//# sourceURL=webpack://todo/./src/index.js?"); /***/ }), -/***/ "./src/index.js": -/*!**********************!*\ - !*** ./src/index.js ***! - \**********************/ +/***/ "./src/modules/controller.js": +/*!***********************************!*\ + !*** ./src/modules/controller.js ***! + \***********************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"listenForAdd\": () => (/* binding */ listenForAdd)\n/* harmony export */ });\n/* harmony import */ var _model_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./model.js */ \"./src/modules/model.js\");\n/* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./view.js */ \"./src/modules/view.js\");\n\r\n\r\n\r\nlet todoInputField = document.querySelector(\"#todoInputField\");\r\nconst addButton = document.querySelector(\".addTodoButton\");\r\n\r\nfunction listenForAdd() {\r\n console.log(addButton);\r\n addButton.addEventListener(\"click\", () => {\r\n let todoTitle = todoInputField.value;\r\n (0,_view_js__WEBPACK_IMPORTED_MODULE_1__.display)((0,_model_js__WEBPACK_IMPORTED_MODULE_0__.addTodo)(todoTitle));\r\n });\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/controller.js?"); + +/***/ }), + +/***/ "./src/modules/entities.js": +/*!*********************************!*\ + !*** ./src/modules/entities.js ***! + \*********************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Todo\": () => (/* binding */ Todo)\n/* harmony export */ });\nclass Todo {\r\n title;\r\n description;\r\n dueDate;\r\n priority;\r\n\r\n constructor(title, description, dueDate, priority) {\r\n this.title = title;\r\n this.description = description;\r\n this.dueDate = dueDate;\r\n this.priority = priority;\r\n }\r\n\r\n setTitle(title) {\r\n this.title = title;\r\n }\r\n\r\n getTitle() {\r\n return this.title;\r\n }\r\n\r\n setDescription(description) {\r\n this.description = description;\r\n }\r\n\r\n getDescription() {\r\n return this.description;\r\n }\r\n\r\n setDueDate(dueDate) {\r\n this.dueDate = dueDate;\r\n }\r\n\r\n getDueDate() {\r\n return this.dueDate;\r\n }\r\n\r\n setPriority(priority) {\r\n this.priority = priority;\r\n }\r\n\r\n getPriority() {\r\n return this.priority;\r\n }\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/entities.js?"); + +/***/ }), + +/***/ "./src/modules/model.js": +/*!******************************!*\ + !*** ./src/modules/model.js ***! + \******************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _create_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./create.js */ \"./src/create.js\");\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/fontawesome */ \"./node_modules/@fortawesome/fontawesome-free/js/fontawesome.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_fontawesome__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @fortawesome/fontawesome-free/js/solid */ \"./node_modules/@fortawesome/fontawesome-free/js/solid.js\");\n/* harmony import */ var _fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_fortawesome_fontawesome_free_js_solid__WEBPACK_IMPORTED_MODULE_3__);\n\r\n// import {} from \"./project\";\r\n\r\n\r\n\r\n\r\n\r\nwindow.addEventListener(\"load\", () => {\r\n (0,_create_js__WEBPACK_IMPORTED_MODULE_0__.createTodo)();\r\n});\r\n\r\n\r\n\r\n\r\n// // Set todo status to complete module\r\n// // Get all check icons and add event listeners to them\r\n// let done = document.querySelectorAll(\".fa-circle-check\");\r\n// done.forEach((item) => {\r\n// item.addEventListener(\"click\", (event) => {\r\n// completeTask(event);\r\n// });\r\n// });\r\n\r\n// // Mark task complete\r\n// const completeTask = (event) => {\r\n// let task = event.target.nextElementSibling;\r\n// let text = task.innerHTML;\r\n// if (text.includes(\"\")) {\r\n// task.parentNode.parentNode.setAttribute(\"data-complete\", \"false\");\r\n// text = task.firstElementChild.textContent;\r\n// task.innerHTML = text;\r\n// } else {\r\n// task.innerHTML = `${text}`;\r\n// task.parentNode.parentNode.setAttribute(\"data-complete\", \"true\");\r\n// }\r\n// };\r\n\r\n// Changing todo priority module\r\n\r\n// Dom manipulation module\r\n\r\n// Popup form https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup_form\r\n\n\n//# sourceURL=webpack://todo/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"addTodo\": () => (/* binding */ addTodo)\n/* harmony export */ });\n/* harmony import */ var _entities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./entities */ \"./src/modules/entities.js\");\n\r\n\r\nconst todoList = [];\r\n\r\nfunction addTodo(title, due, prio){\r\n let newTodo = new _entities__WEBPACK_IMPORTED_MODULE_0__.Todo(title, due, prio);\r\n todoList.push(newTodo);\r\n return todoList;\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/model.js?"); /***/ }), -/***/ "./src/todo.js": -/*!*********************!*\ - !*** ./src/todo.js ***! - \*********************/ +/***/ "./src/modules/view.js": +/*!*****************************!*\ + !*** ./src/modules/view.js ***! + \*****************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Todo)\n/* harmony export */ });\n/* Todo objects\r\n- Title\r\n- Description\r\n- DueDate\r\n- Priority\r\n*/\r\n\r\nclass Todo {\r\n title;\r\n description;\r\n dueDate;\r\n priority;\r\n\r\n constructor(title, description, dueDate, priority) {\r\n this.title = title;\r\n this.description = description;\r\n this.dueDate = dueDate;\r\n this.priority = priority;\r\n }\r\n\r\n setTitle(title) {\r\n this.title = title;\r\n }\r\n\r\n getTitle() {\r\n return this.title;\r\n }\r\n\r\n setDescription(description) {\r\n this.description = description;\r\n }\r\n\r\n getDescription() {\r\n return this.description;\r\n }\r\n\r\n setDueDate(dueDate) {\r\n this.dueDate = dueDate;\r\n }\r\n\r\n getDueDate() {\r\n return this.dueDate;\r\n }\r\n\r\n setPriority(priority) {\r\n this.priority = priority;\r\n }\r\n\r\n getPriority() {\r\n return this.priority;\r\n }\r\n\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/todo.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"display\": () => (/* binding */ display)\n/* harmony export */ });\nconst todoTable = document.querySelector(\"table\");\r\n\r\nfunction display(currentTodoArray){\r\n // Wipeout current list\r\n todoTable.innerHTML = \"\";\r\n // loop through list\r\n currentTodoArray.forEach((todo)=>{\r\n // Create and add a new row to the table\r\n todoTable.appendChild(createRow(todo.title));\r\n })\r\n}\r\n\r\nfunction createRow(title) {\r\n console.log(title);\r\n const newRow = document.createElement(\"tr\");\r\n newRow.innerHTML=``;\r\n return newRow;\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/modules/view.js?"); /***/ }) diff --git a/src/create.js b/src/create.js deleted file mode 100644 index 0697300..0000000 --- a/src/create.js +++ /dev/null @@ -1,46 +0,0 @@ -import Todo from "./todo.js"; - -const createTodo = () => { - // Get the basic elements on the page - the add button, the content container and the input field - const addButton = document.querySelector("main > button"); - const tableBody = document.querySelector("tbody"); - const inputField = document.querySelector("#todoInputField"); - - // Add new row to content table - addButton.addEventListener("click", (e) => { - const newTodo = new Todo(inputField.value); - // Look for the last rows id and increment it for the next one, or if none exists, then it should return undefined = falsy and therefore assign 0 - let id = parseInt ( - document.querySelector("tbody")?.lastElementChild?.getAttribute("id") - ) + 1 || 0; - const newItem = generateRow(id, newTodo.getTitle()); - tableBody.appendChild(newItem); - }); -} - -//function to create new row -const generateRow = (id, text) => { -let newRow = document.createElement("tr"); -newRow.setAttribute("id", id); -newRow.innerHTML = ` - - - - `; - return newRow; -}; - -export {createTodo}; \ No newline at end of file diff --git a/src/index.html b/src/index.html index 9fe9f24..735e040 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,7 @@
- +
\r\n \r\n ${text}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ${title} - - ${text} - - - - - - - - - - -
diff --git a/src/index.js b/src/index.js index a0e42c8..20b778e 100644 --- a/src/index.js +++ b/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("")) { -// task.parentNode.parentNode.setAttribute("data-complete", "false"); -// text = task.firstElementChild.textContent; -// task.innerHTML = text; -// } else { -// task.innerHTML = `${text}`; -// 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 diff --git a/src/modules/controller.js b/src/modules/controller.js new file mode 100644 index 0000000..597a1c3 --- /dev/null +++ b/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}; \ No newline at end of file diff --git a/src/todo.js b/src/modules/entities.js similarity index 83% rename from src/todo.js rename to src/modules/entities.js index a542b96..6a31b30 100644 --- a/src/todo.js +++ b/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}; \ No newline at end of file diff --git a/src/modules/model.js b/src/modules/model.js new file mode 100644 index 0000000..b578353 --- /dev/null +++ b/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}; \ No newline at end of file diff --git a/src/modules/view.js b/src/modules/view.js new file mode 100644 index 0000000..805ae9d --- /dev/null +++ b/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=``; + return newRow; +} + +export {display}; \ No newline at end of file diff --git a/src/project.js b/src/project.js deleted file mode 100644 index 51687e3..0000000 --- a/src/project.js +++ /dev/null @@ -1,4 +0,0 @@ -/* -A project is a container in which several todos live. -A project should have a theme like private, work, ... -*/ \ No newline at end of file
${title}