toDoList(jquery)

**CSS

 body {
            background: #eee;
        }

        .content {
            background: #fff;
            padding: 20px;
            width: 500px;
            margin: 0px auto;
        }

        form {
            display: inline-block;
        }

        form input[type='text'] {
            padding: 3px;
        }

        button {
            display: inline-block;
            color: #fff;
            font-weight: 700;
            border: none;
            background: #227db5;
            padding: 5px 10px;
            cursor: pointer;
        }

        button:hover {
            opacity: 0.8;
        }
        .list-wrap li{
            font-size: 24px;
            padding: 10px;
            border-bottom: 1px solid #eee;
            color: rgba(0,0,0,.5);
        }
        .list-wrap li span {
            float: right;
            cursor: pointer;
            font-size: 24px;
            font-weight: 700;
        }


        .list-wrap li span:hover {
            opacity: 0.5;

        }

        .strike {
            text-decoration: line-through;
        }

 

 

**HTML

    <div class="content">
        <h2>To Do List &times; </h2>

        <form name="toDoList">
            <input type="text" name="listItem">
        </form>

        <button type="button" id="button">ADD</button>

        <ul class="list-wrap"></ul>
    </div>

 

 

**SCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        $('#button').click(function() {
            const addList = $('input[name=listItem]').val();
            //val() : Form Element 의 값을 받아오는데 쓰인다.
            //(주로 input 이나 textarea 정도, form Element 이외의 값은 받아오지 못함.)

            $('ul').append('<li>' + addList + '<span>' + '&times;' + '<span>' + '</li>');
            //append() : 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠 추가

        });


        $('input[name=listItem]').keyup(function(e) {
            //keyup : 키보드에서 손을 뗐을 때 실행
            //keydown : 키보드를 눌렀을 때 실행
            if (e.keyCode == 13) { //엔터
                $('#button').click();
            }
        });


        $('input').focus(function() {
            $(this).val('');
        });

        $(document).on('click', 'li > span', function() {
            $(this).parent().fadeOut(200, function() {
                $(this).remove();
            });
        });

        $('ul').sortable();