如何构建简单的待办事项应用

开发待办事项, To-Do List, HTML, CSS, JavaScript 03-25

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

在这篇文章中，我们将开发一个简单的待办事项应用程序，通过这个项目，你将学习如何使用HTML、CSS和JavaScript构建一个基础的Web应用。该应用允许用户添加和移除待办事项。

步骤1：创建HTML结构

首先，创建一个包含输入框和添加按钮的简单HTML结构。我们还需要一个展示待办事项列表的区域。

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>待办事项列表</h1>
        <input type="text" id="todo-input" placeholder="输入待办事项">
        <button id="add-btn">添加</button>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

步骤2：添加基本的CSS样式

然后，我们为应用程序添加一些基本的CSS样式，以提升用户体验。

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

#app {
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
}

input[type="text"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: #28a745;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

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

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

li {
    padding: 8px;
    margin-bottom: 4px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: left;
    position: relative;
}

li button {
    background-color: #dc3545;
    position: absolute;
    right: 10px;
    top: 8px;
    padding: 3px 6px;
    border-radius: 50%;
}

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

步骤3：编写JavaScript功能

最后，我们需要实现JavaScript来处理待办事项的添加和删除功能。

// script.js
document.getElementById('add-btn').addEventListener('click', function() {
    const todoInput = document.getElementById('todo-input');
    const todoText = todoInput.value.trim();

    if (todoText !== "") {
        addTodoItem(todoText);
        todoInput.value = "";  // 清空输入框
    }
});

function addTodoItem(todoText) {
    const todoList = document.getElementById('todo-list');
    const li = document.createElement('li');
    li.textContent = todoText;

    const delButton = document.createElement('button');
    delButton.textContent = 'X';
    delButton.addEventListener('click', function() {
        todoList.removeChild(li);
    });

    li.appendChild(delButton);
    todoList.appendChild(li);
}

解释

HTML部分：建立了一个基本的输入和输出结构，通过<input>元素让用户输入待办事项，并通过<ul>元素列出所有待办项。
CSS部分：基本的样式设计，让应用整体更为美观，同时保持简单和现代风格。
JavaScript部分：核心功能实现，通过点击‘添加’按钮，获取用户输入，并将其作为列表项添加到待办事项列表中。同时，每个待办项上都有一个删除按钮，点击即可移除该项。

通过以上步骤，你已经成功构建了一个基础的待办事项应用！可以根据需求进一步扩展，例如保存数据到本地存储，为待办项设置优先级等。祝开发愉快！

编辑：一起学习网