<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todo List</title>
<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>
</head>
<body>
<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>
</body>
</html>
<script>
const toDoForm = document.getElementById('todoForm')
const todoList = document.getElementById('todoList')
const todoInput = document.getElementById('todoInput')
function creatTodoItem(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.onsubmit = function (event) {
event.preventDefault()//onsubmit事件应该跳转新网页，用这个取消跳转
const todoText = todoInput.value
if (!todoText) return
const li = creatTodoItem(todoText.trim()) //trim())//trim去掉字符串头尾的空格
todoList.appendChild(li) //把生成的li放到ul里面去
todoInput.value=""
}
todoList.onclick=function (event){
if(event.target.className==="todo-item-delete"&&confirm('Are you sure you want to delete this todo?')){
event.target.parentNode.remove()//remove删除 选中了event.target的父亲
}
}
</script>
这是一个简单的待办事项清单网页应用程序的HTML/CSS/JavaScript代码。CSS用于样式化页面布局，而JavaScript用于处理用户交互并动态更新网页。HTML代码定义了页面的结构，包括标题、表单和无序列表。CSS代码应用于各种页面元素的样式，例如设置背景颜色和字体系列。JavaScript代码定义了创建新待办事项和处理用户交互的函数，例如添加新待办事项和删除现有待办事项。当用户在输入字段中输入新待办事项并单击“添加”按钮时，将调用`creatTodoItem`函数以创建具有复选框、待办事项文本和删除按钮的新列表项元素。然后将新列表项附加到无序列表中。当用户单击删除按钮时，将调用`todoList.onclick`函数来检查是否选中了删除按钮，并确认是否删除此待办事项。如果确认，则从无序列表中删除选定的待办事项。
标签：Do,界面,color,border,待办,li,item,添加,todo From： https://www.cnblogs.com/dadaya123/p/17509923.html