构建简单的待办事项应用程序

开发 To-Do List, JavaScript, HTML, CSS, 待办事项应用 06-03

构建一个简单的待办事项应用程序：从设计到实现

在这篇文章中，我们将一起构建一个简单的待办事项（To-Do List）应用程序。此应用程序将允许用户添加、删除和查看待办事项。我们将使用HTML、CSS和JavaScript来实现这个功能。我们将从应用程序的设计开始，逐步实现功能。

第一步：设计用户界面

我们将设计一个非常简单的用户界面，包含以下元素：

一个输入框用于输入新的待办事项
一个按钮用于添加待办事项
一个列表用于展示所有待办事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        input, button {
            padding: 10px;
            margin: 5px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 10px;
            background-color: #eee;
            margin: 5px 0;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>To-Do List</h2>
        <input type="text" id="todo-input" placeholder="Add a new task">
        <button onclick="addTodo()">Add</button>
        <ul id="todo-list"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

第二步：实现添加待办事项功能

在HTML中，我们创建了一个输入框和一个按钮。现在，我们需要实现JavaScript代码来处理添加待办事项的逻辑。

我们将创建一个addTodo函数，它将从输入框中获取待办事项文本，并将其添加到待办事项列表中。

// app.js

function addTodo() {
    const todoInput = document.getElementById('todo-input');
    const todoText = todoInput.value.trim();

    if (todoText !== '') {
        const todoList = document.getElementById('todo-list');
        const listItem = document.createElement('li');

        listItem.textContent = todoText;
        
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.onclick = function() {
            todoList.removeChild(listItem);
        };

        listItem.appendChild(deleteButton);
        todoList.appendChild(listItem);
        todoInput.value = '';
    }
}

第三步：实现删除待办事项功能

在上面的代码中，我们已经创建了一个删除按钮，并为其绑定了一个点击事件，用于从列表中删除相应的待办事项。

第四步：测试和完善

打开浏览器，加载HTML文件。
在输入框中输入待办事项并点击“Add”按钮，观察待办事项被添加到列表中。
点击待办事项旁边的“Delete”按钮，观察待办事项从列表中移除。

小结

通过这篇文章，我们学会了如何构建一个简单的待办事项应用程序。尽管这个应用程序很简单，但它包含了基本的DOM操作和事件处理，是学习JavaScript编程的良好起点。接下来，您可以尝试添加更多功能，例如编辑待办事项、持久化待办事项数据等。

编辑：一起学习网