2. Task List (JavaScript)

 

 

 

 

1. 각 요소 DOM으로

const form = document.querySelector("#task-form");
const taskInput = document.querySelector("#task");
const filter = document.querySelector("#filter");
const taskList = document.querySelector(".collection");
const clearBtn = document.querySelector(".clear-tasks");

 

 

2. 

loadEventListners();

function loadEventListners() {
  form.addEventListener("submit", addTask);
  taskList.addEventListener("click", removeTask);
  clearBtn.addEventListener("click", clearTasks);
  filter.addEventListener("keydown", filterTasks);
  document.addEventListener("DOMContentLoaded", getTasks);
}

 

3. addTask 함수

 

function addTask(e) {
  if (taskInput.value === "") {
    alert("Add a task");
  }

  const li = document.createElement("li");
  li.className = "collection-item";
  li.appendChild(document.createTextNode(taskInput.value));

  const link = document.createElement("a");
  link.className = "delete-item secondary-content";
  link.innerHTML = '<i class="fa fa-remove"></i>';

  li.appendChild(link);
  taskList.appendChild(li);
  
  taskInput.value = "";

  e.preventDefault();
}

 

 

우선 input창이 비었는지 아닌지 확인. 비어있으면 alert 띄운다.

-> 새로 입력할 task를 위해 , li를 만들고 input창에 입력된 값을 넣어주기

-> task 삭제버튼 만들어주기

-> task 삭제버튼 li에 넣어주기

-> taskList에 li 넣어주기

-> input창 비우기

 

 

 

 

4. removeTask 함수

 

function removeTask(e) {
  if (e.target.parentElement.classList.contains("delete-item")) {
    if (confirm("Are you sure?")) {
      e.target.parentElement.parentElement.remove();
    }
  }
}

x버튼의 parentElement 즉, link에 delete-item이 포함되어 있으면

진짜 지울거냐고 물어보고

x버튼의 parentElement(link)의 parentElement(li)를 지운다.

 

 

 

 

 

5. clearTasks

function clearTasks(e) {
  while (taskList.firstChild) {
    taskList.removeChild(taskList.firstChild);
  }
}

taskList의 firstChild가 존재하면 taskList에서 taskList의 firstChild를 지운다.

firstChild가 사라질 때까지, 즉 모든 task가 다 없어질 때까지

 

 

 

 

6. filterTasks

function filterTasks(e) {
  /* const text = e.target;
  console.log(text);
  이렇게 하면 input 전부 다 선택됨
  */

  const text = e.target.value.toLowerCase();
  //console.log(text);

  document.querySelectorAll(".collection-item").forEach(function (task) {
    //여기서 들어오는 task는 li 전체이기 때문에 그냥 task를 이용해서 text와 비교할 수 없다.
    const item = task.firstChild.textContent.toLowerCase();

    if (item.indexOf(text) != -1) {
      task.style.display = "block";
    } else {
      task.style.display = "none";
    }
  });
}

filter창에 들어온 값을 LowerCase로 바꿔준다.

ul 속 li들을 forEach로 돌린다.

그냥 li와 비교하면 안되고 li의 첫번째 child인 textNode의 textContent를 LowerCase로 바꾸고

text를 찾아나선다.

있으면 즉,-1이 아니면, block으로 지정해서 화면에 나오게

없으면 none으로 지정해서 화면에 나오지 않게.

 

 

 

----------------------------------------------------LocalStorage 이용

 

7. tasks LocalStorage에도 저장하기

function storeTaskInLocalStorage(task) {
  let tasks;
  if (localStorage.getItem("tasks") === null) {
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem("tasks"));
  }
  tasks.push(task);

  localStorage.setItem("tasks", JSON.stringify(tasks));
}

 

 

그리고 storeTaskInLocalStorage 함수를 addTask 함수에 추가해줄 것.

 

 

 

 

8. LocalStorage에서 task 지우기

function removeTaskFromLocalStorage(task) {
  const taskItem = task.firstChild.textContent;

  let tasks;
  if (localStorage.getItem("tasks") === null) {
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem("tasks"));
  }

  tasks.forEach(function (item, index) {
    if (item === taskItem) {
      tasks.splice(index, 1);
    }
  });

  localStorage.setItem("tasks", JSON.stringify(tasks));
}

removeTask함수에 추가해줄 것

 

 

 

 

9. LocalStorage에서 tasks 한번에 clear하기

function clearTasksFromLocalStorage() {
  localStorage.clear();
}

clearTasks 함수에 추가하기

 

 

 

 

10. 리로드 했을 때, 화면에 taskList 다 뜨도록 getTasks함수

function getTasks() {
  let tasks;
  if (localStorage.getItem("tasks") === null) {
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem("tasks"));
  }

  tasks.forEach(function (task) {
    const li = document.createElement("li");
    li.className = "collection-item";
    li.appendChild(document.createTextNode(task));

    const link = document.createElement("a");
    link.className = "delete-item secondary-content";
    link.innerHTML = '<i class="fa fa-remove"></i>';

    li.appendChild(link);
    taskList.appendChild(li);
  });
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

----------------------------------------------------------------------------------------

*

addTask에서 link는 a태그로

link.innerHTML 쓴 것

 

 

 

 

*

removeTasks에서 taskList.removeChild()쓸 것(그냥 remove써서 이상해짐)

 

 

 

 

*

filterTasks에서 collection-item 모아서 forEach 돌려야지!!! 왜 ul을 모았는지...

 

 

 

*

removeTask함수에 removeTaskFromLocalStorage 넣어줄 때 parameter로

e.target.parentElement.parentElement해서 li를 넘겨줄 것.

그리고 removeTaskFromLocalStorage에서

그 li의 firstChild의 textContent를 받을 수 있도록.

 

 

 

 

*

LS 청소 간단

localStorage.clear();