Merge pull request #3 from Micky373/Interactive_list

Interactive list
Micky373 · Feb 18, 2022 · d58938b · d58938b
2 parents e5b000a + a58ecce
commit d58938b
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 6 deletions.
diff --git a/dist/index.bundle.js b/dist/index.bundle.js
@@ -350,7 +350,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___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()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "body {\r\n  background-color: #f4f2f3;\r\n}\r\n\r\nmain {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.none {\r\n  display: none;\r\n}\r\n\r\n.to_do_list_container {\r\n  border: 1px solid #9497ae;\r\n  box-shadow: 0.05rem 0.05rem 2rem;\r\n  width: 40rem;\r\n  height: auto;\r\n  margin: 7rem auto;\r\n}\r\n\r\nheader {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  width: auto;\r\n  padding: 1rem;\r\n  border-bottom: 1px solid #c4c6d8;\r\n  background-color: white;\r\n}\r\n\r\nh1 {\r\n  margin: 0;\r\n  font-family: Quintessential, sans-serif;\r\n  font-size: 1.8rem;\r\n  color: black;\r\n}\r\n\r\n.reload {\r\n  align-self: center;\r\n  color: #c4c6d8;\r\n  margin-right: 1rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.task_input {\r\n  background-color: white;\r\n  border-bottom: 1px solid #c4c6d8;\r\n}\r\n\r\ninput {\r\n  font-size: 1.5rem;\r\n  padding: 0.5rem;\r\n  font-family: Quintessential, sans-serif;\r\n  width: 85%;\r\n  border: none;\r\n  outline: none;\r\n  margin-left: 1rem;\r\n}\r\n\r\n.task_container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: white;\r\n}\r\n\r\n.task_container .task {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-family: Quintessential, sans-serif;\r\n  gap: 1rem;\r\n  padding: 1rem;\r\n  border-bottom: 1px solid #c4c6d8;\r\n  font-size: 1.2rem;\r\n}\r\n\r\n.checking {\r\n  width: 1rem;\r\n  height: 1rem;\r\n  flex-shrink: 0;\r\n  background-color: red;\r\n  display: block;\r\n}\r\n\r\n.clear {\r\n  text-align: center;\r\n  padding: 1rem;\r\n  color: #9497ae;\r\n  font-family: Quintessential, sans-serif;\r\n  font-size: 1.5rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.the_task {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n}\r\n\r\n.delete_task {\r\n  color: rgb(233, 47, 47);\r\n  align-self: center;\r\n  cursor: pointer;\r\n  margin-right: 1rem;\r\n}\r\n\r\n.the_task .to_do {\r\n  width: 20rem;\r\n  overflow: scroll;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .to_do_list_container {\r\n    width: 25rem;\r\n  }\r\n\r\n  .the_task .to_do {\r\n    width: 15rem;\r\n  }\r\n\r\n  .the_task {\r\n    gap: 0;\r\n  }\r\n}\r\n", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, "body {\r\n  background-color: #f4f2f3;\r\n}\r\n\r\nmain {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.none {\r\n  display: none;\r\n}\r\n\r\n.to_do_list_container {\r\n  border: 1px solid #9497ae;\r\n  box-shadow: 0.05rem 0.05rem 2rem;\r\n  width: 40rem;\r\n  height: auto;\r\n  margin: 7rem auto;\r\n}\r\n\r\nheader {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  width: auto;\r\n  padding: 1rem;\r\n  border-bottom: 1px solid #c4c6d8;\r\n  background-color: white;\r\n}\r\n\r\nh1 {\r\n  margin: 0;\r\n  font-family: Quintessential, sans-serif;\r\n  font-size: 1.8rem;\r\n  color: black;\r\n}\r\n\r\n.reload {\r\n  align-self: center;\r\n  color: #c4c6d8;\r\n  margin-right: 1rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.task_input {\r\n  background-color: white;\r\n  border-bottom: 1px solid #c4c6d8;\r\n}\r\n\r\ninput {\r\n  font-size: 1.5rem;\r\n  padding: 0.5rem;\r\n  font-family: Quintessential, sans-serif;\r\n  width: 85%;\r\n  border: none;\r\n  outline: none;\r\n  margin-left: 1rem;\r\n}\r\n\r\n.task_container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: white;\r\n}\r\n\r\n.task_container .task {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-family: Quintessential, sans-serif;\r\n  gap: 1rem;\r\n  padding: 1rem;\r\n  border-bottom: 1px solid #c4c6d8;\r\n  font-size: 1.2rem;\r\n}\r\n\r\n.checking {\r\n  width: 1rem;\r\n  height: 1rem;\r\n  flex-shrink: 0;\r\n  background-color: red;\r\n  display: block;\r\n}\r\n\r\n.clear {\r\n  text-align: center;\r\n  padding: 1rem;\r\n  color: #9497ae;\r\n  font-family: Quintessential, sans-serif;\r\n  font-size: 1.5rem;\r\n}\r\n\r\n.clear .finish {\r\n  cursor: pointer;\r\n}\r\n\r\n.the_task {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n}\r\n\r\n.delete_task {\r\n  color: rgb(233, 47, 47);\r\n  align-self: center;\r\n  cursor: pointer;\r\n  margin-right: 1rem;\r\n}\r\n\r\n.the_task .to_do {\r\n  width: 20rem;\r\n  overflow: scroll;\r\n}\r\n\r\n.marked {\r\n  text-decoration: line-through;\r\n  color: #e66465;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .to_do_list_container {\r\n    width: 25rem;\r\n  }\r\n\r\n  .the_task .to_do {\r\n    width: 15rem;\r\n  }\r\n\r\n  .the_task {\r\n    gap: 0;\r\n  }\r\n}\r\n", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -482,6 +482,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _local_storage_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
 /* harmony import */ var _remove_task_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
+/* harmony import */ var _complete_check_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
+
 
 
 
@@ -497,14 +499,39 @@ const showActivity = (taskLists) => {
         const checkBox = document.createElement('input');
         checkBox.classList.add('checking');
         checkBox.type = 'checkbox';
+        checkBox.id = taskLists[i].index;
+        checkBox.setAttribute('data-id', `${taskLists[i].index}`);
+        if (taskLists[i].completed == true) {
+            checkBox.setAttribute('checked', 'checked')
+        }
+        checkBox.addEventListener('change', (e) => {
+            const index = e.target.dataset.id
+            const deleteTask = e.target.parentNode.parentNode.querySelector('.to_do');
+            if (e.target.checked) {
+                deleteTask.style.textDecoration = "line-through"
+                deleteTask.style.color = "#e66465"
+                taskLists[index - 1].completed = true
+                checkBox.setAttribute('checked', 'checked')
+                ;(0,_local_storage_js__WEBPACK_IMPORTED_MODULE_0__.addToLocalStorage)(taskLists)
+                window.location.reload()
+            } else {
+                deleteTask.style.textDecoration = "none"
+                deleteTask.style.color = "inherit"
+                taskLists[index - 1].completed = false
+                ;(0,_local_storage_js__WEBPACK_IMPORTED_MODULE_0__.addToLocalStorage)(taskLists)
+            }
+        })
         theTask.appendChild(checkBox);
         const taskElement = document.createElement('input');
         taskElement.type = 'text';
         taskElement.classList.add('to_do');
         taskElement.id = taskLists[i].index;
+        if (taskLists[i].completed == true) {
+            taskElement.classList.add('marked')
+        }
         taskElement.setAttribute('data-id', `${taskLists[i].index}`);
         taskElement.value = `${taskLists[i].description}`;
-        taskElement.addEventListener('click', (e) => {
+        taskElement.addEventListener('input', (e) => {
             const editTask = e.target.parentNode.parentNode;
             const deleteIcon = editTask.querySelector('.delete_task');
             e.target.parentNode.style.backgroundColor = 'lightgoldenrodyellow';
@@ -592,6 +619,33 @@ const removeTask = (ref) => {
 /* 14 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _local_storage_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
+
+
+let taskLists = JSON.parse(localStorage.getItem('data'));
+
+const finish = () => {
+    console.log(taskLists)
+    const result = taskLists.filter((value) => value.completed !== true);
+    taskLists = result;
+    console.log(taskLists)
+    for (let i = 0; i < taskLists.length; i += 1) {
+        taskLists[i].index = i + 1;
+    }
+    (0,_local_storage_js__WEBPACK_IMPORTED_MODULE_0__.addToLocalStorage)(taskLists);
+    window.location.reload()
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (finish);
+
+/***/ }),
+/* 15 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
@@ -692,8 +746,10 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styles_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var _modules_show_activity_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
-/* harmony import */ var _modules_add_task_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
+/* harmony import */ var _modules_add_task_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(15);
 /* harmony import */ var _modules_local_storage_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
+/* harmony import */ var _modules_complete_check_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
+
 
 
 
@@ -706,6 +762,12 @@ let taskLists = [];
 // Add task
 
 const activity = document.querySelector('#add_task');
+const finishTask = document.querySelector('.finish')
+
+finishTask.addEventListener('click', () => {
+  finishTask.style.textDecoration = "underline"
+  ;(0,_modules_complete_check_js__WEBPACK_IMPORTED_MODULE_4__["default"])()
+})
 
 activity.addEventListener('keypress', (e) => {
   if (e.key === 'Enter') {

diff --git a/dist/index.html b/dist/index.html
@@ -23,7 +23,7 @@ <h1>Today's To Do </h1>
             </div>
             <div class="task_container"></div>
             <div class="clear">
-                Clear all completed
+               <span class="finish">Clear all completed</span>
             </div>
         </div> 
     </main>   

diff --git a/src/index.html b/src/index.html
@@ -23,7 +23,7 @@ <h1>Today's To Do </h1>
             </div>
             <div class="task_container"></div>
             <div class="clear">
-                Clear all completed
+               <span class="finish">Clear all completed</span>
             </div>
         </div> 
     </main>   

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ import './styles.css';
 import showActivity from './modules/show_activity.js';
 import addTask from './modules/add_task.js';
 import { addToLocalStorage } from './modules/local_storage.js';
+import finish from './modules/complete_check.js';
 
 // Populating the html element
 
@@ -10,6 +11,12 @@ let taskLists = [];
 // Add task
 
 const activity = document.querySelector('#add_task');
+const finishTask = document.querySelector('.finish');
+
+finishTask.addEventListener('click', () => {
+  finishTask.style.textDecoration = 'underline';
+  finish();
+});
 
 activity.addEventListener('keypress', (e) => {
   if (e.key === 'Enter') {

diff --git a/src/modules/complete_check.js b/src/modules/complete_check.js
@@ -0,0 +1,15 @@
+import { addToLocalStorage } from './local_storage.js';
+
+let taskLists = JSON.parse(localStorage.getItem('data'));
+
+const finish = () => {
+  const result = taskLists.filter((value) => value.completed !== true);
+  taskLists = result;
+  for (let i = 0; i < taskLists.length; i += 1) {
+    taskLists[i].index = i + 1;
+  }
+  addToLocalStorage(taskLists);
+  window.location.reload();
+};
+
+export default finish;
diff --git a/src/modules/show_activity.js b/src/modules/show_activity.js
@@ -13,14 +13,39 @@ const showActivity = (taskLists) => {
     const checkBox = document.createElement('input');
     checkBox.classList.add('checking');
     checkBox.type = 'checkbox';
+    checkBox.id = taskLists[i].index;
+    checkBox.setAttribute('data-id', `${taskLists[i].index}`);
+    if (taskLists[i].completed === true) {
+      checkBox.setAttribute('checked', 'checked');
+    }
+    checkBox.addEventListener('change', (e) => {
+      const index = e.target.dataset.id;
+      const deleteTask = e.target.parentNode.parentNode.querySelector('.to_do');
+      if (e.target.checked) {
+        deleteTask.style.textDecoration = 'line-through';
+        deleteTask.style.color = '#e66465';
+        taskLists[index - 1].completed = true;
+        checkBox.setAttribute('checked', 'checked');
+        addToLocalStorage(taskLists);
+        window.location.reload();
+      } else {
+        deleteTask.style.textDecoration = 'none';
+        deleteTask.style.color = 'inherit';
+        taskLists[index - 1].completed = false;
+        addToLocalStorage(taskLists);
+      }
+    });
     theTask.appendChild(checkBox);
     const taskElement = document.createElement('input');
     taskElement.type = 'text';
     taskElement.classList.add('to_do');
     taskElement.id = taskLists[i].index;
+    if (taskLists[i].completed === true) {
+      taskElement.classList.add('marked');
+    }
     taskElement.setAttribute('data-id', `${taskLists[i].index}`);
     taskElement.value = `${taskLists[i].description}`;
-    taskElement.addEventListener('click', (e) => {
+    taskElement.addEventListener('input', (e) => {
       const editTask = e.target.parentNode.parentNode;
       const deleteIcon = editTask.querySelector('.delete_task');
       e.target.parentNode.style.backgroundColor = 'lightgoldenrodyellow';

diff --git a/src/styles.css b/src/styles.css
@@ -88,6 +88,9 @@ input {
   color: #9497ae;
   font-family: Quintessential, sans-serif;
   font-size: 1.5rem;
+}
+
+.clear .finish {
   cursor: pointer;
 }
 
@@ -109,6 +112,11 @@ input {
   overflow: scroll;
 }
 
+.marked {
+  text-decoration: line-through;
+  color: #e66465;
+}
+
 @media (max-width: 600px) {
   .to_do_list_container {
     width: 25rem;