Merge pull request #3 from emiliazm/interactive-list

Interactive list

src/methods.js

@@ -1,7 +1,20 @@
 let tasks = [];
+let lastId = localStorage.getItem('lastId') || 0;
+
+export const getLastId = () => lastId;
+
+export const setLastId = (id) => {
+  lastId = id;
+  localStorage.setItem('lastId', lastId);
+};
 
 export const loadTasks = () => {
   tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+  const sTasks = [...tasks];
+  const uTaskId = sTasks.sort((a, b) => b.id - a.id)[0]?.id || 0;
+  if (uTaskId > lastId) {
+    setLastId(uTaskId);
+  }
 };
 
 export const getTasks = () => tasks;
@@ -28,4 +41,16 @@ export const deleteTask = (taskId) => {
     tasks[i].index = i + 1;
   });
   localStorage.setItem('tasks', JSON.stringify(tasks));
+};
+
+export const checkStatus = (taskId) => {
+  const task = tasks.find((e) => e.id === Number(taskId));
+  task.isCompleted = !task.isCompleted;
+  localStorage.setItem('tasks', JSON.stringify(tasks));
+};
+
+export const clearAllBtn = () => {
+  const cleared = tasks.filter((task) => !task.isCompleted);
+  tasks = cleared.map((task, i) => ({ ...task, index: i + 1 }));
+  localStorage.setItem('tasks', JSON.stringify(tasks));
 };

src/style.css

@@ -116,3 +116,8 @@ li {
 .list-items.erasing .dots {
   display: none;
 }
+
+/* check status */
+.completed {
+  text-decoration: line-through;
+}

src/ui.js

@@ -1,5 +1,6 @@
 import {
-  getTasks, updateTask, deleteTask, loadTasks, addTask,
+  getTasks, updateTask, deleteTask, loadTasks,
+  addTask, checkStatus, getLastId, setLastId, clearAllBtn,
 } from './methods.js';
 
 // edit item
@@ -36,13 +37,40 @@ const uiRemoveTask = (e) => {
   });
 };
 
+// status
+const uiCheckStatus = (e) => {
+  const { taskid } = e.target.parentNode.dataset;
+  checkStatus(taskid);
+
+  const liElement = e.target.parentNode;
+  liElement.classList.toggle('completed', !liElement.classList.contains('completed'));
+};
+
+// Clear completed
+const uiClearCompleted = () => {
+  const ulElement = document.querySelector('.check-list');
+  const liElements = ulElement.childNodes;
+  let i = 0;
+  while (i < liElements.length) {
+    const liElement = liElements[i];
+    const cbElement = liElement.querySelector('.check-box');
+    if (cbElement.checked) {
+      liElement.remove();
+    } else {
+      i += 1;
+      liElement.dataset.taskindex = i;
+    }
+  }
+  clearAllBtn();
+};
+
 // create item
 const uiCreateTask = (task) => {
   const tasks = getTasks();
   tasks.sort((a, b) => a.index - b.index);
   const ulList = document.querySelector('.check-list');
   const insideUl = `
-  <input id="ck-${task.id}" type="checkbox" name="checkBox">
+  <input id="ck-${task.id}" class="check-box" type="checkbox" name="checkBox">
   <label class="lb-task" id="lb-${task.id}" for="ta-${task.id}">${task.description}</label>
   <textarea id="ta-${task.id}" class="ta-task" name="edit-task">${task.description}</textarea>
   <span class="dots material-symbols-outlined">more_vert</span>
@@ -51,12 +79,18 @@ const uiCreateTask = (task) => {
 
   const liToTasks = document.createElement('li');
   liToTasks.setAttribute('class', 'list-items');
+  if (task.isCompleted) {
+    liToTasks.setAttribute('class', 'completed');
+  }
   liToTasks.setAttribute('data-taskid', `${task.id}`);
   liToTasks.setAttribute('data-taskindex', `${task.index}`);
   liToTasks.innerHTML = insideUl;
   liToTasks.querySelector('.lb-task').onclick = uiClickLabel;
   liToTasks.querySelector('.ta-task').onblur = uiBlurTextArea;
   liToTasks.querySelector('.trash').onclick = uiRemoveTask;
+  const cbElement = liToTasks.querySelector('.check-box');
+  cbElement.checked = task.isCompleted;
+  cbElement.onclick = uiCheckStatus;
   ulList.appendChild(liToTasks);
 };
 
@@ -71,7 +105,8 @@ const uiAdd = (e) => {
   if (inputValue !== '') {
     const tasks = getTasks();
     const indexId = tasks.length + 1;
-    const id = tasks.length + 1;
+    const id = getLastId() + 1;
+    setLastId(id);
     const task = {
       description: inputValue,
       isCompleted: false,
@@ -94,4 +129,5 @@ export default function setup() {
   loadTasks();
   displayTasks();
   todoForm.addEventListener('submit', uiAdd);
+  document.querySelector('.btn').addEventListener('click', () => uiClearCompleted());
 }