간단한 To Do List

input태그에 할 일을 작성하고 전송버튼을 누르면 input태그의 값이 할 일의 리스트로 넘어가고,
할 일의 리스트 중 끝버튼을 누르면 끝낸일의 리스트로 넘어가도록 만들었다.

    <input type="text" class="text">
    <button class="submit">전송</button>

	<h1>할일</h1>
    <ul class="list1">
        <li>
            <span class="work">벨로그 작성</span>
            <button class="end">끝</button>
            <button class="del">삭제</button>
        </li>
        <li>
            <span class="work">블로그 글쓰기</span>
            <button class="end">끝</button>
            <button class="del">삭제</button>
        </li>
    </ul>

    <h1>끝낸일</h1>
    <ul class="list2">
        <li>
            <span class="work">자바스크립트 인강</span>
            <button class="del">삭제</button>
        </li>
    </ul>

    $(".submit").click(function(){

        keyword = $('.text').val();
		// keyword = input태그의 값
        
        if(keyword){
            
            html=`<li>
            <span class="work">${keyword}</span>
            <button class="end">끝</button>
            <button class="del">삭제</button>
            </li>`;
            $(".list1").append(html);
            $(".text").val('').focus();
        }
        // html은 리스트를 변수로 저장하고
        //.submit 버튼을 클릭했을 때 .list1의 뒤로 html을 보낸다.
        //이후 input태그의 값을 ''빈 칸으로 두고 포커스를 돌려놓는다.
    })


    $(document).on('click','.del',function(){
        $(this).parent().remove();
    })
	//.del버튼을 클릭하면 부모요소의 li를 삭제하고
    $(document).on('click','.end',function(){
        //.end를 클릭했을 때
        keyword = $(this).siblings('.work').text();
		//keyword = .del의 형제요소인 .work의 text값
        
        html = ` <li>
        <span class="work">${keyword}</span>
        <button class="del">삭제</button>
        </li>`
        $('.list2').append(html);
        $(this).parent().remove();
        // .list2 뒤로 변수 html을 보낸다.
		// 이후 부모 요소의 li를 삭제한다.
    })