创建简单的Todo列表应用

开发 HTML, CSS, JavaScript, Todo list app, front-end development 04-20

实现简单的Todo列表应用

在本教程中，我们将学习如何使用HTML、CSS和JavaScript来创建一个简单的Todo列表应用。这个应用允许用户添加和删除任务。通过这个例子，你可以了解基本的前端开发流程，以及如何使用JavaScript来操控DOM元素。

步骤1：设置基本的HTML结构

首先，我们需要创建一个用于展示和管理任务的基本HTML结构。创建一个index.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 App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Todo List</h1>
        <input type="text" id="taskInput" placeholder="Add a new task" />
        <button id="addTaskButton">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

这个HTML文件包含了一个头部，一个输入框，一个按钮，还有一个用来放置任务的列表。

步骤2：添加CSS样式

创建一个styles.css文件，为我们的应用添加一些基本的样式。

body {
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

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

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

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

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

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

li button {
    background-color: #dc3545;
}

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

这些样式将增强用户界面的视觉效果，并为按钮和输入框添加样式。

步骤3：实现JavaScript功能

创建一个script.js文件，添加JavaScript代码以实现任务添加和删除功能。

document.getElementById('addTaskButton').addEventListener('click', function () {
    const taskInput = document.getElementById('taskInput');
    const taskText = taskInput.value.trim();
    if (taskText !== "") {
        const taskList = document.getElementById('taskList');
        const newTask = document.createElement('li');
        
        newTask.textContent = taskText;

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

        newTask.appendChild(deleteButton);
        taskList.appendChild(newTask);

        taskInput.value = '';
    }
});

在这段代码中，我们为“Add Task”按钮添加了一个点击事件监听器。每次点击时，该函数会检查输入框中是否有内容，然后创建一个新的列表项，将其添加到任务列表中。每个任务都有一个删除按钮，点击时会从列表中移除该任务。

总结

通过以上步骤，我们创建了一个简单的Todo列表应用，用户可以使用它来添加和删除任务。我们利用了HTML、CSS和JavaScript的基本知识来实现这个功能。希望这个教程能够帮助你理解前端开发的基本流程和JavaScript在操控页面元素中的应用。

编辑：一起学习网