javascript实践项目｜青训营项目名称：待办事项列表应用功能要点：添加待办事项删除待办事项标记已完成的待

项目名称：待办事项列表应用

功能要点：

添加待办事项
删除待办事项
标记已完成的待办事项

步骤：

1. 创建HTML文件（index.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>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="todoInput" placeholder="Add a new task">
    <button id="addButton">Add</button>
    <ul id="todoList"></ul>

    <script src="app.js"></script>
</body>
</html>

这是一个简单的HTML文件，它包含一个标题（"Todo List"）、一个输入文本框（用于输入待办事项）、一个"Add"按钮（用于添加待办事项）、一个无序列表（用于显示待办事项列表），以及一个链接到JavaScript文件的脚本标签。

2. 创建JavaScript文件（app.js）：

// 获取DOM元素
const todoInput = document.getElementById("todoInput");
const addButton = document.getElementById("addButton");
const todoList = document.getElementById("todoList");

// 待办事项数组
let todos = [];

// 添加待办事项
function addTodo() {
    const todoText = todoInput.value;
    if (todoText !== "") {
        todos.push({ text: todoText, completed: false });
        renderTodos();
        todoInput.value = "";
    }
}

// 删除待办事项
function deleteTodo(index) {
    todos.splice(index, 1);
    renderTodos();
}

// 标记已完成的待办事项
function toggleComplete(index) {
    todos[index].completed = !todos[index].completed;
    renderTodos();
}

// 渲染待办事项列表
function renderTodos() {
    todoList.innerHTML = "";
    todos.forEach((todo, index) => {
        const todoItem = document.createElement("li");
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.checked = todo.completed;
        checkbox.addEventListener("change", () => toggleComplete(index));

        const text = document.createElement("span");
        text.textContent = todo.text;
        if (todo.completed) {
            text.style.textDecoration = "line-through";
        }

        const deleteButton = document.createElement("button");
        deleteButton.textContent = "Delete";
        deleteButton.addEventListener("click", () => deleteTodo(index));

        todoItem.appendChild(checkbox);
        todoItem.appendChild(text);
        todoItem.appendChild(deleteButton);

        todoList.appendChild(todoItem);
    });
}

// 添加按钮点击事件
addButton.addEventListener("click", addTodo);

// 初始化渲染
renderTodos();

当涉及到实现一个完整的项目时，让我们对上面的项目进行详细解释，以便更好地理解每个部分的作用和如何协同工作。

1. HTML 文件（index.html）：

htmlCopy code
<!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>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="todoInput" placeholder="Add a new task">
    <button id="addButton">Add</button>
    <ul id="todoList"></ul>

    <script src="app.js"></script>
</body>
</html>

2. JavaScript 文件（app.js）：

在JavaScript文件中，我们首先获取了HTML中的一些DOM元素，如输入文本框、添加按钮和待办事项列表。接下来，我们定义了一个数组todos，用于存储待办事项的信息。

javascriptCopy code
const todoInput = document.getElementById("todoInput");
const addButton = document.getElementById("addButton");
const todoList = document.getElementById("todoList");

let todos = [];

我们创建了一系列函数来完成不同的操作：

addTodo(): 这个函数用于添加待办事项。它从输入文本框中获取待办事项的文本，将待办事项对象添加到todos数组中，然后调用renderTodos()函数重新渲染待办事项列表。
deleteTodo(index): 这个函数用于删除指定索引的待办事项。它从todos数组中删除对应的元素，然后调用renderTodos()函数重新渲染待办事项列表。
toggleComplete(index): 这个函数用于切换待办事项的完成状态。它会将指定索引的待办事项对象的completed属性取反，然后调用renderTodos()函数重新渲染待办事项列表。
renderTodos(): 这个函数负责将todos数组中的待办事项渲染到页面上。它首先清空待办事项列表，然后遍历todos数组，为每个待办事项创建一个列表项，并添加复选框、文本和删除按钮。根据待办事项的完成状态，调整文本的样式。最后，将每个列表项添加到待办事项列表中。

最后，我们为"Add"按钮添加了一个点击事件监听器，当按钮被点击时，会调用addTodo()函数以添加新的待办事项。我们还在页面加载后调用renderTodos()函数，以初始化渲染待办事项列表。

3. 运行项目：

将上面的代码保存为index.html和app.js，然后在浏览器中打开index.html文件。你将看到一个简单的待办事项列表应用，可以添加、删除和标记已完成的待办事项。

在输入框中输入待办事项，点击"Add"按钮即可添加到列表中。已添加的待办事项会显示为一个复选框，可以勾选以标记为已完成，也可以点击"Delete"按钮来删除对应的待办事项。

屏幕截图 2023-08-23 200326.png

这个例子演示了如何使用JavaScript来创建一个基本的待办事项列表应用，涵盖了添加、删除和标记已完成等功能。你可以根据这个例子进一步扩展和改进应用。

这几个项目也都可以用js来实现

简易计算器应用： 创建一个基本的计算器应用，用户可以进行加、减、乘、除等基本运算。

图片轮播器： 制作一个图片轮播器，可以循环展示一组图片，具有自动播放和手动切换的功能。

天气应用： 使用天气API获取用户所在位置的实时天气信息，并显示在页面上。

在线笔记应用： 开发一个简单的在线笔记应用，用户可以创建、编辑和删除笔记。

网页待办清单： 扩展之前的待办事项应用，添加本地存储功能，使得待办事项在刷新页面后仍然保留。

单页面网站： 创建一个单页面应用（SPA），使用路由库来实现不同页面间的切换，例如展示个人简历或作品集。

音乐播放器： 制作一个简单的音乐播放器，可以播放、暂停和调整音量。

翻译工具： 使用翻译API构建一个在线翻译工具，可以将文本从一种语言翻译成另一种语言。

社交媒体分享按钮： 创建一个社交媒体分享按钮组件，允许用户通过点击按钮快速分享内容到不同社交平台。

即时聊天应用： 开发一个即时聊天应用，可以实现实时的文本聊天功能，可以使用WebSocket或其他通信技术。

javascript实践项目｜ 青训营

javascript实践项目｜青训营