[LogicList]TodoList 프론트 기능

페이지 구성도

기능설명

• TodoList 생성버튼 클릭 시 Script Event
• 일부 return 값 별 분기가 필요하여 async 함수 사용

document.getElementById("todolist__input__button").addEventListener("click", addTodoList);

입력버튼 클릭 시 todoList__body__list Element 내부에 todoList__body__list__content를 생성하여 삽입

async function addTodoList(){
    var todoList = document.getElementById("todoList__body__list");

    var todoContent = document.createElement("span");
//    실제 텍스트를 넣어준다.
    todoContent.className = "todoList__body__list_content";
    const result=await createCustomElement(todoContent);
    console.log("result::",result);
    if(result!=null){

        todoList.appendChild(result);
    }
}

 

todoList__input__text value값을 postTodoList 함수로 전달

-> true 리턴 시 text 값, 완료버튼, 삭제버튼 생성

async function createCustomElement(ele){
    const input = document.getElementById("todoList__input__text");

    if(input==null || input.value==""){
        alert("할 일을 입력해주세요.");
        return null;
    }
    //await으로 받기
    const result=await postTodoList(input);
    if(result){
        //데이터 전송 성공
        const todoContentDiv_text = document.createElement("div");
        todoContentDiv_text.className = "todoList__body__list__item__text";
        const todoContentDiv_button = document.createElement("div");
        todoContentDiv_button.className = "todoList__body__list__item__button";

        const todoContentDivButton_com = createAddBtn(input.value);
        const todoContentDivButton_rem = createRemoveBtn(input.value);

        todoContentDiv_text.appendChild(document.createTextNode(input.value));
        ele.appendChild(todoContentDiv_text);
        todoContentDiv_button.appendChild(todoContentDivButton_com);
        todoContentDiv_button.appendChild(todoContentDivButton_rem);
        ele.appendChild(todoContentDiv_button);
        input.value="";
        return ele;
    }
    return null;

중복 값 체크를 위해 Controller에 input.value 값 전달

async function postTodoList(ele){
    let data = await fetch(location.origin.toString()+"/view/todo", {
        method: 'POST',
         headers: {'Content-Type': 'application/json'},
        cache: 'no-cache',
        body: JSON.stringify({
          "content": ele.value,
          })
    })
    data=await data.json();

    if(data.result!="success"){
      alert(data.result);
      return false;
    }
    return true;
}

 

완료버튼과 삭제버튼 생성 함수

-> 각 버튼 별 onClick 관련 이벤트 리스너 추가

function createRemoveBtn(value){
    const todoContentDivButton_rem = document.createElement("button");
    todoContentDivButton_rem.className = "todoList__body__list__item__button__remove";
    todoContentDivButton_rem.addEventListener("click", (evt)=>{
        removePost(value);
        removeTodoList(evt);
    });
    todoContentDivButton_rem.innerText="삭제";
    todoContentDivButton_rem.setAttribute("content", value);

    return todoContentDivButton_rem;
}
function createAddBtn(value){
    //todoContentDiv     내 button 생성
    const todoContentDivButton_com = document.createElement("button");
    todoContentDivButton_com.className = "todoList__body__list__item__button__complete";
    todoContentDivButton_com.addEventListener("click", (evt)=>{
        completePost(value);
        completeTodoList(evt);
    });
    todoContentDivButton_com.innerText="완료";
    todoContentDivButton_com.setAttribute("content", value);
    return todoContentDivButton_com;
}

 

1. TodoList 완료 버튼 클릭시 -> DataBase 내 관련 TodoList 콘텐츠 추가 후 메모리에서 해당 TodoList 삭제

2. TodoList 삭제 버튼 클릭시 -> 메모리에서 해당 TodoList 삭제

 

function completePost(ele){
    console.log("Comple__ele::",ele);

        fetch('/view/todo_data?param=complete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "content": ele,
            })
        })
            .then(data => console.log(data))
            .catch(err => console.log(err));
}
function removePost(ele){
    console.log("removePost_ELE::",ele);

            fetch('/view/todo_data?param=remove', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    "content": ele
                })
            })
                .then(data => console.log(data))
                .catch(err => console.log(err));
    }

 

실제 삭제요청 된 TodoList 삭제

//TodoList Remove
function removeTodoList(evt){
   evt.currentTarget.parentNode.parentNode.remove();

}
//TodoList Complete
function completeTodoList(evt){
   evt.currentTarget.parentNode.parentNode.remove();

}