Feature

package.json

@@ -17,6 +17,7 @@
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.25.4",
     "hint": "^6.1.9",
+    "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "stylelint": "^13.13.1",

src/index.js

@@ -1,34 +1,49 @@
 // eslint-disable-next-line no-unused-vars
 import style from './main.css';
-import dragIcon from './drag-icon.svg';
+import populateList from './modules/populateList.js';
+import TaskList from './modules/taskList.js';
+import Task from './modules/task.js';
+import clearList from './modules/clearList.js';
+import updateTaskEvent from './modules/updateTask.js';
+import removeTask from './modules/removeTask.js';
+import { addToLocalStorage, getLocalStorage } from './modules/useLocalStorage.js';
 
-const taskList = [
-  {
-    index: 1,
-    description: 'Wash the dishes',
-    completed: false,
-  },
-  {
-    index: 2,
-    description: 'Complete todo list project',
-    completed: false,
-  },
-];
+const inputTask = document.querySelector('#newtask');
+const element = document.querySelector('#task-list');
+const newList = new TaskList();
 
-const populateList = (list, target) => {
-  list.forEach((item) => {
-    const li = document.createElement('li');
-    const checkbox = document.createElement('input');
-    const p = document.createElement('p');
-    p.innerHTML = item.description;
-    const drag = document.createElement('img');
-    drag.src = dragIcon;
-    checkbox.setAttribute('type', 'checkbox');
-    li.append(checkbox);
-    li.append(p);
-    li.append(drag);
-    target.append(li);
+const delEvent = () => {
+  const del = document.querySelectorAll('.del');
+  del.forEach((item) => {
+    item.addEventListener('click', (event) => {
+      removeTask(newList, event.target.parentElement.id);
+      clearList(element);
+      populateList(newList, element);
+      addToLocalStorage(newList.storage);
+      delEvent();
+    });
   });
 };
-const element = document.querySelector('#task-list');
-populateList(taskList, element);
+
+inputTask.addEventListener('keypress', (event) => {
+  if (event.key === 'Enter' && event.target.value) {
+    event.preventDefault();
+    const index = newList.storage.length + 1;
+    const newTask = new Task(event.target.value, index);
+    newList.addNew(newTask);
+    event.target.value = '';
+    clearList(element);
+    updateTaskEvent(element, newList.storage);
+    populateList(newList, element);
+    delEvent();
+    addToLocalStorage(newList.storage);
+  }
+});
+
+window.onload = () => {
+  if (localStorage.length !== 0) {
+    newList.storage = getLocalStorage();
+    populateList(newList, element);
+    delEvent();
+  }
+};

src/main.css

@@ -23,6 +23,77 @@ ul {
 }
 
 li {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 6fr 1fr 1fr;
+  justify-items: start;
   align-items: center;
+  border-bottom: 1px solid rgb(196, 196, 196);
+}
+
+li img {
+  justify-self: end;
+}
+
+p {
+  width: 100%;
+  height: 40px;
+  margin: 0.5em;
+  padding: 0.5em;
+  line-height: 40px;
+}
+
+p:focus {
+  border: none;
+  outline: none;
+}
+
+li:hover {
+  background-color: rgba(255, 174, 0, 0.397);
+}
+
+#newtask {
+  width: 100%;
+  line-height: 40px;
+  text-indent: 1em;
+  border: none;
+  outline: none;
+  background-color: rgb(238, 238, 238);
+  border-bottom: 2px solid rgba(172, 172, 172, 0.767);
+}
+
+#newtask:focus {
+  border: none;
+  border-bottom: 2px solid rgb(255, 174, 0);
+}
+
+#newtask::placeholder {
+  color: rgba(116, 116, 116, 0.767);
+}
+
+.h-p {
+  width: auto;
+}
+
+.h-con {
+  display: flex;
+}
+
+.h-con > img {
+  margin-left: auto;
+}
+
+.clear {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  line-height: 40px;
+}
+
+a {
+  text-decoration: none;
+  color: rgba(116, 116, 116, 0.767);
+}
+
+a:hover {
+  color: rgb(255, 174, 0);
 }

src/modules/clearList.js

@@ -0,0 +1,5 @@
+const clearList = (element) => {
+  element.innerHTML = '';
+};
+
+export default clearList;

src/modules/populateList.js

@@ -0,0 +1,27 @@
+import dragIcon from '../assets/drag-icon.svg';
+import deleteIcon from '../assets/delete-icon.svg';
+
+const populateList = (list, target) => {
+  list.storage.forEach((item) => {
+    const li = document.createElement('li');
+    li.setAttribute('id', item.index);
+    li.setAttribute('class', 'task');
+    const checkbox = document.createElement('input');
+    const p = document.createElement('p');
+    p.setAttribute('contentEditable', 'true');
+    p.innerHTML = item.desc;
+    const del = document.createElement('img');
+    del.src = deleteIcon;
+    del.setAttribute('class', 'del');
+    const drag = document.createElement('img');
+    drag.src = dragIcon;
+    checkbox.setAttribute('type', 'checkbox');
+    li.append(checkbox);
+    li.append(p);
+    li.append(del);
+    li.append(drag);
+    target.append(li);
+  });
+};
+
+export default populateList;

src/modules/removeTask.js

@@ -0,0 +1,6 @@
+const removeTask = (list, ref) => {
+  list.removeItem(ref);
+  list.setIndexes();
+};
+
+export default removeTask;

src/modules/task.js

@@ -0,0 +1,9 @@
+class Task {
+  constructor(desc, index) {
+    this.index = index;
+    this.desc = desc;
+    this.completed = false;
+  }
+}
+
+export default Task;

src/modules/taskList.js

@@ -0,0 +1,23 @@
+class TaskList {
+  constructor() {
+    this.storage = [];
+  }
+
+  addNew(item) {
+    this.storage.push(item);
+  }
+
+  removeItem(ref) {
+    this.storage = this.storage.filter((item) => item.index !== Number(ref));
+  }
+
+  setIndexes() {
+    if (this.storage.length > 0) {
+      this.storage.forEach((item, i) => {
+        item.index = i + 1;
+      });
+    }
+  }
+}
+
+export default TaskList;

src/modules/updateTask.js

@@ -0,0 +1,15 @@
+const updateTaskList = (storage, ref, newValue) => {
+  storage[ref - 1].desc = newValue;
+};
+
+const updateTaskEvent = (element, storage) => {
+  element.addEventListener('keyup', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.target.blur();
+    }
+    updateTaskList(storage, e.target.parentElement.id, e.target.outerText);
+  });
+};
+
+export default updateTaskEvent;

src/modules/useLocalStorage.js

@@ -0,0 +1,7 @@
+const addToLocalStorage = (data) => {
+  localStorage.setItem('data', JSON.stringify(data));
+};
+
+const getLocalStorage = () => JSON.parse(localStorage.getItem('data'));
+
+export { addToLocalStorage, getLocalStorage };

src/temp.html

@@ -12,12 +12,18 @@ <h1>Todo List</h1>
   </header>
   <main>
     <div id="todo-container">
-      <p>Today's To Do</p>
+      <div class="h-con">
+        <p class="h-p">Today's To Do</p>
+        <img src="./assets/reset-icon.svg" alt="">
+      </div>
       <input type="text" id="newtask" name="newtask" placeholder="Add to your list...">
       <ul id="task-list">
 
       </ul>
-      <p>Clear all completed</p>
+
+      <div class="clear">
+        <a href="">Clear all completed</a>
+      </div>
     </div>
 
   </main>

webpack.config.js

@@ -26,6 +26,10 @@ module.exports = {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.html$/,
+        use: ['html-loader'],
+      },
       {
         test: /\.(svg|ico|png|jpg|jpeg|webp|gif)$/,
         type: 'asset/resource',