JavaScript（四）——实现ToDoList

本篇文章将向大家介绍利用JS实现ToDo部分功能

实现的功能如下：
1、将用户输入的内容添加到任务中。
2、添加的内容可以删除。
3、可以将完成的实现在前面打勾。

思路梳理

1、输入内容点击添加添加到下面
2、点击删除弹出是否确认删除，点击确认删除可以删除此条任务，点击取消可以取消

代码实现

<div class="container">
    <h1 class="header">Todo List</h1>
    <form class="todo-form" id="todoForm">
        <input type="text" class="todo-input" placeholder="Add a new todo" id="todoInput">
        <button type="submit" class="todo-button">Add</button>
    </form>
    <ul class="todo-list" id="todoList"></ul>

</div>

css部分

    <style>
        body {
            background-color: #f6f6f6;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
            color: #3f51b5;
        }

        .todo-form {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .todo-input {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .todo-button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #3f51b5;
            color: #fff;
            cursor: pointer;
        }

        .todo-list {
            list-style: none;
            padding: 0;
        }

        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #e8e8e8;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .todo-item:last-child {
            margin-bottom: 0;
        }

        .todo-item-checkbox {
            margin-right: 10px;
        }

        .todo-item-text {
            flex: 1;
            color: #3f51b5;
            font-weight: bold;
        }

        .todo-item-delete {
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            background-color: #ff6b6b;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .todo-item-delete:hover {
            background-color: #ff4f4f;
        }
    </style>

初始效果

JS部分

获取复选框、输入框、按钮并赋值方便后续操作

const todoForm = document.getElementById('todoForm')
    const todoList = document.getElementById('todoList')
    const todoInput = document.getElementById('todoInput')

这段代码定义了一个函数 createToDoItem，它接受一个参数 text，表示待办事项的文本内容。函数的作用是创建一个待办事项列表项，并返回该列表项。

首先，通过 document.createElement('li') 创建一个 <li> 元素，表示一个列表项。然后，给这个元素添加一个类名 todo-item，用于样式控制。

接下来，使用innerHTML 创建列表项的 HTML 内容。

最后，将创建好的列表项返回。在调用 createToDoItem 函数时，可以将返回的列表项添加到待办事项列表中。

function createToDoItem(text){
        const li = document.createElement('li')
        li.className = "todo-item"
        li.innerHTML =
                        `
                        <input type="checkbox" class="todo-item-checkbox">
                        <span class="todo-item-text">${text}</span>
                        <button class="todo-item-delete">Delete</button>
                        `
    return li
    }

这段代码实现了待办事项列表的添加和删除功能。

首先，通过 todoForm.onclick 给待办事项表单绑定了一个点击事件。这样就会阻止表单的默认提交行为，然后从输入框中获取用户输入的待办事项文本内容，并调用 createToDoItem 函数创建一个待办事项列表项。如果用户没有输入任何内容，则直接返回，不进行任何操作。创建好的列表项插入到待办事项列表 todoList 中，并清空输入框的值。

接着，通过 todoList.onclick 给待办事项列表绑定了一个点击事件处理函数。该处理函数会判断点击的目标元素是否为删除按钮，如果是，则弹出确认对话框，如果用户确认删除，则将该待办事项列表项从待办事项列表中删除。

    todoForm.onclick = function (event) {
        event.preventDefault()
        const  todoText = todoInput.value
        if(!todoText) return
        const li =createToDoItem(todoInput.value.trim())  //trim去掉字符串头尾的空格
        todoList.appendChild(li)  //把生成的li放到ul里面
        todoInput.value=""
    }

    todoList.onclick = function (event){
        if(event.target.className==="todo-item-delete" && confirm('你确定要删除它吗？'))
            event.target.parentNode.remove()
    }

最终效果