19. Momentum 만들기 7 - todolist 만들기3

3단계 삭제 버튼을 눌러 로컬스토리지에서 삭제 및 페이지에서 지우기

• 출처: https://youtu.be/dbPOjiG5WJ4 [노마드 코더 Nomad Coders]

1. 버튼 클릭시 화면에서 해당 리스트 삭제
2. 로컬스토리지에서 데이터를 삭제

키워드1. filter()

• 배열의 각요소마다 한번씩 호출이 되며 해당값이 true 인것들을 모아서 반환
• 자세한 내용은 https://tcss.tistory.com/entry/18-Array-APIs?category=865698 참고

  const fruits = ['apple', 'banana', 'orange'];
  let result = fruits.join();
  console.log(result); //결과값: apple,banana,orange

  result = fruits.join('@'); 
  console.log(result); //결과값: apple@banana@orange

전체코드

todo.js

'use strict';

const toDoForm = document.querySelector('.js-toDoForm');
const toDoInput = toDoForm.querySelector('input');
const toDoList = document.querySelector('.js-toDoList');

const TODO_ITEMS = 'toDos';
let toDos = [];

function saveToDoItem(item) {
    const stringItem = JSON.stringify(item);
    localStorage.setItem(TODO_ITEMS, stringItem);
}

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = toDoInput.value;

    displayToDoList(currentValue);
    toDoInput.value = '';
}

function deleteTodo(event) {
    const parent = event.target.parentNode;
    toDoList.removeChild(parent);

    const cleanTodos = toDos.filter(function (toDo) {
        return toDo.id !== parseInt(parent.id);
    });

    toDos = cleanTodos;

    saveToDoItem(toDos);
}

function displayToDoList(item) {
    const li = document.createElement('li');
    const delBtn = document.createElement('button');

    delBtn.innerText = '❌';
    delBtn.addEventListener('click', deleteTodo);

    const span = document.createElement('span');
    const newId = toDos.length + 1;

    span.innerText = item;
    li.appendChild(delBtn);
    li.appendChild(span);
    li.id = newId;
    toDoList.appendChild(li);

    const toDoObj = {
        text: item,
        id: newId
    };

    toDos.push(toDoObj);
    saveToDoItem(toDos);
}

function loadToDoList() {
    const loadToDoItems = localStorage.getItem(TODO_ITEMS);
    if (loadToDoItems !== null) {
        const parseItems = JSON.parse(loadToDoItems);

        parseItems.forEach(function (item) {
            displayToDoList(item.text);
        });
    }
}

function init() {
    loadToDoList();
    toDoForm.addEventListener('submit', handleSubmit);
}

init();