实现你的个性化Todo-List前言在这个快节奏的时代，许多人每天都面临着无数的任务和待办事项，为保证每天的高效性，于

前言

在这个快节奏的时代，许多人每天都面临着无数的任务和待办事项，为保证每天的高效性，于是我们需要一个待办事项列表——Todo-List,来帮助我们管理时间和任务。

实现效果

css小知识点：

*{}定义了一个全局样式，移除了所有HTML元素的默认内边距和外边距，便于在不同浏览器中获得一致的布局。
使用Flexbox布局：使用justify-content: center; align-items: center;属性用于水平和垂直居中元素。
height: 100vh让<body>的高度占据整个窗口的高度。
linear-gradient创建了一个渐变式背景。
使用伪类选择器.item:nth-child(1)选取了第一个<li>元素。

HTML

<div id="app" class="container">是页面的主要内容容器。
<div class="input-group">包含一个标签、输入框和一个按钮，用于当用户输入新的待办事项时并且提交。
<div class="list">用于展示待办事项列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app" class="container">
        <h2 class="title">Todo List</h2>
        <div class="input-group">
            <div class="label">待办事项</div>
            <input type="text" class="content" id="newTodo">
            <button class="btn">新增</button>
        </div>

        <div class="list"> 
            <!-- ul>li*2{$}-->
            <ul id="todo-list">
               
            </ul>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

CSS

/* html{
    height: 100%;
} */
*{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100%; */
    height: 100vh;
    
}
.container{
    width: 400px;
    height: 400px;
    background: linear-gradient(#da4453,#89216b);
}
.title{
    text-align: center;
    margin: 10px;
}
.input-group{
    display: flex;
}
.label{
   /* 上右下左 */
   padding: 5px 10px;
}
.btn{
   padding: 5px 10px;
   margin-left: 10px;
}
.content{
    flex: 1;
}
.item:nth-child(1){
    margin-top: 20px;
}
.item{
    border-bottom: 1px solid #eee;
}
.flex{
    display: flex;
    width: 90%;
    /* m0-a */
    margin: 0 auto;
    align-items: center;
}
.item-check{
    margin-right: 20px;
}
.item-content{
    flex: 13;
}
.close{
  width: 30px;
  height: 30px;
  border: 1px solid #aaa;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
}

JS

var todoData = [];

var addTodo = document.querySelector('.btn');//按钮
var todoList = document.getElementById('todo-list');//获取ul
var close = document.querySelector('.close');//关闭按钮

//新增按钮
function addNewTodo(){
  //获取input的内容
  if (document.getElementById('newTodo').value.trim() != '') {
     todoData.push({
        id:Math.floor(Date.now()),//时间戳
        title:document.getElementById('newTodo').value,
        completed:true
     });

     //渲染新的li
     render();
  }
};

//将todoData中的数据渲染出来
function render(){
    var str = '';

    todoData.forEach(function(item){
       str += `
    <li class="item">
       <div class="flex">
           <input type="checkbox" class="item-check">
           <p class="item-content">${item.title}</p>
           <span class="close">x</span><!-- uusx -->
       </div>
    </li>
       `;
    });
    todoList.innerHTML = str;
};
 
 
function deleteTodo(event) {
   if (event.target.classList.contains('close')){
      //首先获取关闭按钮元素
   var close = event.target;
   //获取close兄弟元素的内容
   var content = close.previousElementSibling.textContent;
   //查找要删除元素的下标
   var index = todoData.findIndex(item => item.title === content);
   //删除该指定元素
   todoData.splice(index, 1);
   //渲染li
   render();
   }
}


addTodo.addEventListener('click', addNewTodo);
todoList.addEventListener('click',deleteTodo)

定义一个数组todoData,用于存储待办事项，每个待办事项是一个对象，其包含id,title,completed属性。
使用document.querySelector获取相应的类名，即button按钮。使用document.getElementById来获取<ul>元素。
定义一个函数addNewTodo，用于获取input框里面的内容，当用户点击新增按钮时，这个函数会被触发。该函数会首先检查输入框是否为空，然后将一个对象存入todoData数组中，对象包含当前时间戳id,输入框的值title,默认标记为已完成completed:true,再调用render()函数来刷新待办事项列表。
定义一个render函数，用于渲染待办事项列表，遍历todoData数组，并且构建一个新的HTML字符串来代表待办事项列表，每个待办事项都表示为一个<li>元素，都包含一个复选框、任务标题和一个关闭按钮。
定义一个deleteTodo函数，用于删除待办事项，当用户点击关闭按钮，首先会获取这个按钮的文本内容即title,然后使用findIndex()方法来找到该待办事项在数组中的下标，然后使用splice()方法删除这个待办事项，最后调用render()函数来刷新列表。
为新增按钮绑定点击事件，当用户点击时，执行addNewTodo()函数；为待办事项列表绑定点击事件，当点击关闭按钮时，执行deleteTodo()函数。

结语

快去尝试自己手写一个属于自己的个性化待办事项列表吧。