简单Todo应用程序实现指南

开发 Todo app, front-end development, HTML, CSS, JavaScript 03-29

如何实现一个简单的Todo应用程序

创建一个简单的Todo应用程序是一个很好的入门项目，可以帮助您掌握基本的前端开发技能。该应用程序允许用户添加、删除和标记任务为已完成。我们将使用HTML、CSS 和 JavaScript来实现这个功能。

初始化项目结构

首先，创建一个新的文件夹来存储您的项目，在此文件夹中创建以下文件：

index.html
styles.css
script.js

编写HTML

打开index.html，添加以下代码。这将设置我们应用程序的基本HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Todo App</title>
</head>
<body>
    <div class="todo-app">
        <h1>Todo List</h1>
        <input type="text" id="new-task" placeholder="Add a new task...">
        <button id="add-task-btn">Add Task</button>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

添加CSS样式

打开styles.css，添加以下样式代码。这将使我们的应用程序更加美观。

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

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

#new-task {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
}

button {
    padding: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

li.completed {
    text-decoration: line-through;
    color: gray;
}

编写JavaScript

最后，打开script.js文件，添加以下JavaScript代码来实现功能。

document.addEventListener('DOMContentLoaded', function() {
    const addTaskBtn = document.getElementById('add-task-btn');
    const taskInput = document.getElementById('new-task');
    const taskList = document.getElementById('task-list');

    addTaskBtn.addEventListener('click', function() {
        const taskText = taskInput.value.trim();
        if (taskText !== '') {
            const taskItem = document.createElement('li');
            taskItem.textContent = taskText;

            taskItem.addEventListener('click', function() {
                taskItem.classList.toggle('completed');
            });

            taskList.appendChild(taskItem);
            taskInput.value = '';
        }
    });
});

测试应用程序

使用任何浏览器打开index.html。在文本框中输入任务并单击“Add Task”按钮。任务应出现在下方的列表中。单击任务即可标记为已完成，再次单击可取消标记。

通过上述步骤，您已经成功创建了一个基本的Todo应用程序。这是一个简单但功能齐全的项目，可以进一步扩展以支持其他功能，如任务搜索和持久化存储。

编辑：一起学习网