待办事项列表应用｜ 青训营

小兔豆
83 阅读3分钟

项目：待办事项列表应用

1. 创建HTML结构

首先创建了一个基本的HTML结构，用于构建待办事项列表应用的用户界面。这个结构包括一个标题、一个输入框、一个添加按钮和一个用于显示任务的无序列表。

htmlCopy code
<!-- HTML结构 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Todo List</h1>
        <input type="text" id="taskInput" placeholder="Enter a new task...">
        <button id="addButton">Add</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. 添加CSS样式（styles.css）

通过CSS样式，为应用创建了一个美观的外观，使其在用户界面上看起来更加吸引人。样式定义了字体、颜色、边距和布局等方面的属性，为应用增添了一些元素。(可自行添加)

cssCopy code
/* CSS样式，定义了应用的外观 */

3. 编写JavaScript逻辑（script.js）

JavaScript代码提供了应用的交互逻辑，使用户能够添加、删除和标记待办事项。下面是代码的详细说明：

JavaScript部分解释：

  • addTask函数：当用户点击"Add"按钮时，它从输入框获取任务文本，创建一个任务项并添加到列表中。同时，为新任务添加删除和标记功能的事件监听器。
  • deleteTask函数：当用户点击"Delete"按钮时，它会找到相应的任务项并将其从列表中移除。
  • toggleTask函数：当用户点击任务项时，它会切换任务的完成状态（添加或移除“completed”类）。
javascriptCopy code
// 获取HTML元素
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

// 添加点击事件监听器
addButton.addEventListener('click', addTask);

// 添加任务函数
function addTask() {
    // 从输入框获取任务文本
    const taskText = taskInput.value.trim();
    
    // 检查是否有有效的任务文本
    if (taskText !== '') {
        // 创建任务项的HTML元素
        const li = document.createElement('li');
        li.innerHTML = `<span>${taskText}</span><button class="deleteButton">Delete</button>`;
        
        // 将任务项添加到列表
        taskList.appendChild(li);
        
        // 清空输入框
        taskInput.value = '';
        
        // 添加删除按钮和标记任务完成的事件监听器
        li.querySelector('.deleteButton').addEventListener('click', deleteTask);
        li.addEventListener('click', toggleTask);
    }
}

// 删除任务函数
function deleteTask(event) {
    // 找到要删除的任务项并从列表中移除
    const li = event.target.closest('li');
    taskList.removeChild(li);
}

// 标记任务为完成或未完成状态的函数
function toggleTask(event) {
    // 找到相关任务项并切换"completed"类
    const li = event.target.closest('li');
    li.classList.toggle('completed');
}

4. 项目说明

这个项目展示了如何使用HTML、CSS和JavaScript创建一个交互式的待办事项列表应用。用户可以通过输入框添加新任务，点击任务来标记为完成或取消完成状态，并点击"Delete"按钮来删除任务。以下是每个部分的详细说明：

  • HTML结构：我们创建了一个容器，其中包含一个标题（"Todo List"）、一个输入框、一个添加按钮和一个任务列表。
  • CSS样式：通过CSS样式，我们为应用提供了一些外观，包括字体、颜色、边距等。这些样式使应用看起来更加美观。
  • JavaScript逻辑：我们使用JavaScript为应用添加了交互功能。addTask函数处理添加任务的逻辑，deleteTask函数处理删除任务的逻辑，而toggleTask函数处理标记任务完成状态的逻辑。通过这些函数，用户可以与待办事项列表进行交互。

通过这个项目，可以了解如何使用HTML、CSS和JavaScript来构建一个简单的待办事项列表应用，并在其中添加交互功能。可以根据需要进一步扩展和定制这个应用，以满足特定的需求。

avatar
文章
阅读
粉丝