如何使用 HTML、CSS、JS 和 Bootstrap 创建 ToDo 应用程序？(1)

📌 相关文章

📜 如何使用 HTML、CSS、JS 和 Bootstrap 创建 ToDo 应用程序？(1)

📅 最后修改于: 2023-12-03 15:23:52.513000 🧑 作者: Mango

如何使用 HTML、CSS、JS 和 Bootstrap 创建 ToDo 应用程序？

在本教程中，我们将使用 HTML、CSS、JS 和 Bootstrap 创建一个简单的 ToDo 应用程序。ToDo 应用程序允许用户创建、编辑、删除任务。

准备工作

在开始之前，我们需要确保我们已经安装了以下内容：

一个文本编辑器
最新版本的浏览器（例如 Chrome、Firefox、Safari 等）
Bootstrap

HTML 文件

我们以创建 HTML 文件开始。请创建一个名为 index.html 的文件，并将以下代码添加到文件中：

<!DOCTYPE html>
<html>
<head>
  <title>ToDo App</title>
</head>
<body>
  <div class="container">
    <h1>ToDo App</h1>
    <form id="todo-form">
      <div class="form-group">
        <label for="task">Task</label>
        <input type="text" id="task" class="form-control" placeholder="Add task">
      </div>
      <button type="submit" class="btn btn-primary">Add</button>
    </form>
    <ul id="todo-list" class="list-group mt-3">
    </ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

代码解析：

我们使用 container 类将整个应用程序容器化。这样做可以使界面更加整洁和有序。
我们添加了一个表单，以便用户输入新任务并将其添加到列表中。
我们添加了一个无序列表元素（<ul>）用于编写任务列表。
最后，我们添加了一个指向 app.js 的脚本标记，这将在稍后实现的 JavaScript 文件中使用。

CSS 文件

现在让我们创建一个 CSS 文件（例如 style.css），并向我们的 HTML 文件中添加以下行来添加样式：

<head>
  <title>ToDo App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>

我们使用 Bootstrap 创建样式。这是添加 Bootstrap 的推荐方法，因为它允许我们从 CDN 加载库。此外，我们还可以加载本地版本。

在 style.css 文件中，我们可以添加自定义样式以使应用程序更为吸引人，例如：

body {
  background-color: #f8f9fa;
}

h1 {
  text-align: center;
  margin: 50px 0;
  font-weight: bold;
}

.btn-primary {
  margin-top: 10px;
}

.list-group-item {
  display: flex;
  align-items: center;
}

.list-group-item .task {
  flex-grow: 1;
}

.list-group-item .delete {
  color: #dc3545;
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}

在这个例子中，我们改变了应用程序的背景颜色、标题样式，还更改了一些 Bootstrap 类，例如 .btn-primary 和 .list-group-item。`

JavaScript 文件

下一步是创建 JavaScript 文件，称为 app.js。这是实现应用程序逻辑的文件。

首先，我们需要实现向我们的列表中添加任务的功能。我们使用以下代码来监听表单的提交事件：

const form = document.querySelector('#todo-form');
form.addEventListener('submit', (event) => {
  event.preventDefault();

  const taskInput = document.querySelector('#task');
  const task = taskInput.value.trim();

  if (task === '') {
    return;
  }

  const todoList = document.querySelector('#todo-list');
  const listItem = document.createElement('li');
  listItem.className = 'list-group-item';
  listItem.innerHTML = `
    <span class="task">${task}</span>
    <i class="delete bi bi-trash"></i>
  `;
  todoList.appendChild(listItem);

  taskInput.value = '';
});

我们监听表单的 submit 事件。
我们阻止默认的事件行为。
我们获取 #task 元素的值并去除空格。
如果任务为空，则我们不进行任何操作（在这种情况下，我们只是返回函数，这与使用 return false 相同）。
我们为 #todo-list 元素创建一个 li 元素，将其添加到 #todo-list 中，并将其添加到列表中。
最后，我们重置表单元素。

在这个例子中，我们使用了 ES6 语法，特别地 template literals，它可以让我们更好地展示字符串和变量的组合。

接下来，我们将为任务项添加 delete 功能。我们需要监听每个任务项中的删除按钮，如下所示：

const todoList = document.querySelector('#todo-list');
todoList.addEventListener('click', (event) => {
  const target = event.target;

  if (target.classList.contains('delete')) {
    target.parentElement.remove();
  }
});

我们将 #todo-list 元素添加到 click 事件监听器中。
我们检查点击的目标元素是否具有 delete 类。如果是，我们删除其父元素，即任务项。

结论

在本教程中，我们使用 HTML、CSS、JS 和 Bootstrap 创建了一个简单的 ToDo 应用程序。虽然这个应用程序只是一个例子，但它可以帮助我们理解如何使用这些技术创建更复杂的应用程序。通过学习和改进这个应用，我们可以更好地了解 Web 开发和前端技能。