From 6617f29add74823ea0a28ec8f0aadfa7e5fcb060 Mon Sep 17 00:00:00 2001 From: Amedzro-Elikplim Date: Sat, 26 Feb 2022 23:41:35 +0000 Subject: [PATCH 1/6] Toggle completed to true or false on check --- modules/Task.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/modules/Task.js b/modules/Task.js index fbbef9c..7889d19 100644 --- a/modules/Task.js +++ b/modules/Task.js @@ -101,6 +101,12 @@ class Task { } }; + checked = (option, i) => { + const tasks = JSON.parse(localStorage.getItem('tasks')); + tasks[i].completed = option; + localStorage.setItem('tasks', JSON.stringify(tasks)); + } + createList = (description, i) => { const li = document.createElement('li'); const div = document.createElement('div'); @@ -127,8 +133,10 @@ class Task { const description = li.children[0].children[1]; if (checkbox.checked) { description.style.textDecoration = 'line-through'; + this.checked(true, i); } else { description.style.textDecoration = 'none'; + this.checked(false, i); } }); From f0fe972275a9a7674bb94148891bd729adc09ac0 Mon Sep 17 00:00:00 2001 From: Amedzro-Elikplim Date: Sat, 26 Feb 2022 23:54:54 +0000 Subject: [PATCH 2/6] Modify updateIndex function --- modules/Task.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/modules/Task.js b/modules/Task.js index 7889d19..d2f0a1e 100644 --- a/modules/Task.js +++ b/modules/Task.js @@ -60,14 +60,18 @@ class Task { this.refresh(); } - delete(description) { - this.array = JSON.parse(localStorage.getItem('tasks')); - const index = this.array.findIndex((item) => item.description === description); - + updateIndex = (index) => { const num = index + 1; for (let i = num; i < this.array.length; i += 1) { this.array[i].index -= 1; } + } + + delete(description) { + this.array = JSON.parse(localStorage.getItem('tasks')); + const index = this.array.findIndex((item) => item.description === description); + + this.updateIndex(index); this.array.splice(index, 1); localStorage.setItem('tasks', JSON.stringify(this.array)); From 624e4934a24815bcd40f3beb8f70cf7cfb54b0a6 Mon Sep 17 00:00:00 2001 From: Amedzro-Elikplim Date: Sat, 26 Feb 2022 23:55:32 +0000 Subject: [PATCH 3/6] Add boader radius to todo container --- src/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style.css b/src/style.css index a1b3245..a1084c3 100644 --- a/src/style.css +++ b/src/style.css @@ -14,6 +14,7 @@ body { margin-right: auto; box-shadow: 1px 1px 10px gray; margin-top: 30px; + border-radius: 10px; } .header { From dffc84fa8be1598245f07e62b9cc4030a02d4a71 Mon Sep 17 00:00:00 2001 From: Amedzro-Elikplim Date: Sat, 26 Feb 2022 23:55:42 +0000 Subject: [PATCH 4/6] build/ --- dist/bundle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/bundle.js b/dist/bundle.js index cec06d8..41cb8eb 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _List_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./List.js */ \"./modules/List.js\");\n\n\nclass Task {\n constructor() {\n this.temp = 0;\n this.ul = 0;\n this.tasks = [];\n this.array = [];\n this.num = 0;\n }\n\n showTasks = () => {\n const storage = localStorage.getItem('tasks');\n const TODOS = storage ? JSON.parse(storage) : [];\n\n const ul = document.querySelector('.list-container');\n TODOS.sort((a, b) => a.index - b.index);\n\n for (let i = 0; i < TODOS.length; i += 1) {\n const task = TODOS[i];\n const { description } = task;\n\n const li = this.createList(description, i);\n ul.appendChild(li);\n }\n };\n\n removeChild() {\n this.ul = document.querySelector('.list-container');\n while (this.ul.firstChild) {\n this.ul.removeChild(this.ul.firstChild);\n }\n }\n\n refresh() {\n this.removeChild();\n this.showTasks();\n }\n\n add(data) {\n this.temp = localStorage.getItem('tasks');\n const arr = this.temp ? JSON.parse(this.temp) : [];\n\n const info = {\n description: data,\n index: arr.length + 1,\n completed: false,\n };\n\n arr.push(info);\n localStorage.setItem('tasks', JSON.stringify(arr));\n this.refresh();\n }\n\n update(description, i) {\n this.tasks = JSON.parse(localStorage.getItem('tasks'));\n this.tasks[i].description = description;\n\n localStorage.setItem('tasks', JSON.stringify(this.tasks));\n this.refresh();\n }\n\n delete(description) {\n this.array = JSON.parse(localStorage.getItem('tasks'));\n const index = this.array.findIndex((item) => item.description === description);\n\n const num = index + 1;\n for (let i = num; i < this.array.length; i += 1) {\n this.array[i].index -= 1;\n }\n\n this.array.splice(index, 1);\n localStorage.setItem('tasks', JSON.stringify(this.array));\n this.refresh();\n }\n\n makeTextEditable = (i, ul) => {\n if (ul.hasChildNodes()) {\n const li = ul.children[i];\n const div2 = li.children[0].children[1];\n const icon = li.children[1];\n\n div2.contentEditable = true;\n div2.focus();\n\n li.style.backgroundColor = 'rgb(245, 248, 201)';\n icon.className = 'far fa-trash-alt';\n\n div2.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n const description = div2.innerHTML;\n this.update(description, i);\n }\n });\n\n icon.addEventListener('click', (e) => {\n e.preventDefault();\n const description = div2.innerHTML;\n this.delete(description);\n });\n }\n };\n\n createList = (description, i) => {\n const li = document.createElement('li');\n const div = document.createElement('div');\n const div2 = document.createElement('div');\n const ul = document.querySelector('.list-container');\n\n li.draggable = true;\n div2.className = 'editable';\n div.className = 'checkbox-description-container';\n\n div2.innerHTML = description;\n div.append((0,_List_js__WEBPACK_IMPORTED_MODULE_0__.input)('checkbox'), div2);\n li.append(div, (0,_List_js__WEBPACK_IMPORTED_MODULE_0__.icon)('fas fa-ellipsis-v'));\n\n li.className = 'list';\n\n li.addEventListener('dragend', (e) => {\n e.preventDefault();\n this.makeTextEditable(i, ul);\n });\n\n const checkbox = li.children[0].children[0];\n checkbox.addEventListener('change', () => {\n const description = li.children[0].children[1];\n if (checkbox.checked) {\n description.style.textDecoration = 'line-through';\n } else {\n description.style.textDecoration = 'none';\n }\n });\n\n return li;\n };\n\n clearAll() {\n this.removeChild();\n localStorage.clear();\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Task);\n\n//# sourceURL=webpack://Minimalist/./modules/Task.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _List_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./List.js */ \"./modules/List.js\");\n\n\nclass Task {\n constructor() {\n this.temp = 0;\n this.ul = 0;\n this.tasks = [];\n this.array = [];\n this.num = 0;\n }\n\n showTasks = () => {\n const storage = localStorage.getItem('tasks');\n const TODOS = storage ? JSON.parse(storage) : [];\n\n const ul = document.querySelector('.list-container');\n TODOS.sort((a, b) => a.index - b.index);\n\n for (let i = 0; i < TODOS.length; i += 1) {\n const task = TODOS[i];\n const { description } = task;\n\n const li = this.createList(description, i);\n ul.appendChild(li);\n }\n };\n\n removeChild() {\n this.ul = document.querySelector('.list-container');\n while (this.ul.firstChild) {\n this.ul.removeChild(this.ul.firstChild);\n }\n }\n\n refresh() {\n this.removeChild();\n this.showTasks();\n }\n\n add(data) {\n this.temp = localStorage.getItem('tasks');\n const arr = this.temp ? JSON.parse(this.temp) : [];\n\n const info = {\n description: data,\n index: arr.length + 1,\n completed: false,\n };\n\n arr.push(info);\n localStorage.setItem('tasks', JSON.stringify(arr));\n this.refresh();\n }\n\n update(description, i) {\n this.tasks = JSON.parse(localStorage.getItem('tasks'));\n this.tasks[i].description = description;\n\n localStorage.setItem('tasks', JSON.stringify(this.tasks));\n this.refresh();\n }\n\n updateIndex = (index) => {\n const num = index + 1;\n for (let i = num; i < this.array.length; i += 1) {\n this.array[i].index -= 1;\n }\n }\n\n delete(description) {\n this.array = JSON.parse(localStorage.getItem('tasks'));\n const index = this.array.findIndex((item) => item.description === description);\n\n this.updateIndex(index);\n\n this.array.splice(index, 1);\n localStorage.setItem('tasks', JSON.stringify(this.array));\n this.refresh();\n }\n\n makeTextEditable = (i, ul) => {\n if (ul.hasChildNodes()) {\n const li = ul.children[i];\n const div2 = li.children[0].children[1];\n const icon = li.children[1];\n\n div2.contentEditable = true;\n div2.focus();\n\n li.style.backgroundColor = 'rgb(245, 248, 201)';\n icon.className = 'far fa-trash-alt';\n\n div2.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n const description = div2.innerHTML;\n this.update(description, i);\n }\n });\n\n icon.addEventListener('click', (e) => {\n e.preventDefault();\n const description = div2.innerHTML;\n this.delete(description);\n });\n }\n };\n\n checked = (option, i) => {\n const tasks = JSON.parse(localStorage.getItem('tasks'));\n tasks[i].completed = option;\n localStorage.setItem('tasks', JSON.stringify(tasks));\n }\n\n createList = (description, i) => {\n const li = document.createElement('li');\n const div = document.createElement('div');\n const div2 = document.createElement('div');\n const ul = document.querySelector('.list-container');\n\n li.draggable = true;\n div2.className = 'editable';\n div.className = 'checkbox-description-container';\n\n div2.innerHTML = description;\n div.append((0,_List_js__WEBPACK_IMPORTED_MODULE_0__.input)('checkbox'), div2);\n li.append(div, (0,_List_js__WEBPACK_IMPORTED_MODULE_0__.icon)('fas fa-ellipsis-v'));\n\n li.className = 'list';\n\n li.addEventListener('dragend', (e) => {\n e.preventDefault();\n this.makeTextEditable(i, ul);\n });\n\n const checkbox = li.children[0].children[0];\n checkbox.addEventListener('change', () => {\n const description = li.children[0].children[1];\n if (checkbox.checked) {\n description.style.textDecoration = 'line-through';\n this.checked(true, i);\n } else {\n description.style.textDecoration = 'none';\n this.checked(false, i);\n }\n });\n\n return li;\n };\n\n clearAll() {\n this.removeChild();\n localStorage.clear();\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Task);\n\n//# sourceURL=webpack://Minimalist/./modules/Task.js?"); /***/ }), @@ -36,7 +36,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*************************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\r\\n box-sizing: border-box;\\r\\n margin: 0;\\r\\n padding: 0;\\r\\n}\\r\\n\\r\\nbody {\\r\\n font-family: Raleway, sans-serif;\\r\\n}\\r\\n\\r\\n.todo-container {\\r\\n width: 40vw;\\r\\n margin-left: auto;\\r\\n margin-right: auto;\\r\\n box-shadow: 1px 1px 10px gray;\\r\\n margin-top: 30px;\\r\\n}\\r\\n\\r\\n.header {\\r\\n border-bottom: 1px solid rgb(228, 228, 228);\\r\\n vertical-align: middle;\\r\\n padding: 20px;\\r\\n font-size: large;\\r\\n}\\r\\n\\r\\n.footer {\\r\\n padding: 20px;\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\n.list {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n align-items: center;\\r\\n border-bottom: 1px solid rgb(243, 243, 243);\\r\\n padding-left: 10px;\\r\\n padding-right: 10px;\\r\\n cursor: move;\\r\\n}\\r\\n\\r\\n.editable {\\r\\n width: 35vw;\\r\\n padding: 20px;\\r\\n outline: none;\\r\\n border: none;\\r\\n}\\r\\n\\r\\n.checkbox-description-container {\\r\\n display: flex;\\r\\n gap: 15px;\\r\\n align-items: center;\\r\\n}\\r\\n\\r\\n.icon {\\r\\n color: rgb(128, 128, 128);\\r\\n}\\r\\n\\r\\n.add-list {\\r\\n width: 100%;\\r\\n padding: 20px;\\r\\n font-family: Raleway, sans-serif;\\r\\n font-style: italic;\\r\\n border-bottom: 1px solid rgb(228, 228, 228);\\r\\n outline: none;\\r\\n border-left: none;\\r\\n border-top: none;\\r\\n border-right: none;\\r\\n font-size: large;\\r\\n}\\r\\n\\r\\n.clear-all {\\r\\n color: gray;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://Minimalist/./src/style.css?./node_modules/css-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\r\\n box-sizing: border-box;\\r\\n margin: 0;\\r\\n padding: 0;\\r\\n}\\r\\n\\r\\nbody {\\r\\n font-family: Raleway, sans-serif;\\r\\n}\\r\\n\\r\\n.todo-container {\\r\\n width: 40vw;\\r\\n margin-left: auto;\\r\\n margin-right: auto;\\r\\n box-shadow: 1px 1px 10px gray;\\r\\n margin-top: 30px;\\r\\n border-radius: 10px;\\r\\n}\\r\\n\\r\\n.header {\\r\\n border-bottom: 1px solid rgb(228, 228, 228);\\r\\n vertical-align: middle;\\r\\n padding: 20px;\\r\\n font-size: large;\\r\\n}\\r\\n\\r\\n.footer {\\r\\n padding: 20px;\\r\\n text-align: center;\\r\\n}\\r\\n\\r\\n.list {\\r\\n display: flex;\\r\\n justify-content: space-between;\\r\\n align-items: center;\\r\\n border-bottom: 1px solid rgb(243, 243, 243);\\r\\n padding-left: 10px;\\r\\n padding-right: 10px;\\r\\n cursor: move;\\r\\n}\\r\\n\\r\\n.editable {\\r\\n width: 35vw;\\r\\n padding: 20px;\\r\\n outline: none;\\r\\n border: none;\\r\\n}\\r\\n\\r\\n.checkbox-description-container {\\r\\n display: flex;\\r\\n gap: 15px;\\r\\n align-items: center;\\r\\n}\\r\\n\\r\\n.icon {\\r\\n color: rgb(128, 128, 128);\\r\\n}\\r\\n\\r\\n.add-list {\\r\\n width: 100%;\\r\\n padding: 20px;\\r\\n font-family: Raleway, sans-serif;\\r\\n font-style: italic;\\r\\n border-bottom: 1px solid rgb(228, 228, 228);\\r\\n outline: none;\\r\\n border-left: none;\\r\\n border-top: none;\\r\\n border-right: none;\\r\\n font-size: large;\\r\\n}\\r\\n\\r\\n.clear-all {\\r\\n color: gray;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://Minimalist/./src/style.css?./node_modules/css-loader/dist/cjs.js"); /***/ }), From e1e243473e772fd1c4052bfc56a507046c5dc80b Mon Sep 17 00:00:00 2001 From: Amedzro-Elikplim Date: Sun, 27 Feb 2022 01:07:19 +0000 Subject: [PATCH 5/6] Modify clearCompleted function to remove completed tasks --- modules/Task.js | 15 ++++++++++++--- src/index.js | 2 +- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/modules/Task.js b/modules/Task.js index d2f0a1e..6fbbdc6 100644 --- a/modules/Task.js +++ b/modules/Task.js @@ -147,9 +147,18 @@ class Task { return li; }; - clearAll() { - this.removeChild(); - localStorage.clear(); + removeCompleted = () => { + const tasks = JSON.parse(localStorage.getItem('tasks')); + + const result = tasks.filter((item) => item.completed === true); + + for (let i = 0; i < result.length; i += 1) { + this.delete(result[i].description); + } + } + + clearCompleted() { + this.removeCompleted(); } } diff --git a/src/index.js b/src/index.js index c4b2f32..ed4b89a 100644 --- a/src/index.js +++ b/src/index.js @@ -16,7 +16,7 @@ input.addEventListener('keypress', (e) => { clear.addEventListener('click', (e) => { e.preventDefault(); - task.clearAll(); + task.clearCompleted(); }); task.showTasks(); From 249011f0e7c6dc491ecb372deee2db573eca8222 Mon Sep 17 00:00:00 2001 From: Amedzro-Elikplim Date: Sun, 27 Feb 2022 01:07:30 +0000 Subject: [PATCH 6/6] build/ --- dist/bundle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/bundle.js b/dist/bundle.js index 41cb8eb..46ed32c 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _List_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./List.js */ \"./modules/List.js\");\n\n\nclass Task {\n constructor() {\n this.temp = 0;\n this.ul = 0;\n this.tasks = [];\n this.array = [];\n this.num = 0;\n }\n\n showTasks = () => {\n const storage = localStorage.getItem('tasks');\n const TODOS = storage ? JSON.parse(storage) : [];\n\n const ul = document.querySelector('.list-container');\n TODOS.sort((a, b) => a.index - b.index);\n\n for (let i = 0; i < TODOS.length; i += 1) {\n const task = TODOS[i];\n const { description } = task;\n\n const li = this.createList(description, i);\n ul.appendChild(li);\n }\n };\n\n removeChild() {\n this.ul = document.querySelector('.list-container');\n while (this.ul.firstChild) {\n this.ul.removeChild(this.ul.firstChild);\n }\n }\n\n refresh() {\n this.removeChild();\n this.showTasks();\n }\n\n add(data) {\n this.temp = localStorage.getItem('tasks');\n const arr = this.temp ? JSON.parse(this.temp) : [];\n\n const info = {\n description: data,\n index: arr.length + 1,\n completed: false,\n };\n\n arr.push(info);\n localStorage.setItem('tasks', JSON.stringify(arr));\n this.refresh();\n }\n\n update(description, i) {\n this.tasks = JSON.parse(localStorage.getItem('tasks'));\n this.tasks[i].description = description;\n\n localStorage.setItem('tasks', JSON.stringify(this.tasks));\n this.refresh();\n }\n\n updateIndex = (index) => {\n const num = index + 1;\n for (let i = num; i < this.array.length; i += 1) {\n this.array[i].index -= 1;\n }\n }\n\n delete(description) {\n this.array = JSON.parse(localStorage.getItem('tasks'));\n const index = this.array.findIndex((item) => item.description === description);\n\n this.updateIndex(index);\n\n this.array.splice(index, 1);\n localStorage.setItem('tasks', JSON.stringify(this.array));\n this.refresh();\n }\n\n makeTextEditable = (i, ul) => {\n if (ul.hasChildNodes()) {\n const li = ul.children[i];\n const div2 = li.children[0].children[1];\n const icon = li.children[1];\n\n div2.contentEditable = true;\n div2.focus();\n\n li.style.backgroundColor = 'rgb(245, 248, 201)';\n icon.className = 'far fa-trash-alt';\n\n div2.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n const description = div2.innerHTML;\n this.update(description, i);\n }\n });\n\n icon.addEventListener('click', (e) => {\n e.preventDefault();\n const description = div2.innerHTML;\n this.delete(description);\n });\n }\n };\n\n checked = (option, i) => {\n const tasks = JSON.parse(localStorage.getItem('tasks'));\n tasks[i].completed = option;\n localStorage.setItem('tasks', JSON.stringify(tasks));\n }\n\n createList = (description, i) => {\n const li = document.createElement('li');\n const div = document.createElement('div');\n const div2 = document.createElement('div');\n const ul = document.querySelector('.list-container');\n\n li.draggable = true;\n div2.className = 'editable';\n div.className = 'checkbox-description-container';\n\n div2.innerHTML = description;\n div.append((0,_List_js__WEBPACK_IMPORTED_MODULE_0__.input)('checkbox'), div2);\n li.append(div, (0,_List_js__WEBPACK_IMPORTED_MODULE_0__.icon)('fas fa-ellipsis-v'));\n\n li.className = 'list';\n\n li.addEventListener('dragend', (e) => {\n e.preventDefault();\n this.makeTextEditable(i, ul);\n });\n\n const checkbox = li.children[0].children[0];\n checkbox.addEventListener('change', () => {\n const description = li.children[0].children[1];\n if (checkbox.checked) {\n description.style.textDecoration = 'line-through';\n this.checked(true, i);\n } else {\n description.style.textDecoration = 'none';\n this.checked(false, i);\n }\n });\n\n return li;\n };\n\n clearAll() {\n this.removeChild();\n localStorage.clear();\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Task);\n\n//# sourceURL=webpack://Minimalist/./modules/Task.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _List_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./List.js */ \"./modules/List.js\");\n\n\nclass Task {\n constructor() {\n this.temp = 0;\n this.ul = 0;\n this.tasks = [];\n this.array = [];\n this.num = 0;\n }\n\n showTasks = () => {\n const storage = localStorage.getItem('tasks');\n const TODOS = storage ? JSON.parse(storage) : [];\n\n const ul = document.querySelector('.list-container');\n TODOS.sort((a, b) => a.index - b.index);\n\n for (let i = 0; i < TODOS.length; i += 1) {\n const task = TODOS[i];\n const { description } = task;\n\n const li = this.createList(description, i);\n ul.appendChild(li);\n }\n };\n\n removeChild() {\n this.ul = document.querySelector('.list-container');\n while (this.ul.firstChild) {\n this.ul.removeChild(this.ul.firstChild);\n }\n }\n\n refresh() {\n this.removeChild();\n this.showTasks();\n }\n\n add(data) {\n this.temp = localStorage.getItem('tasks');\n const arr = this.temp ? JSON.parse(this.temp) : [];\n\n const info = {\n description: data,\n index: arr.length + 1,\n completed: false,\n };\n\n arr.push(info);\n localStorage.setItem('tasks', JSON.stringify(arr));\n this.refresh();\n }\n\n update(description, i) {\n this.tasks = JSON.parse(localStorage.getItem('tasks'));\n this.tasks[i].description = description;\n\n localStorage.setItem('tasks', JSON.stringify(this.tasks));\n this.refresh();\n }\n\n updateIndex = (index) => {\n const num = index + 1;\n for (let i = num; i < this.array.length; i += 1) {\n this.array[i].index -= 1;\n }\n }\n\n delete(description) {\n this.array = JSON.parse(localStorage.getItem('tasks'));\n const index = this.array.findIndex((item) => item.description === description);\n\n this.updateIndex(index);\n\n this.array.splice(index, 1);\n localStorage.setItem('tasks', JSON.stringify(this.array));\n this.refresh();\n }\n\n makeTextEditable = (i, ul) => {\n if (ul.hasChildNodes()) {\n const li = ul.children[i];\n const div2 = li.children[0].children[1];\n const icon = li.children[1];\n\n div2.contentEditable = true;\n div2.focus();\n\n li.style.backgroundColor = 'rgb(245, 248, 201)';\n icon.className = 'far fa-trash-alt';\n\n div2.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n const description = div2.innerHTML;\n this.update(description, i);\n }\n });\n\n icon.addEventListener('click', (e) => {\n e.preventDefault();\n const description = div2.innerHTML;\n this.delete(description);\n });\n }\n };\n\n checked = (option, i) => {\n const tasks = JSON.parse(localStorage.getItem('tasks'));\n tasks[i].completed = option;\n localStorage.setItem('tasks', JSON.stringify(tasks));\n }\n\n createList = (description, i) => {\n const li = document.createElement('li');\n const div = document.createElement('div');\n const div2 = document.createElement('div');\n const ul = document.querySelector('.list-container');\n\n li.draggable = true;\n div2.className = 'editable';\n div.className = 'checkbox-description-container';\n\n div2.innerHTML = description;\n div.append((0,_List_js__WEBPACK_IMPORTED_MODULE_0__.input)('checkbox'), div2);\n li.append(div, (0,_List_js__WEBPACK_IMPORTED_MODULE_0__.icon)('fas fa-ellipsis-v'));\n\n li.className = 'list';\n\n li.addEventListener('dragend', (e) => {\n e.preventDefault();\n this.makeTextEditable(i, ul);\n });\n\n const checkbox = li.children[0].children[0];\n checkbox.addEventListener('change', () => {\n const description = li.children[0].children[1];\n if (checkbox.checked) {\n description.style.textDecoration = 'line-through';\n this.checked(true, i);\n } else {\n description.style.textDecoration = 'none';\n this.checked(false, i);\n }\n });\n\n return li;\n };\n\n removeCompleted = () => {\n const tasks = JSON.parse(localStorage.getItem('tasks'));\n\n const result = tasks.filter((item) => item.completed === true);\n\n for (let i = 0; i < result.length; i += 1) {\n this.delete(result[i].description);\n }\n }\n\n clearCompleted() {\n this.removeCompleted();\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Task);\n\n//# sourceURL=webpack://Minimalist/./modules/Task.js?"); /***/ }), @@ -136,7 +136,7 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -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 _modules_Task_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../modules/Task.js */ \"./modules/Task.js\");\n\n\n\nconst input = document.querySelector('.add-list');\nconst clear = document.querySelector('.clear-all');\n\nconst task = new _modules_Task_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n\ninput.addEventListener('keypress', (e) => {\n const data = input.value;\n if (e.key === 'Enter') {\n task.add(data);\n input.value = '';\n }\n});\n\nclear.addEventListener('click', (e) => {\n e.preventDefault();\n task.clearAll();\n});\n\ntask.showTasks();\n\n\n//# sourceURL=webpack://Minimalist/./src/index.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 _modules_Task_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../modules/Task.js */ \"./modules/Task.js\");\n\n\n\nconst input = document.querySelector('.add-list');\nconst clear = document.querySelector('.clear-all');\n\nconst task = new _modules_Task_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n\ninput.addEventListener('keypress', (e) => {\n const data = input.value;\n if (e.key === 'Enter') {\n task.add(data);\n input.value = '';\n }\n});\n\nclear.addEventListener('click', (e) => {\n e.preventDefault();\n task.clearCompleted();\n});\n\ntask.showTasks();\n\n\n//# sourceURL=webpack://Minimalist/./src/index.js?"); /***/ })