jerryowusu · jerryowusu · Feb 18, 2022 · Feb 17, 2022 · Feb 17, 2022 · Feb 17, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "greenyellow"
+    ]
+}
diff --git a/README.md b/README.md
@@ -25,6 +25,9 @@ A Web Browser (preferably Google Chrome)
 
 - Clone the GitHub Repository
 - Install npm package manager
+- npm install webpack-dev-server --save-dev
+- npm run build
+- npm start
 
 ### Usage
 Open index.html in Chrome

diff --git a/dist/index.html b/dist/index.html
@@ -12,11 +12,12 @@
         <ul class="list-body">
             <li class="title">
                 <h2>Today's To Do</h2>
-                <i class="fas fa-sync-alt"></i>
+
+                <i class="refresh fas fa-sync-alt"></i>
             </li>
             <li class="type-list">
-                <input class="text" type="text" placeholder="Add to your list...">
-                <i class="fa fa-share" aria-hidden="true"></i>
+                <input class="text" type="text" placeholder="Add to your list..." required>
+                <i class="add fa fa-share" aria-hidden="true"></i>
             </li>
             <li class="list-section"></li>
             <li class="clear-completed">

diff --git a/dist/main.js b/dist/main.js
diff --git a/src/index.html b/src/index.html
@@ -7,23 +7,23 @@
     <script src="https://kit.fontawesome.com/2b1476549e.js" crossorigin="anonymous"></script>
 </head>
 <body>
-    <header></header>
     <main>
-        <ul class="list-body">
+        <ul class="to-do-list list-body">
             <li class="title">
                 <h2>Today's To Do</h2>
-                <i class="fas fa-sync-alt"></i>
+                <i class="title-icon fas fa-sync-alt"></i>
             </li>
-            <li class="type-list">
-                <input class="text" type="text" placeholder="Add to your list...">
-                <i class="fa fa-share" aria-hidden="true"></i>
+            <li class="add-to-do type-list">
+                <form action="#"  id="form">
+                  <input type="text" class="text" placeholder="Add to your list..." id="new-todo" required>
+                  <button class="add-button" type="submit"><i class="add-icon fa fa-share" id="add"></i></button>
+                </form>
             </li>
             <li class="list-section"></li>
-            <li class="clear-completed">
+            <li id="clear-completed">
                 <button type="button" id="clear">Clear all completed</button>
             </li>
-        </ul>
-    </main>
-    <footer></footer>
+          </ul>
+      </main>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import './style.css';
-import showData from './modules/showData.js';
+import populate from './modules/populateList.js';
+import { getAddedTodos, form } from './modules/newtodo.js';
 
-window.onload = () => {
-  showData();
-};
+populate();
+form.addEventListener('submit', getAddedTodos);
diff --git a/src/modules/data.js b/src/modules/data.js
diff --git a/src/modules/displayData.js b/src/modules/displayData.js
@@ -1,27 +1,63 @@
-import todoData from './data.js';
+import TodoList from './taskClass.js';
 
-export const listTodo = document.querySelector('.list-section');
-const todoContainer = document.createElement('ul');
-todoContainer.className = 'todo-container';
-listTodo.appendChild(todoContainer);
+export const todo = new TodoList();
+const listSection = document.querySelector('.list-section');
 
-const displayTodo = () => {
-  if (todoData.length !== 0) {
-    listTodo.style.display = 'block';
-    todoData.map((data) => {
+export const createTodo = () => {
+  listSection.replaceChildren();
+  if (todo.allTodos.length > 0) {
+    listSection.style.display = 'block';
+    const listContainer = document.createElement('ul');
+    listContainer.className = 'allTodos';
+    listSection.appendChild(listContainer);
+    todo.allTodos.map((a) => {
       const list = document.createElement('li');
       list.className = 'todo';
-      list.innerHTML = `
-       <div>
-         <input type="checkbox" id="checkbox">
-       </div>
-       <p>${data.description}</p></div>
-       <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
-      `;
-      todoContainer.append(list);
+
+      const descrptContainer = document.createElement('div');
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.id = 'checkbox';
+      if (a.completed === true) { checkbox.checked = 'checked'; }
+
+      checkbox.onclick = (e) => {
+        todo.completedTodo(e.target.checked, a.index);
+      };
+
+      descrptContainer.appendChild(checkbox);
+
+      const descrpt = document.createElement('p');
+      descrpt.id = 'task-description';
+      descrpt.textContent = a.description;
+      descrptContainer.appendChild(descrpt);
+      list.appendChild(descrptContainer);
+
+      const dragIcon = document.createElement('i');
+      dragIcon.className = 'fa fa-ellipsis-v';
+      list.appendChild(dragIcon);
+
+      const deleteIcon = document.createElement('i');
+      deleteIcon.className = 'fa fa-times';
+      deleteIcon.id = a.index;
+
+      list.onclick = () => {
+        descrpt.contentEditable = 'true';
+        list.style.backgroundColor = 'greenyellow';
+        list.appendChild(deleteIcon);
+        dragIcon.style.display = 'none';
+        descrpt.addEventListener('keydown', () => {
+          todo.editTodo(descrpt.innerHTML, a.index);
+        });
+      };
+
+      deleteIcon.onclick = () => {
+        todo.deleteTodo(a.index);
+        todo.saveTodo();
+        createTodo();
+      };
+      listContainer.append(list);
       return list;
     });
+    listSection.appendChild(listContainer);
   }
 };
-
-export default displayTodo;
diff --git a/src/modules/newtodo.js b/src/modules/newtodo.js
@@ -0,0 +1,14 @@
+import { createTodo, todo } from './displayData.js';
+
+const form = document.getElementById('form');
+
+const getAddedTodos = () => {
+  const description = document.getElementById('new-todo').value;
+  if (description !== '') {
+    todo.addTodo(description);
+    createTodo();
+    form.reset();
+  }
+};
+
+export { getAddedTodos, form };
diff --git a/src/modules/populateList.js b/src/modules/populateList.js
@@ -0,0 +1,12 @@
+import { createTodo, todo } from './displayData.js';
+
+const populate = () => {
+  if (localStorage.getItem('todos')) {
+    todo.getStoredTodos();
+    createTodo();
+  } else {
+    createTodo();
+  }
+};
+
+export default populate;
diff --git a/src/modules/showData.js b/src/modules/showData.js
diff --git a/src/modules/taskClass.js b/src/modules/taskClass.js
@@ -0,0 +1,50 @@
+export default class TodoList {
+  allTodos = [];
+
+  saveTodo() {
+    const todos = JSON.stringify(this.allTodos);
+    localStorage.setItem('todos', todos);
+  }
+
+  addTodo(description) {
+    const todo = {
+      description,
+      completed: false,
+      index: this.allTodos.length + 1,
+    };
+    this.allTodos.push(todo);
+    this.saveTodo();
+  }
+
+  deleteTodo(indx) {
+    this.allTodos.splice(indx - 1, 1);
+    this.allTodos.forEach((t) => {
+      if (t.index > indx) {
+        t.index -= 1;
+      }
+    });
+    this.saveTodo();
+  }
+
+  getStoredTodos() {
+    this.allTodos = JSON.parse(localStorage.getItem('todos'));
+  }
+
+  editTodo(newValue, index) {
+    this.allTodos[index - 1].description = newValue;
+    this.saveTodo();
+  }
+
+  completedTodo(status, index) {
+    this.allTodos[index - 1].completed = status;
+    this.saveTodo();
+  }
+
+  clearCompleted() {
+    this.allTodos = this.allTodos.filter((b) => b.completed === false);
+    for (let i = 0; i < this.allTodos.length; i += 1) {
+      this.allTodos[i].index = i + 1;
+    }
+    this.saveTodo();
+  }
+}
diff --git a/src/style.css b/src/style.css
@@ -25,10 +25,6 @@ li {
   color: rgb(168, 164, 164);
 }
 
-.todo-container {
-  padding: 0;
-}
-
 .title,
 .type-list {
   display: flex;
@@ -37,6 +33,13 @@ li {
   border-bottom: 1px solid rgb(177, 168, 168);
 }
 
+#form {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .text {
   border: 1px hidden;
   flex-basis: 90%;
@@ -45,6 +48,16 @@ li {
   color: #000;
 }
 
+.add-icon {
+  font-size: 1.2rem;
+}
+
+.add-button {
+  right: 100px;
+  background-color: inherit;
+  border: 1px hidden;
+}
+
 .list-body input[placeholder] {
   font-style: italic;
 }
@@ -73,18 +86,31 @@ li {
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid rgb(177, 168, 168);
-  padding: 1.2rem;
+  padding: 1.7rem;
+  height: 50px;
   flex: 1;
+  margin-left: -60px;
 }
 
-.todo p {
-  flex-basis: 90%;
-  margin: 0;
+.todo:hover {
+  cursor: pointer;
+  background-color: rgb(0, 183, 255);
+}
+
+#task-description {
+  margin: -20px;
   color: #000;
   font-size: 1.5rem;
+  background-color: inherit;
+  margin-left: 5rem;
+  outline: none;
+}
+
+.remove {
+  margin-left: 4rem;
 }
 
-.clear-completed {
+#clear-completed {
   justify-content: center;
   align-items: center;
   margin: auto;