woooWha
108
2021-07-22 15:09:29
5
137

바닐라JS로 Todo리스트를 거의 다 만들다가 막혔습니다....


Completed를 눌렀을 때 체크표시된 것만 정렬되게하고, 체크안된 것은 Active를 눌렀을 때 나오는 기능을 바닐라JS로 구현하려고 합니다. 현재 배열을 따로 만든 건 없는 로직이라 감이 안잡히는데요. 어떤 방식으로 나아가야 할까요?

현재 코드 상황은 아래와 같습니다.


var todoForm = document.querySelector('.header');
var todoInput = document.querySelector('.new-todo');
var todoUl = document.querySelector('.todo-list');
var todoCompleted = document.querySelector('.completed');



function delTodolist(event){
    const btn = event.target;
    const div = btn.parentNode;
    const li = div.parentNode;
    todoUl.removeChild(li);
    const cleanTask = todolist.filter(function(todo){
        return todo.id !== parseInt(li.id);
    });
    todolist=cleanTask;
    saveTodolist();
}

function saveTodolist(){
    localStorage.setItem(TODOLIST,JSON.stringify(todolist));
}

let todolist = [];

function inputChecked(event){
    const btn = event.target;
    const div = btn.parentNode;
    const li = div.parentNode;
    li.classList.toggle('completed');
}

function paintTodolist(text){
    const li = document.createElement('li');
    const div = document.createElement('div');
    const input = document.createElement('input');
    const label = document.createElement('label');
    const delbtn = document.createElement('button');
    const newId = todolist.length+1;

    li.setAttribute('class',"");
    div.setAttribute("class","view");
    input.setAttribute("class","toggle");
    input.setAttribute("type","checkbox");
    input.addEventListener('click',inputChecked)
    label.innerHTML = text;
    delbtn.setAttribute("class","destroy");
    delbtn.addEventListener("click",delTodolist);
    li.appendChild(div);
    li.id=newId;
    div.appendChild(input);
    div.appendChild(label);
    div.appendChild(delbtn)
    todoUl.appendChild(li);
    const toDoObj = {
        text: text,
        id: newId
    };
    todolist.push(toDoObj);
    saveTodolist();
}


function handleSubmitList(event){
    event.preventDefault();
    const currentValue = todoInput.value;
    saveTodolist(currentValue);
    paintTodolist(currentValue);
    todoInput.value="";
}

function todoAll(){
    alert('안녕')
}



const TODOLIST = "TODOLIST"

function loadtodo(){
    const todoListValue = localStorage.getItem(TODOLIST);
    if(todoListValue !==null){
        const parsedtodoList = JSON.parse(todoListValue);
        parsedtodoList.forEach(function(todo){
            paintTodolist(todo.text);
        });
    }
}


function init(){
    loadtodo();
    todoForm.addEventListener('submit',handleSubmitList);
}

init();


0
  • 답변 5

  • 빠름보
    28
    2021-07-22 15:46:13
    원론적인 이야기지만 이벤트 탈 때 해당 버튼에따라.. 필터를 걸어서 체크된것과 안된것으로 분리하면 되지않을까요..?
  • woooWha
    108
    2021-07-22 15:51:58

    @빠름보

    저도 처음엔 필터를 생각했는데요! 이 리스트 자체가 배열로 형성된 리스트가 아니라... 다른 방법이 없을까 하고 찾고 있어요!

  • howoni123
    1k
    2021-07-22 17:13:35

    li 순회하면서 class completed 인것을 display:none 처리하면 되지 않을까요

  • woooWha
    108
    2021-07-22 18:20:16

    @howoni123

    function checkedList(){
        var filter = Array.prototype.filter,
        checkedList = document.querySelectorAll("input[name=checkBox]"),
        filtered = filter.callcheckedListfunctiontodo ) {
             return todo.checked==true;
        })
        todoUl.appendChild(filtered);
    }

    이런식인 건가요?
  • scissors hand
    165
    2021-07-22 20:38:48 작성 2021-07-22 23:49:31 수정됨

    howoni123 님 답변처럼 하는 방식인데, checkbox의 부모노드 div의 display style을 변경하는 식입니다.

    그래야 label하고 destroy 버튼도 같이 숨겨지고, 나타나고 하니까요.


    아래처럼 filter란 함수를 만드시고요.

          function filter(active, completed) {
            todoList = document.querySelectorAll("input[type=checkBox]")
            todoList.forEach(function (todo) {
              if (!todo.checked) {
                todo.parentNode.style.display = active ? "block" : "none"
              } else {
                todo.parentNode.style.display = completed ? "block" : "none"
    } }) }


    all, active, completed들에 이벤트를 다음처럼 거세요.

            <button onclick="filter(true, true);">All</button>
            <button onclick="filter(true, false);">Active</button>
            <button onclick="filter(false, true);">Completed</button>
    


  • 로그인을 하시면 답변을 등록할 수 있습니다.