用jQuery写todolist

<div>
        <div class="menu">
            <div class="item">
                <input type="text" value="" placeholder="请输入内容" class="inp1">
                <span class="btn1">增加</span>
            </div>
            <p>未完成事项</p>
            <div class="item1"></div>
            <P>完成事项</P>
            <div class="item2"></div>
        </div>
    </div>
    <script src="jquery-3.5.0.min.js"></script>
    <script>
        let inp1 = $(".inp1")
        let btn1 = $(".btn1");
        let item1 = $(".item1");
        let item2 = $(".item2");
        $(function () {
            let todoList = JSON.parse(localStorage.getItem("todoList"));
            if (!todoList) {
                todoList = [];
            }
            todoList.forEach(item => {
                let newLi = $(`<div class='unfinished'><span>${item}</span> <button class='btn2'>删除</button>
                <button class='btn3'>完成</button></div>`)
                item1.append(newLi)
            });

            let doneList = JSON.parse(localStorage.getItem("doneList"))
            if (!doneList) {
                doneList = [];
            }
            doneList.forEach(item => {
                let newLi2 = $(
                    `<div class="finished"><span>${item}</span><button class='btn4'>删除</button></div>`
                );
                item2.append(newLi2);
            })

            btn1.on("click", function (e) {
                let unfinishInp1 = inp1.val().trim();
                if (unfinishInp1 == "") {
                    alert("请输入代办事项");
                    inp1.val("")
                    return;
                }
                if (todoList.indexOf(unfinishInp1) >= 0) {
                    alert("请输入不同的内容");
                    inp1.val("")
                    return
                }

                todoList.push(unfinishInp1);
                localStorage.setItem("todoList", JSON.stringify(todoList));

                let newLi = $(`<div class='unfinished'><span>${unfinishInp1}</span> <button class='btn2'>删除</button>
                <button class='btn3'>完成</button></div>`)
                item1.append(newLi)
                inp1.val("");
            });

            item1.on("click", ".btn2", function (e) {
                let str3 = $(e.target).parent().find("span").val().trim();
                let index1 = todoList.indexOf(str3);
                todoList.splice(index1, 1);
                $(e.target).parent().remove();
                localStorage.setItem("todoList", JSON.stringify(todoList));
            })

            item1.on("click", ".btn3", function (e) {
                let str = $(e.target).parent().find("span").html();
                let newLi2 = $(
                    `<div class="finished"><span>${str}</span><button class='btn4'>删除</button></div>`
                );
                let index = todoList.indexOf(str);
                todoList.splice(index, 1);
                localStorage.setItem("todoList", JSON.stringify(todoList));

                doneList.push(str);
                localStorage.setItem("doneList", JSON.stringify(doneList));
                $(e.target).parent().remove();
                item2.append(newLi2);
            })

            item2.on("click", ".btn4", function (e) {
                let str1 = $(e.target).parent().find("span").val().trim();
                let index2 = doneList.indexOf(str1);
                doneList.splice(index2, 1);
                $(e.target).parent().remove();
                localStorage.setItem("doneList", JSON.stringify(doneList));
            })

        })
    </script>

样式

<style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .item {
            background-color: antiquewhite;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .item .inp1 {
            height: 30px;
            line-height: 30px;
        }

        .item .btn1 {
            height: 30px;
            width: 60px;
            line-height: 30px;
            text-align: center;
            background-color: yellow;
            cursor: pointer;
            border-radius: 10%;
            color: blue;
        }

        .menu {
            width: 300px;
            margin: 0 auto;
            background-color: aqua;
        }

        .unfinished {
            height: 40px;
            line-height: 40px;
        }

        .unfinished span {
            float: left;

        }

        .unfinished .btn2,
        .unfinished .btn3 {
            float: right;
            margin-top: 10px;
        }

        .finished {
            height: 40px;
            line-height: 40px;
        }

        .finished .btn4 {
            float: right;
            margin-top: 10px;
        }

        .finished span {
            text-decoration: line-through;
        }
    </style>