6. To do list 만들기

 

1. html과 css 작성

    <div id="maindiv">
        <h1>To do List</h1>
        <form action="get" id="inputForm" autocomplete="off">
            <input type="text" id="inputText">
            <input type="submit" id="inputSubmit">
        </form>
        <ul id="listUl">
        </ul>
    </div>

form으로 감싼 텍스트input과 submit버튼을 만들어 주고

그 아래에는 submit으로 넘긴 내용을 담을 ul을 만들어 주면 html설정은 끝난다.

그리고 css 설정을 해주면 아래와 같은 큰 틀이 완성된다.

이제 입력하는 값을 아래에 리스트 형태로 추가할 수 있도록 자바스크립트를 이용해 설정해주면 된다.

 

 

 

 

2. javascript

투두리스트를 만들 때 필요한 기능을 크게 나누자면 다음과 같다.

1. 인풋에 입력한 텍스트를 아래에 목록으로 화면에 띄워주는 기능 

2. 텍스트 목록을 변경할 수 있도록 해주는 기능 

3. 텍스트 목록을 삭제할 수 있도록 해주는 기능 

각각을 함수에 담아 실행했다.

 

2-0. 기본설정

document.addEventListener('DOMContentLoaded', init); //head에서 불러온 js파일 정상작동하도록
function init() {
    // querySelector로 필요한 html요소 가져오기
    const submitElement = document.querySelector('#inputSubmit');
    const formElement = document.querySelector('#inputForm');
    const inputElement = document.querySelector('#inputText');
    const ulElement = document.querySelector('#listUl');
    
    // createElement로 입력한 텍스트를 담을 html요소 새로 만들기
    const liElement = document.createElement('li');
    const spanElement = document.createElement('span');
    const span2Element = document.createElement('span');
    
    // 수정에 필요한 flag 만들어 두기 (default : true)
    let updateFlag = 1;
    
    // form엘리먼트에 submit시 이벤트 추가하기
    formElement.addEventListener('submit', submitHandler);

자바스크립트 조작 시 필요한 엘리먼트들을 모두 객체에 담았다. 

그리고 form을 submit시 일어날 이벤트를 추가했다.

❗️아래의 2-1부터 2-3까지의 콜백함수는 모두 init() 내에 작성해야한다.

 

 

2-1. submit 이벤트 콜백함수

    function submitHandler(e) {
        //submit 시 페이지 이동하는 default 제거
        e.preventDefault();

        //인풋으로 입력한 텍스트를 html요소 안에 담기
        spanElement.innerHTML = inputElement.value;
        inputElement.value = ""; // 담은 뒤 인풋박스 초기화
        span2Element.innerHTML = "X";
        span2Element.setAttribute("class", "deleteIcon")

        //HTML 정렬하기
        liElement.append(spanElement);
        liElement.append(span2Element);
        ulElement.append(liElement);
        /*  
            <ul>
                <li> //liElement
                    <span></span> //spanElement
                    <span></span> //span2Element
                </li>
            </ul>
        */


        //수정 이벤트 추가
        spanElement.addEventListener('click', updateHandler)
        
        //삭제 이벤트 추가
        span2Element.addEventListener('click', removeHandler)
    }

form태그를 submit 하게 되면 자동으로 페이지가 새로고침 된다. 이를 방지하기 위해 preventDefault를 해주고

인풋에 입력한 텍스트(value)를 innerHTML을 이용해 엘리먼트에 담는다.

append를 이용해 기존 html요소에 삽입해주면 <ul>엘리먼트의 아래에 <li>엘리먼트가 생성되며 화면에 나타나게 된다.

submit 시에 생성되는 span, span2 엘리먼트에 각각 수정과 삭제 이벤트를 추가해준다.

 

 

2-2. update 이벤트 콜백함수 🔥

수정 시에는 크게 두가지로 나눠진다.

1) 기존의 span엘리먼트 안에 input엘리먼트를 만들고 값을 새로 입력할 수 있게하는 동작 (updateHandler)

2) 새로 입력 후 엔터를 했을 때 인풋박스가 사라지고 기존의 span에 새 텍스트를 담는 동작 (keypressHandler)

    function updateHandler(e) {
        //input을 클릭하면 계속 updateHandler가 발동되는 문제
        //이를 해결하기 위해 최초 클릭 이후 flag를 false로 만들어준다.
        if (updateFlag) { updateFlag = false }
        else { return }
        

        //content라는 저장공간을 만들어 기존의 내용을 저장해둔 뒤 화면에서 지운다.
        let content = e.target.innerHTML //메모리에 기존의 내용 저장공간 만들고 저장
        e.target.innerHTML = '' //내용 지우기

        //새로운 input엘리먼트를 생성해 span의 하위에 추가한다.
        const inputElement = document.createElement('input')
        inputElement.value = content; //input의 초기값은 기존의 텍스트
        inputElement.setAttribute('class', 'newinput');
        e.target.append(inputElement)

        //키보드로 수정 시 발동되는 이벤트
        inputElement.addEventListener('keypress', keypressHandler)
    }



    function keypressHandler(e) {
        console.log(e.keyCode) // 누른 키 값을 알 수 있음. enter = 13

        if (e.keyCode !== 13) { return } //엔터를 누르면 함수 끝냄

        const content = e.target.value; //content에 새로 입력한 텍스트를 담음
        let node = e.target.parentNode; //input의 부모요소 = span
        node.innerHTML = content; //span에 기존의 값(input엘리먼트) 대신 content를 담음

        updateFlag = true; //다시 수정이 가능하도록 flag를 true로 변경해준다.
    }

 

 

2-3. delete 이벤트 콜백함수

    function removeHandler(e) {
        e.target.parentNode.remove();
    }

submitHandler() 내에서 설정한 removeHandler의 타겟은 li 하위의 span2이므로 그 상위항목(parentNode)인 li를 삭제해야 모든 내용이 사라진다.