Merge pull request #2 from mwenyoa/todo-list-crud

Todo list  Add and remove items

dist/index.html

@@ -12,11 +12,11 @@
         <section class="d-flex cols todo-list">
           <header class="header d-flex s-between">
               <h2>Today's To Do </h2>
-              <span class="material-icons" id="delete-all">autorenew</span>
+              <span class="material-icons" id="refresh-all">autorenew</span>
               <hr>
           </header>
           <form action="#" class="d-flex s-between" id="add-task">
-              <input type="text" name="activity" placeholder="Add your List">
+              <input type="text" name="activity" placeholder="Add your List" id="add-new-task">
               <button type="submit">
                   <span class="material-icons">keyboard_return</span>
               </button>

src/index.html

@@ -12,11 +12,11 @@
         <section class="d-flex cols todo-list">
           <header class="header d-flex s-between">
               <h2>Today's To Do </h2>
-              <span class="material-icons" id="delete-all">autorenew</span>
+              <span class="material-icons" id="refresh-all">autorenew</span>
               <hr>
           </header>
           <form action="#" class="d-flex s-between" id="add-task">
-              <input type="text" name="activity" placeholder="Add your List">
+              <input type="text" name="activity" placeholder="Add your List" id="add-new-task">
               <button type="submit">
                   <span class="material-icons">keyboard_return</span>
               </button>

src/index.js

@@ -1,49 +1,13 @@
 import './style.css';
-// select todo list class
-const toDoList = document.querySelector('#list-items');
-const tasksArray = [
-  {
-    description: 'Attend morning session',
-    completed: false,
-    index: 0,
-  },
-  {
-    description: 'Install webpack',
-    completed: false,
-    index: 1,
-  },
-  {
-    description: 'Practice coding challenges',
-    completed: false,
-    index: 2,
-  },
-  {
-    description: 'Watch Wrestling',
-    completed: false,
-    index: 3,
-  },
-  {
-    description: 'Structure Todo List',
-    completed: false,
-    index: 4,
-  },
-];
+import Tasker from './tasks.js';
 
-const sortedTasks = tasksArray.sort((x, y) => x.index - y.index);
-
-const populateTodo = () => {
-  const li = [];
-  const template = [];
-  for (let j = 0; j < sortedTasks.length; j += 1) {
-    li[j] = document.createElement('li');
-    li[j].className = 'list-item';
-    template[j] = `
-          <span class="task-item"><input type="checkbox"  id="task-check" name="task-check"><label for="task-check" class="m-left">${sortedTasks[j].description}</label></span>
-          <a href="#" class="task-option"><span class="material-icons">more_vert</span></a>
-        `;
-    li[j].innerHTML = template[j];
-    toDoList.appendChild(li[j]);
-  }
-};
-
-window.addEventListener('DOMCotentLoaded', populateTodo());
+// tasker object
+const todoList = new Tasker();
+todoList.populateTodo();
+// Add new Activity
+document.querySelector('#add-task').addEventListener('submit', (e) => {
+  e.preventDefault();
+  const action = e.target.elements.activity.value;
+  todoList.add(action);
+  e.target.reset();
+});

src/style.css

@@ -130,7 +130,7 @@ form button {
 }
 
 .list-item .material-icons.done {
-  color: rgb(46, 138, 230);
+  color: rgb(10, 117, 224);
 }
 
 .list-item p.completed {

src/tasks.js

@@ -0,0 +1,120 @@
+export default class Tasker {
+  constructor() {
+    this.tasksArray = JSON.parse(localStorage.getItem('tasks')) || [];
+    this.populateTodo();
+  }
+
+  populateTodo() {
+    this.save();
+    const listSec = document.querySelector('#list-items');
+    listSec.innerHTML = '';
+    this.tasksArray.forEach((taskItem) => {
+      let activityItem = `
+        <li class="d-flex s-between list-item" id="item-data-${taskItem.index}">`;
+      if (taskItem.completed) {
+        activityItem += `
+                <span class="material-icons done update-status" data-id="${taskItem.index}">
+                  done
+                </span>
+                <p contenteditable="true" class="completed activity" data-id="${taskItem.index}">
+                  ${taskItem.description}
+                </p>
+                `;
+      } else {
+        activityItem += `
+            <span class="material-icons  update-status"  data-id="${taskItem.index}">
+              check_box_outline_blank
+            </span>
+            <p contenteditable="true" class="activity" data-id="${taskItem.index}">
+              ${taskItem.description}
+            </p>`;
+      }
+      activityItem += `
+          <span class="material-icons delete-activity"  data-id="${taskItem.index}">
+            delete
+          </span>
+        </li>
+      `;
+      listSec.innerHTML += activityItem;
+    });
+    this.Actions();
+  }
+
+  // Add activity
+  add(actv) {
+    if (actv || actv === 0) {
+      const newActivity = {
+        description: actv,
+        completed: false,
+        index: this.tasksArray.length,
+      };
+      this.tasksArray.push(newActivity);
+      this.populateTodo();
+    }
+  }
+
+  // Add logic to delete item
+  delete(activityIndex) {
+    if (activityIndex) {
+      this.tasksArray.splice((activityIndex - 1), 1);
+      this.populateTodo();
+    }
+  }
+
+  // update  completed  task status
+  updateActivityStatus(activityIndex) {
+    if (activityIndex !== undefined) {
+      if (this.tasksArray[activityIndex - 1].completed === true) {
+        this.tasksArray[activityIndex - 1].completed = false;
+      } else {
+        this.tasksArray[activityIndex - 1].completed = true;
+      }
+    }
+    this.populateTodo();
+  }
+
+  // Save data to local storage
+  save() {
+    this.tasksArray.forEach((task, index) => {
+      this.tasksArray[index].index = (index + 1);
+    });
+
+    this.tasksArray.sort((x, y) => x.index - y.index);
+
+    localStorage.setItem('tasks', JSON.stringify(this.tasksArray));
+  }
+
+  // edit task description
+  edit(index, description) {
+    this.tasksArray[index - 1].description = description;
+    this.save();
+  }
+
+  // function to listen to activity
+  Actions() {
+    const updateStatusBtns = document.querySelectorAll('.update-status');
+    if (updateStatusBtns !== null) {
+      updateStatusBtns.forEach((item) => {
+        item.addEventListener('click', () => this.updateActivityStatus(item.getAttribute('data-id')));
+      });
+      // Delete Activity
+      const deleteBtns = document.querySelectorAll('.delete-activity');
+      if (deleteBtns) {
+        deleteBtns.forEach((activity) => {
+          activity.addEventListener('click', () => this.delete(activity.getAttribute('data-id')));
+        });
+      }
+      // edit activity
+      const activities = document.querySelectorAll('.activity');
+      if (activities) {
+        activities.forEach((activity) => {
+          activity.addEventListener('input', (e) => {
+            const description = e.target.innerText;
+            const index = e.target.getAttribute('data-id');
+            this.edit(index, description);
+          });
+        });
+      }
+    }
+  }
+}