本文将一步一步介绍如何实现下面这样的一个任务管理工具
完整代码已上传至码上掘金：
作者正在参加码上掘金编程赛，辛苦各位读者大大给我的码上掘金作品点个赞👍吧
基本结构
首先我们建立 HTML 的基本结构，定义 HTML 文档的类型、语言、头部信息以及页面内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Todo List</title> <style media="screen"> /* CSS 样式 */ </style> <script> /* JavaScript 脚本 */ </script> </head> <body> <!-- HTML 页面内容 --> </body> </html>
HTML
下面这是页面的主要内容，比较简单。包含了一个容器，其中包含一个输入框和一个按钮用于添加任务，并且还有一个空的任务列表，用于在添加任务时显示任务。
<div class="container"> <div id="newtask"> <input type="text" placeholder="要完成的任务.."> <button id="push">添加</button> </div> <div id="tasks"></div> </div>
CSS
重置页面所有元素的内外边距和盒模型大小，并将元素的盒模型设为"border-box"，使得元素的大小不会随着内边距和边框的增加而变化。
*, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; }
设置整个页面的背景图像，高度为视口高度"100vh"。
body{ background: url("https://haiyong.site/img/img-blog.csdnimg.cn/aff605fb499846f5911bec368762e829.png" ); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh; }
.container是整个应用的最外层容器，它被定位在屏幕的中心，并且具有一个白色的背景和10像素的圆角边框。它的宽度为40%，但是最小宽度为450像素。
.container{ width: 40%; min-width: 450px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; background: white; border-radius: 10px; }
#newtask是一个表单容器，其中包含一个输入框和一个提交按钮。输入框的样式包括宽度、高度、字体、边框、内边距、字体颜色和字体粗细。当输入框被聚焦时，边框颜色会改变。提交按钮的样式包括宽度、高度、字体、字体颜色、背景颜色、边框、圆角和光标样式。
#newtask{ position: relative; padding: 30px 20px; } #newtask input{ width: 75%; height: 45px; font-family: 'Poppins',sans-serif; font-size: 15px; border: 2px solid #d1d3d4; padding: 12px; color: #111111; font-weight: 500; position: relative; border-radius: 5px; } #newtask input:focus{ outline: none; border-color: #0d75ec; } #newtask button{ position: relative; float: right; width: 20%; height: 45px; border-radius: 5px; font-family: 'Poppins',sans-serif; font-weight: 500; font-size: 16px; background-color: #0d75ec; border: none; color: #ffffff; cursor: pointer; outline: none; }
#tasks是待办事项列表的样式，用于设置其背景颜色、内边距、顶部外边距、边框半径、宽度和相对定位。
#tasks{ background-color: #ffffff; padding: 30px 20px; margin-top: 10px; border-radius: 10px; width: 100%; position: relative; }
.task是每个待办事项的样式，用于设置其背景颜色、高度、下外边距、内边距、显示属性、对齐方式、边框半径、边框样式和光标类型。
.task{ background-color: #c5e1e6; height: 50px; margin-bottom: 8px; padding: 5px 10px; display: flex; border-radius: 5px; align-items: center; justify-content: space-between; border: 1px solid #939697; cursor: pointer; }
.task span是每个待办事项中的文本的样式，用于设置其字体系列、字体大小和字重。
.task span{ font-family: 'Poppins',sans-serif; font-size: 15px; font-weight: 400; }
.task button是每个待办事项中的删除按钮的样式，用于设置其背景颜色、文本颜色、高度、宽度、边框半径、边框样式、光标类型和轮廓样式。
.task button{ background-color: #0a2ea4; color: #ffffff; height: 100%; width: 40px; border-radius: 5px; border: none; cursor: pointer; outline: none; } /* 为已完成的任务设置下划线文本装饰 */ .completed{ text-decoration: line-through; }
JavaScript
下面是添加新任务按钮的 JavaScript 代码块，定义了点击按钮时的行为。querySelector 方法会返回匹配给定选择器的第一个元素，这里匹配 ID 为 "push" 的按钮。点击按钮时，执行函数中的代码块。
document.querySelector('#push').onclick = function(){ /* JavaScript 代码块 */ }
首先判断输入框中的内容是否为空。如果为空，则弹出一个提示框，提示用户输入任务。如果不为空，则执行后续代码块。
if(document.querySelector('#newtask input').value.length == 0){ alert("请输入任务") } else{ /* JavaScript 代码块 */ }
如果输入框不为空，则会将输入框的值添加到任务列表中。这段代码使用了 innerHTML 属性将一个新的 div 元素插入到了任务列表中，其中包括任务名称和删除按钮。${document.querySelector('#newtask input').value} 是一个 ES6 模板字符串语法，用于将输入框的值插入到字符串中。
else{ document.querySelector('#tasks').innerHTML += ` <div class="task"> <span id="taskname"> ${document.querySelector('#newtask input').value} </span> <button class="delete"> <i class="far fa-trash-alt"></i> </button> </div> `;
最后将删除按钮的点击事件绑定到一个匿名函数上，当点击删除按钮时，它将删除任务列表中的相应任务。这里使用了 querySelectorAll 方法选择所有具有 delete 类名的元素，并使用 for 循环遍历它们，并将每个元素的点击事件绑定到一个匿名函数上。在匿名函数中，this 引用当前的删除按钮，this.parentNode 引用该按钮的父元素，也就是任务列表的 div 元素。remove() 方法用于删除该元素。
到这里我们就完成了，需要下载源码可以在我的码上掘金领取：
