Merge pull request #3 from Sanja969/add-Edit-Remove

Milestone 2: Add, Edit and Remove functionalities
Sanja969 · Jun 1, 2022 · 2e5d641 · 2e5d641
2 parents 16aae7a + bc05435
commit 2e5d641
Show file tree

Hide file tree

Showing 16 changed files with 1,013 additions and 59 deletions.
diff --git a/dist/667a1805229ae33e7d3d.png b/dist/667a1805229ae33e7d3d.png
diff --git a/dist/add.bundle.js b/dist/add.bundle.js
diff --git a/dist/addTaskUI.bundle.js b/dist/addTaskUI.bundle.js
diff --git a/dist/index.bundle.js b/dist/index.bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -4,13 +4,13 @@
     <meta charset="utf-8">
     <title>To Do List</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script defer src="index.bundle.js"></script></head>
+  <script defer src="index.bundle.js"></script><script defer src="add.bundle.js"></script><script defer src="remove.bundle.js"></script><script defer src="addTaskUI.bundle.js"></script><script defer src="tasks.bundle.js"></script></head>
   <body>
     <main><div class="listContainer">
-      <div class="title"><h3>Today's To Do</h3><img class = 'imgRefresh' alt = 'refresh'></div>
+      <div class="title"><h3>Today's To Do</h3><img class = 'imgRefresh' alt = 'refresh' src = '2a4441e2b7ef51d897cb.png'></div>
       <form class = "addTask">
-        <input type="text" placeholder="Add to your list...">
-        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' alt = 'return'>
+        <input type="text" placeholder="Add to your list..." class = 'add'>
+        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' alt = 'return'  src = 'e776f112fe439b59d722.png'>
       </form>
       <ul class="to-do-list"></ul>
       <div class="clear">Clear all completed</div>

diff --git a/dist/remove.bundle.js b/dist/remove.bundle.js
diff --git a/dist/tasks.bundle.js b/dist/tasks.bundle.js
diff --git a/src/add.js b/src/add.js
@@ -0,0 +1,24 @@
+import appendTask from './addTaskUI.js';
+
+const list = [];
+
+class Task {
+  constructor(description, completed, index) {
+    this.description = description;
+    this.completed = completed;
+    this.index = index;
+  }
+}
+
+const addTask = (description, completed, index) => {
+  const task = new Task(description, completed, index);
+  list.push(task);
+  appendTask(task);
+  localStorage.setItem('tasks', JSON.stringify(list));
+};
+
+export {
+  addTask,
+  list,
+  Task,
+};
diff --git a/src/addTaskUI.js b/src/addTaskUI.js
@@ -0,0 +1,66 @@
+import moveSrc from './move.png';
+import trashSrc from './trash.png';
+import clearTask from './remove.js';
+
+const toDoListUI = document.querySelector('.to-do-list');
+const endCont = document.querySelector('.clear');
+
+const appendTask = (item, list) => {
+  const taskUI = document.createElement('li');
+  taskUI.innerHTML = `<div><input type='checkbox' id = task-${item.index} class = 'check' value=${item.index}><p size='12'>${item.description}</p></div>`;
+  const moveImg = new Image();
+  moveImg.src = moveSrc;
+  taskUI.appendChild(moveImg);
+  moveImg.addEventListener('click', () => {
+    if (moveImg.src === moveSrc) {
+      moveImg.src = trashSrc;
+      moveImg.parentNode.style.background = 'rgba(214, 214, 148, 0.534)';
+      taskUI.children[0].children[1].setAttribute('contenteditable', 'true');
+      endCont.textContent = 'Chick here to save changes';
+      endCont.style.background = 'rgba(136, 209, 133, 0.534)';
+      endCont.style.fontSize = '24px';
+      endCont.style.color = 'green';
+      endCont.addEventListener('click', (e) => {
+        if (moveImg.src === trashSrc) {
+          e.target.textContent = 'Clear all completed';
+          e.target.style.background = 'rgba(168, 157, 157, 0.534)';
+          e.target.style.fontSize = '16px';
+          e.target.style.color = 'black';
+          taskUI.children[0].children[1].setAttribute('contenteditable', 'false');
+          moveImg.src = moveSrc;
+          list.forEach((element) => {
+            if (element.index === item.index) {
+              element.description = taskUI.children[0].children[1].textContent;
+              localStorage.setItem('tasks', JSON.stringify(list));
+            }
+          });
+        }
+      });
+    } else {
+      clearTask(item.index, list);
+    }
+  });
+  toDoListUI.appendChild(taskUI);
+  const check = taskUI.children[0].children[0];
+
+  if (item.completed === true) {
+    check.checked = true;
+    taskUI.children[0].style.textDecoration = 'line-through';
+  }
+
+  check.style.cursor = 'pointer';
+  moveImg.style.cursor = 'pointer';
+  check.addEventListener('click', () => {
+    if (check.checked === true) {
+      taskUI.children[0].style.textDecoration = 'line-through';
+      item.completed = true;
+      localStorage.setItem('tasks', JSON.stringify(list));
+    } else {
+      taskUI.children[0].style.textDecoration = 'none';
+      item.completed = false;
+      localStorage.setItem('tasks', JSON.stringify(list));
+    }
+  });
+};
+
+export default appendTask;
diff --git a/src/index.html b/src/index.html
@@ -7,10 +7,10 @@
   </head>
   <body>
     <main><div class="listContainer">
-      <div class="title"><h3>Today's To Do</h3><img class = 'imgRefresh' alt = 'refresh'></div>
+      <div class="title"><h3>Today's To Do</h3><img class = 'imgRefresh' alt = 'refresh' src = '../src/refresh.png'></div>
       <form class = "addTask">
-        <input type="text" placeholder="Add to your list...">
-        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' alt = 'return'>
+        <input type="text" placeholder="Add to your list..." class = 'add'>
+        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' alt = 'return'  src = '../src/return.png'>
       </form>
       <ul class="to-do-list"></ul>
       <div class="clear">Clear all completed</div>

diff --git a/src/index.js b/src/index.js
@@ -1,35 +1,43 @@
 import './style.css';
-import moveSrc from './move.png';
 import refreshSrc from './refresh.png';
 import returnSrc from './return.png';
+import {
+  addTask,
+  list,
+} from './add.js';
+import clearTask from './remove.js';
+import appendTask from './addTaskUI.js';
+import Task from './tasks.js';
 
+const storage = JSON.parse(localStorage.getItem('tasks')) || [];
+const addUI = document.querySelector('.add');
+const deleteUI = document.querySelector('.clear');
 const returnImg = document.querySelector('.imgSubmit');
-returnImg.src = returnSrc;
-
 const refreshImg = document.querySelector('.imgRefresh');
-refreshImg.src = refreshSrc;
 
-const toDoListUI = document.querySelector('.to-do-list');
+storage.forEach((item) => {
+  const task = new Task(item.description, item.completed, item.index);
+  list.push(task);
+  appendTask(task, list);
+});
 
-class Task {
-  constructor(description, completed, index) {
-    this.description = description;
-    this.completed = completed;
-    this.index = index;
-  }
-}
+returnImg.src = returnSrc;
+refreshImg.src = refreshSrc;
 
-const list = [new Task('Finsh the project', false, 0), new Task('Wash the dishes', false, 1), new Task('Go on zoom meeting', false, 2)];
+addUI.addEventListener('change', () => {
+  addTask(addUI.value, false, list.length + 1);
+});
 
-const appendTask = (item) => {
-  const taskUI = document.createElement('li');
-  taskUI.innerHTML = `<label><input type='checkbox' id = task-${item.index} class = 'check' value=${item.index}>${item.description}</label>`;
-  const moveImg = new Image();
-  moveImg.src = moveSrc;
-  taskUI.appendChild(moveImg);
-  toDoListUI.appendChild(taskUI);
-};
+refreshImg.addEventListener('click', () => {
+  document.location.href = './index.html';
+});
 
-for (let i = 0; i < list.length; i += 1) {
-  appendTask(list[i]);
-}
+deleteUI.addEventListener('click', () => {
+  const checks = document.querySelectorAll('.check');
+  for (let i = 0; i < checks.length; i += 1) {
+    if (checks[i].checked) {
+      clearTask(checks[i].value, list);
+    }
+  }
+  localStorage.setItem('tasks', JSON.stringify(list));
+});
diff --git a/src/remove.js b/src/remove.js
@@ -0,0 +1,20 @@
+const clearTask = (index, list) => {
+  if (list.length === 0) return;
+
+  list.splice(index - 1, 1);
+
+  document.querySelector(`#task-${index}`).parentNode.parentNode.remove();
+  localStorage.setItem('tasks', JSON.stringify(list));
+
+  if (list.length === 0) return;
+
+  for (let i = index - 1; i < list.length; i += 1) {
+    const nextCheck = document.querySelector(`#task-${i + 2}`);
+    nextCheck.id = `task-${i + 1}`;
+    nextCheck.value -= 1;
+    list[i].index -= 1;
+    localStorage.setItem('tasks', JSON.stringify(list));
+  }
+};
+
+export default clearTask;
diff --git a/src/style.css b/src/style.css
@@ -35,6 +35,10 @@ main {
   border: none;
 }
 
+.addTask > input:focus {
+  outline: none !important;
+}
+
 .submit {
   background-color: inherit;
 }
@@ -56,6 +60,20 @@ main {
   justify-content: space-between;
 }
 
+.to-do-list > * > div {
+  display: flex;
+  align-items: center;
+}
+
+.to-do-list > * > div > p {
+  white-space: nowrap;
+}
+
+.to-do-list > * > div > p:focus {
+  outline: none !important;
+  white-space: nowrap;
+}
+
 .check {
   margin-right: 10px;
 }
@@ -64,6 +82,7 @@ img {
   width: 20px;
   height: 20px;
   background: inherit;
+  cursor: pointer;
 }
 
 .clear {
@@ -72,4 +91,5 @@ img {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
diff --git a/src/tasks.js b/src/tasks.js
@@ -0,0 +1,8 @@
+class Task {
+  constructor(description, completed, index) {
+    this.description = description;
+    this.completed = completed;
+    this.index = index;
+  }
+}
+export default Task;
diff --git a/src/trash.png b/src/trash.png