使用 Tailwind CSS 和 JavaScript 的待办事项列表应用程序 _JavaScript

文章插图

作为 Web 开发人员，我学会构建的第一批应用程序类型之一是待办事项列表。这些简单但功能强大的工具使我们能够保持井井有条并专注于我们的任务，使它们成为任何希望提高工作效率的人的必备工具。在本教程中，我将引导您使用 html、css 和 JAVAScript 从头到尾构建一个待办事项列表应用程序。
第 1 步：设置 HTML构建任何 Web 应用程序的第一步是设置 HTML 结构。对于我们的待办事项列表应用程序，我们需要一些不同的元素：
添加任务的表单
用于输入任务的输入字段
提交任务按钮
用于显示任务的无序列表
下面是设置这些元素的 HTML 代码：

<h1 class="text-2xl font-bold text-center mb-4">To-Do List</h1><form id="task-form" class="flex justify-center mb-4"><input type="text" id="task-input" class="w-full p-2 rounded-lg shadow-lg"><button type="submit" class="p-2 rounded-full bg-blue-500 text-white">Add</button></form><ul id="task-list" class="mx-auto w-1/2"></ul>

第 2 步：使用 CSS 设计样式现在我们已经设置了待办事项列表应用程序的基本结构，是时候添加一些样式以使其看起来更现代和更具视觉吸引力了。对于本教程，我们将使用流行的 CSS 框架 Tailwind CSS 来帮助我们快速设置应用程序的样式。
首先，让我们设计表单和输入字段的样式，使它们看起来更现代、更吸引人：

/* 给form添加间距和阴影 */form {margin-bottom: 1.5rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}/* 使用一些填充和圆角边框设计输入字段*/input {padding: 0.75rem 1rem;border-radius: 0.25rem;}/*使用一些填充和圆形边框为按钮设置样式 */button {padding: 0.75rem 1rem;border-radius: 0.25rem;}

这将为输入字段和按钮添加一些填充和圆角边框，并为表单添加框阴影。
接下来，让我们设计任务列表的样式，使其看起来更现代、更具视觉吸引力：

/* 在任务列表中添加一些间距和阴影*/ul {margin-top: 1.5rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}/* 使用一些填充和圆角边框设计任务项 */li {padding: 0.75rem 1rem;border-radius: 0.25rem;}

这将为任务项添加一些填充和圆角边框，并为任务列表添加框阴影。
有了这些样式，我们的待办事项列表应用程序现在应该看起来更现代、更具视觉吸引力。
第 3 步：使用 JavaScript 添加功能现在我们已经有了待办事项列表应用程序的基本结构和样式，是时候添加一些功能以使其功能齐全了。我们将使用 JavaScript 来处理以下任务：
向列表中添加新任务
编辑现有任务
从列表中删除任务
首先，让我们设置一些变量来保存对我们将与之交互的不同元素的引用：

// 获取对表单、输入字段和任务列表的引用const taskForm = document.querySelector('#task-form');const taskInput = document.querySelector('#task-input');const taskList = document.querySelector('#task-list');

有了这些变量，我们现在可以开始向我们的待办事项列表应用程序添加功能。
要向列表中添加新任务，我们需要监听表单上的提交事件，然后创建一个包含任务内容的新列表项并将其添加到任务列表中。这是执行此操作的代码：

// 提交表单时添加新任务taskForm.addEventListener('submit', function(event) {event.preventDefault();//从输入域获取任务内容const taskContent = taskInput.value;// 确保任务内容不为空if (taskContent.trim()) {// 使用任务内容创建一个新的列表项const taskItem = document.createElement('li');taskItem.classList.add('task-item', 'flex', 'justify-between', 'p-2', 'rounded-lg', 'shadow-lg', 'bg-white', 'my-2');taskItem.innerHTML = `<span class="flex-1 ml-2 text-gray-800">${taskContent}</span><button class="edit-btn p-1 rounded-full bg-gray-300 mr-2"><i class="fas fa-edit"></i></button><button class="delete-btn p-1 rounded-full bg-red-500"><i class="fas fa-trash-alt"></i></button>`;// 将新任务项添加到任务列表taskList.AppendChild(taskItem);// 清除输入字段taskForm.reset();}});

此代码将监听表单上的提交事件，当它发生时，它将从输入字段中获取任务内容，并使用任务内容创建一个新的列表项。然后它将新任务项添加到任务列表并清除输入字段。