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

Revert "Milestone 2: Add, Edit and Remove functionalities"
Sanja969 · Jun 1, 2022 · bb5b658 · bb5b658
2 parents 2e5d641 + 96f24bb
commit bb5b658
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 1,014 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,16 +4,16 @@
     <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><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>
+  <script defer src="index.bundle.js"></script></head>
   <body>
     <main><div class="listContainer">
-      <div class="title"><h3>Today's To Do</h3><img class = 'imgRefresh' alt = 'refresh' src = '2a4441e2b7ef51d897cb.png'></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..." class = 'add'>
-        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' alt = 'return'  src = 'e776f112fe439b59d722.png'>
+        <input type="text" placeholder="Add to your list...">
+        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' src = '../src/return.png' alt = 'return'>
       </form>
       <ul class="to-do-list"></ul>
       <div class="clear">Clear all completed</div>
     </div></main>
   </body>
-</html>
+</html>
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
diff --git a/src/addTaskUI.js b/src/addTaskUI.js
diff --git a/src/index.html b/src/index.html
@@ -9,11 +9,11 @@
     <main><div class="listContainer">
       <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..." class = 'add'>
-        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' alt = 'return'  src = '../src/return.png'>
+        <input type="text" placeholder="Add to your list...">
+        <input type="submit" value = '' class = "submit"><img class = 'imgSubmit' src = '../src/return.png' alt = 'return'>
       </form>
       <ul class="to-do-list"></ul>
       <div class="clear">Clear all completed</div>
     </div></main>
   </body>
-</html>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,43 +1,35 @@
 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;
 
-storage.forEach((item) => {
-  const task = new Task(item.description, item.completed, item.index);
-  list.push(task);
-  appendTask(task, list);
-});
+const toDoListUI = document.querySelector('.to-do-list');
 
-returnImg.src = returnSrc;
-refreshImg.src = refreshSrc;
+class Task {
+  constructor(description, completed, index) {
+    this.description = description;
+    this.completed = completed;
+    this.index = index;
+  }
+}
 
-addUI.addEventListener('change', () => {
-  addTask(addUI.value, false, list.length + 1);
-});
+const list = [new Task('Finsh the project', false, 0), new Task('Wash the dishes', false, 1), new Task('Go on zoom meeting', false, 2)];
 
-refreshImg.addEventListener('click', () => {
-  document.location.href = './index.html';
-});
+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);
+};
 
-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));
-});
+for (let i = 0; i < list.length; i += 1) {
+  appendTask(list[i]);
+}
diff --git a/src/remove.js b/src/remove.js
diff --git a/src/style.css b/src/style.css
@@ -35,10 +35,6 @@ main {
   border: none;
 }
 
-.addTask > input:focus {
-  outline: none !important;
-}
-
 .submit {
   background-color: inherit;
 }
@@ -60,20 +56,6 @@ 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;
 }
@@ -82,7 +64,6 @@ img {
   width: 20px;
   height: 20px;
   background: inherit;
-  cursor: pointer;
 }
 
 .clear {
@@ -91,5 +72,4 @@ img {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
 }