<!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(toDoInput.value.trim())//trim去掉字符串头尾的空格
toDoList.appendChild(li)//把生成的li放到ul里面去nn
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()
}
</script>