哈喽！昨天突发奇想要做一下TodoList小案例，今天就花了一点时间，自己写了一下，案例比较简单，适合给学完前端三件套的朋友当作练习！
先给大家看一下TodoList效果图：
ok，现在我直接把代码给大家，代码我基本都注释了，所以就话不多说。
TodoList.html文件：
<!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">
<link rel="stylesheet" href="./TodoList.css">
<title>TodoList</title>
</head>
<body>
<h1>Kiangkiang · TodoList</h1>
<div id="todolist">
<input type="text" id="new-task" placeholder="Please input the task ">
<button id="add-btn">添加</button>
</div>
<div class="task-listBox">
<ul id="task-list">
<!-- 任务列表 -->
</ul>
</div>
<script>
//JS代码
const newTaskInput = document.getElementById("new-task");//获取新任务输入框
const addBtn = document.getElementById("add-btn");//获取添加按钮
const taskList = document.getElementById("task-list");//获取任务列表
function addTask(){
const task = newTaskInput.value.trim();//获取新任务的值并去除收尾空白
if(task){
//每一条todo清单都是一个任务项li，被ul包含着，然后每个任务项li里面得包含要完成的任务也就是span
const li = document.createElement("li");//创建任务项
const span = document.createElement("span");//创建包含任务的span元素
span.innerText = task;//将获取新任务的值去除收尾空白后将其插入span标签里面
const deleteBtn = document.createElement("button");//创建删除按钮
deleteBtn.innerText = "X";
deleteBtn.classList.add("delete-btn");//给删除按钮添加样式类
deleteBtn.addEventListener("click",() => {//给删除按钮添加事件监听器
li.remove();
});
//将任务和删除按钮添加到任务项（li）中
li.appendChild(span);
li.appendChild(deleteBtn);
taskList.appendChild(li);//将任务项（li）添加到任务列表中
newTaskInput.value = "";//清空任务输入框
}
}
addBtn.addEventListener("click",addTask);//给添加按钮添加事件监听器
newTaskInput.addEventListener("keydown",(event) => {//添加新任务输入框的键盘事件监听器
if(event.key === "Enter"){
addTask();
}
})
</script>
</body>
</html>
TodoList.css文件：
h1{
text-align: center;//将标题居中
}
#todolist{//1.将input输入框和“添加”按钮放在<div id="todolist"></div>盒子里面
width: 275px;//2.设置盒子宽度
height: 46px;//3.设置盒子高度
border: 1px solid #1f1e1e;//给盒子加上边框
margin: 0 auto;//将盒子居中
border-radius: 10%;//给盒子边框设置圆角
}
input{
width: 200px;
height: 26px;
border: none;//将输入框的边框去掉，因为上面的盒子已经设置了边框了
margin-top: 8px;
margin-left: 8px;
}
input:focus {
outline: none;//当你点击输入框时，会聚焦，会默认显示出边框，所以这是去除聚焦时出现的边框
}
button{
width: 44px;
height: 28px;
border-radius: 40%;
background-color: #fff;
box-shadow: 2px 2px 8px 0;//给按钮设置阴影
}
button:hover{
color: pink;
}
.task-listBox{
margin: 0 auto;
width: 20%;
}
ul{
list-style: none;
}
li{
line-height: 40px;
}
span{
padding: 20px;
}
.delete-btn{
margin-right: 10px;
border: none;
float: right;
box-shadow: 0 0 0 0;//将任务列表的按钮的阴影什么都置0，因为它会继承上面button的样式
margin-top: 7px;
margin-right: 40px;
}
ok，完事，其实上面的案例比较简单，就很适合大家练手，然后这个案例还有很多不足的地方，大家可以自行想一想然后修改，这样才有提升，发现问题，解决问题。 也可以自己尝试改一下css样式，制作自己喜欢的样式。
