实现简单的Todo List应用

开发 Todo List,功能设计,HTML,CSS,JavaScript 05-26

实现一个简单的Todo List应用：从功能设计到代码实现

在这篇文章中，我们将一步步实现一个简单的Todo List应用。这个应用允许用户添加、查看和删除待办事项。我们将使用HTML、CSS和JavaScript来完成这个任务。

1. 功能设计

我们的Todo List应用将具备以下功能：

用户可以在输入框中输入待办事项并添加到列表中。
用户可以查看待办事项列表。
用户可以删除已完成的待办事项。

2. 构建基础HTML结构

首先，我们需要创建一个简单的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</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="todo-app">
        <h1>Todo List</h1>
        <input type="text" id="todo-input" placeholder="Enter a new task">
        <button id="add-btn">Add</button>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. 添加基本的CSS样式

为了让应用看起来更美观，我们可以添加一些基本的CSS样式。

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#todo-app {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#todo-input {
    padding: 10px;
    width: 75%;
    margin-right: 10px;
}

#add-btn {
    padding: 10px;
}

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

#todo-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}

#todo-list li button {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
}

4. 编写JavaScript逻辑

接下来，我们将实现JavaScript的逻辑以实现待办事项的添加和删除功能。

document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('todo-input');
    const addButton = document.getElementById('add-btn');
    const todoList = document.getElementById('todo-list');

    addButton.addEventListener('click', () => {
        const taskText = input.value.trim();
        if (taskText !== '') {
            addTask(taskText);
            input.value = '';
        }
    });

    function addTask(task) {
        const listItem = document.createElement('li');
        listItem.textContent = task;

        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.addEventListener('click', () => {
            todoList.removeChild(listItem);
        });

        listItem.appendChild(deleteButton);
        todoList.appendChild(listItem);
    }
});

5. 测试应用

完成以上步骤后，打开HTML文件，在浏览器中测试应用。你应该能够添加新的任务并将其显示在列表中，同时可以通过点击“Delete”按钮来删除任务。

总结

通过本文，我们实现了一个简单但功能齐全的Todo List应用。这个应用涵盖了基本的HTML结构、CSS样式和JavaScript交互逻辑，为初学者提供了良好的学习实践。

编辑：一起学习网