To-Do App 教程

这是一个关于如何创建 To-Do App 的教程。To-Do App 是一个非常实用的应用，可以帮助你管理任务和日常安排。

学习目标

• 了解 To-Do App 的基本概念
• 学习如何使用 HTML 和 CSS 创建一个简单的 To-Do App
• 掌握 JavaScript 的基本用法，以实现 To-Do App 的动态功能

教程内容

1. HTML 结构 - 定义你的 To-Do App 的基本框架。
2. CSS 样式 - 给你的 To-Do App 美观的外观。
3. JavaScript 功能 - 实现添加、删除和列表更新的功能。

HTML 结构

首先，你需要一个表单来输入新的任务，以及一个列表来显示现有的任务。

<div id="todo-app">
  <input type="text" id="new-task" placeholder="添加新任务...">
  <button id="add-task">添加</button>
  <ul id="task-list"></ul>
</div>

CSS 样式

接下来，给 To-Do App 添加一些样式：

#todo-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

#new-task {
  width: 80%;
  padding: 10px;
  margin-bottom: 10px;
}

#add-task {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

#task-list {
  list-style-type: none;
  padding: 0;
}

.task-item {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

JavaScript 功能

最后，添加一些 JavaScript 来使 To-Do App 具有交互性：

document.getElementById('add-task').addEventListener('click', function() {
  var taskInput = document.getElementById('new-task');
  var taskList = document.getElementById('task-list');
  var taskText = taskInput.value.trim();

  if (taskText !== '') {
    var taskItem = document.createElement('li');
    taskItem.className = 'task-item';
    taskItem.textContent = taskText;
    taskList.appendChild(taskItem);

    taskItem.addEventListener('click', function() {
      this.remove();
    });

    taskInput.value = '';
  }
});

扩展阅读

想了解更多关于 To-Do App 的信息？可以阅读我们的 To-Do App 进阶教程。

<center><img src="https://cloud-image.ullrai.com/q/to_do_app_concept/" alt="To-Do App Concept"/></center>

希望这个教程能帮助你入门 To-Do App 开发！