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

开发 To-Do List, front-end development, HTML, CSS, JavaScript 06-07

构建一个简单的待办事项（To-Do List）应用程序

在本篇文章中，我们将创建一个简单的待办事项应用程序。该应用程序将允许用户添加、删除和查看他们的任务。这是一个很好的项目来练习基本的前端开发技能，涉及HTML、CSS和JavaScript。我们将分步骤实现这一功能，并提供代码示例。

第一步：设置项目结构

首先，我们需要创建一个基本的项目结构，包括HTML、CSS和JavaScript文件。

todo-list/
|-- index.html
|-- styles.css
|-- script.js

第二步：编写HTML结构

在index.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>To-Do List</title>
</head>
<body>
    <div class="todo-container">
        <h1>To-Do List</h1>
        <input type="text" id="task-input" placeholder="Enter a new task">
        <button id="add-task-button">Add Task</button>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

第三步：添加样式

在styles.css中，为我们的应用程序添加一些基本的样式，以提高用户体验。

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

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

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

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

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

li {
    padding: 10px;
    margin-bottom: 5px;
    background-color: #fafafa;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li button {
    background-color: #dc3545;
}

li button:hover {
    background-color: #c82333;
}

第四步：实现JavaScript功能

在script.js中，添加JavaScript以实现待办事项的功能，包括添加和删除任务。

document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('task-input');
    const addTaskButton = document.getElementById('add-task-button');
    const taskList = document.getElementById('task-list');

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

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

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

结论

通过以上步骤，我们创建了一个简单的待办事项应用程序。用户可以在输入框中输入任务，然后点击“Add Task”按钮将其添加到任务列表中。每个任务项旁边都有一个“Delete”按钮，用户可以点击它来移除任务。这是一个良好的练习项目，可以进一步扩展，例如添加本地存储功能以保持任务列表在刷新后的持久性，或者使用框架如React进行重构。

编辑：一起学习网