开发一个webapp代码示例
时间: 2023-05-30 08:07:28 浏览: 131
这里提供一个简单的WebApp代码示例,使用HTML、CSS和JavaScript编写。该WebApp是一个简单的待办事项列表,用户可以添加、删除和标记已完成的任务。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<h1>Todo List</h1>
<input type="text" id="new-task" placeholder="Add new task">
<button id="add-task">Add</button>
<ul id="task-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
}
.wrapper {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h1 {
text-align: center;
}
input[type="text"] {
padding: 10px;
width: 70%;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
background-color: #d7ffd7;
}
li.completed .task-text {
text-decoration: line-through;
color: #999;
}
```
JavaScript代码:
```
const newTaskInput = document.getElementById('new-task');
const addTaskButton = document.getElementById('add-task');
const taskList = document.getElementById('task-list');
function addTask() {
if (newTaskInput.value.trim() === '') {
return;
}
const taskText = newTaskInput.value.trim();
const taskItem = document.createElement('li');
const taskTextElement = document.createElement('span');
const deleteButton = document.createElement('button');
const completeButton = document.createElement('button');
taskTextElement.textContent = taskText;
deleteButton.textContent = 'Delete';
completeButton.textContent = 'Complete';
deleteButton.addEventListener('click', deleteTask);
completeButton.addEventListener('click', completeTask);
taskItem.appendChild(taskTextElement);
taskItem.appendChild(deleteButton);
taskItem.appendChild(completeButton);
taskList.appendChild(taskItem);
newTaskInput.value = '';
}
function deleteTask(event) {
event.target.parentNode.remove();
}
function completeTask(event) {
event.target.parentNode.classList.toggle('completed');
}
addTaskButton.addEventListener('click', addTask);
```
以上代码实现了一个简单的WebApp,可以自由添加、删除和标记任务。当用户点击“完成”按钮时,任务将被标记为已完成,并在列表项上应用“completed”类。当用户点击“删除”按钮时,任务将被删除。