JS(Vanilla)
배울 내용

응용
전체코드 1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        #wrapper {
            width: 600px;
            margin: 0 auto;
        }

        h2 {
            text-align: center;
        }

        form {
            background-color: #007acc;
            padding: 30px 40px;
            color: white;
            text-align: center;
        }

        input {
            border: none;
            width: 440px;
            padding: 10px;
            float: left;
            font-size: 16px;
        }

        .addBtn {
            padding: 10px;
            width: 50px;
            border: none;
            background-color: #fff;
            color: #555;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3;
        }

        form::after {
            content: "";
            display: table;
            clear: both;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li {
            cursor: pointer;
            position: relative;
            padding: 12px 8px 12px 40px;
            background: #eee;
            font-size: 18px;
            transition: 0.2s;
        }

        ul li:nth-child(odd) {
            background-color: #f9f9f9;
        }

        ul li:hover {
            background-color: #ddd;
        }

        .close {
            position: absolute;
            right: 0;
            top: 0;
            padding: 12px 16px;
            border: none;
            background: rgba(255, 255, 255, 0)
        }

        .close:hover {
            background-color: #007acc;
            color: white;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <h2>오늘 해야할 일</h2>
        <form>
            <input type="text" id="item">
            <button type="button" id='add' class="addBtn">추가</button>
        </form>
        <div id="itemList"></div>
        <br><br><br><br><br><br><br><br><hr><hr><hr><hr><hr><hr><hr>
        <h2>오늘 끝낸일</h2>
        <div id ="doneList"></div>
    </div>

    <script>
        var itemList = [];
        var done = [];
        var addBtn = document.querySelector('#add');
        addBtn.addEventListener("click", addList);

        function addList() {
            var item = document.querySelector("#item").value;
            if (item != ' ' && item != '') {
                itemList.push(item);
                document.querySelector('#item').value = "";
            }
            showList();
            function showList() {
                var list = "<ul>";
                for (var i = 0; i < itemList.length; i++) {
                    list += "<li>" + itemList[i] + "<span class='close' id = " + i + ">X</span></li>";
                }
                list += '</ul>';
                document.querySelector('#itemList').innerHTML = list;
                var remove = document.querySelectorAll(".close");

                var list = "<ul>";
                for (var i = 0; i < done.length; i++) {
                    list += "<li>" + done[i] + "</li>";
                }
                list += '</ul>';
                document.querySelector("#doneList").innerHTML = list;

                for (var i = 0; i < remove.length; i++) {
                    remove[i].addEventListener("click", removeList);
                }

            }

            function removeList() {
                var id = this.getAttribute("id");
                done.push(itemList[id]);
                console.log(id);
                itemList.splice(id, 1);
                showList();
            }
        }
    </script>
</body>

</html>
clearTimeout(time)

실행중인 setTimeout()을 강제로 종료한다.