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

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

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

在本教程中，我们将构建一个简单的待办事项（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>待办事项应用程序</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>待办事项</h1>
        <input type="text" id="task-input" placeholder="输入新任务">
        <button id="add-task-btn">添加任务</button>
        <ul id="task-list"></ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

第二步：样式化界面

接下来，使用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: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    text-align: center;
}

#task-input {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#add-task-btn {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#add-task-btn:hover {
    background-color: #218838;
}

#task-list {
    list-style: none;
    padding: 0;
}

.task-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}

.task-item button {
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.task-item button:hover {
    background-color: #c82333;
}

第三步：实现功能逻辑

使用JavaScript实现任务的添加和删除功能。

// app.js
document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('task-input');
    const addTaskBtn = document.getElementById('add-task-btn');
    const taskList = document.getElementById('task-list');

    addTaskBtn.addEventListener('click', addTask);

    function addTask() {
        const taskText = taskInput.value.trim();
        if (taskText === '') {
            alert('请输入一个任务');
            return;
        }

        const taskItem = document.createElement('li');
        taskItem.classList.add('task-item');
        taskItem.innerHTML = `
            ${taskText}
            <button onclick="removeTask(this)">删除</button>
        `;

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

    window.removeTask = function(button) {
        const taskItem = button.parentElement;
        taskList.removeChild(taskItem);
    };
});

结论

通过以上步骤，我们已经成功地构建了一个简单的待办事项应用程序。这个项目不仅演示了如何使用HTML、CSS和JavaScript搭建一个网页应用，还帮助你理解了如何将各个技术组合在一起，形成一个完整的功能。你可以进一步扩展这个应用，比如添加任务编辑功能、任务完成标记等，以此提高自己的开发技能。

编辑：一起学习网