<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" action="/">
<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>
</html>
</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事件应该跳转新网页，用这个取消默认跳转
//console.log(todoInput.value.trim())//trim去掉字符串头的空格
const todoText=todoInput.value
if(!todoText)return
const li=creatTodoItem(todoText.trim())
/* const li=creatTodoItem(todoInput.value.trim()) */
//把生成的li放到ul里面
todoList.appendChild(li)
todoInput.value=""
}
todoList.onclick=function(event){
if(event.target.className=="todo-item-delete"&& confirm('提示语言：确定删除吗'))
event.target.parentNode.remove()
//删除便签框
}
</script>