您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

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

时间:2023-01-06 11:43:01  来源:今日头条  作者:启辰8

 

作为 Web 开发人员,我学会构建的第一批应用程序类型之一是待办事项列表。 这些简单但功能强大的工具使我们能够保持井井有条并专注于我们的任务,使它们成为任何希望提高工作效率的人的必备工具。 在本教程中,我将引导您使用 htmlcssJAVAScript 从头到尾构建一个待办事项列表应用程序。

第 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();
  }
});

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

有了这段代码,我们现在可以通过在输入字段中键入并单击“添加”按钮来将新任务添加到列表中。

编辑任务

为了允许用户编辑现有任务,我们需要监听编辑按钮上的点击事件,然后用输入字段替换任务文本。 然后用户可以编辑任务文本并单击更新按钮以保存更改。 这是执行此操作的代码:

// 单击编辑按钮时编辑任务
taskList.addEventListener('click', function(event) {
  if (event.target.classList.contains('edit-btn')) {
    const taskItem = event.target.parentElement;
    const taskText = taskItem.querySelector('span').textContent;

    // 用输入字段替换任务文本
    taskItem.innerHTML = `
      <input type="text" class="w-full p-2 rounded-lg shadow-lg" value="${taskText}">
      <button class="update-btn p-1 rounded-full bg-blue-500 text-white mr-2"><i class="fas fa-check"></i></button>
      <button class="cancel-btn p-1 rounded-full bg-red-500"><i class="fas fa-times"></i></button>
    `;
  }
});

此代码将监听编辑按钮上的点击事件

删除任务

为了允许用户删除任务,我们需要监听删除按钮上的点击事件,然后从列表中删除任务。 这是执行此操作的代码:

// 单击删除按钮时删除任务
taskList.addEventListener('click', function(event) {
  if (event.target.classList.contains('delete-btn')) {
    const taskItem = event.target.parentElement;
    taskList.removeChild(taskItem);
  }
});

此代码将侦听删除按钮上的单击事件,并且在单击时将从任务列表中删除任务项。

有了这三个功能,我们的待办事项列表应用程序现在功能齐全了! 用户可以根据需要添加新任务、编辑现有任务和删除任务。

总结

在本教程中,我们学习了如何使用 HTML、CSS 和 JavaScript 从头到尾构建待办事项列表应用程序。 我们设置了 HTML 结构,使用 Tailwind CSS 设计了应用程序的样式,并使用 JavaScript 添加了功能。 有了这些技能,您现在可以构建自己的待办事项列表应用程序或自定义此应用程序以满足您的需求。

希望本教程对您有所帮助! 如果您有任何问题或意见,请随时将其留在下面的评论部分。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
作为 Web 开发人员,我学会构建的第一批应用程序类型之一是待办事项列表。 这些简单但功能强大的工具使我们能够保持井井有条并专注于我们的任务,使它们成为任何希望提高工作...【详细内容】
2023-01-06  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  Tags: JavaScript  点击:(14)  评论:(0)  加入收藏
了解这33个JavaScript概念绝对会让你将来的职业生涯受益无穷。话不多说,直接进入主题!1. 调用栈 调用栈是解释器(如web浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本...【详细内容】
2022-12-24  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
摘要:在前不久刚发布的 GitHub 年度报告中,Java 依旧是最受程序员欢迎的编程语言,而想要成为一名优秀的 Java 程序员,这 7 个 GitHub 代码库可能会提供助力。链接:https://java.p...【详细内容】
2022-11-29  Tags: JavaScript  点击:(21)  评论:(0)  加入收藏
JavaScript奇淫技巧:20行代码,实现屏幕录像本文展示一个技巧,可以给任何网站、网页实现屏幕录像功能。即使你不是网站的管理者,也可以给它添加录制功能。方法如下:复制一段JS代码...【详细内容】
2022-11-18  Tags: JavaScript  点击:(18)  评论:(0)  加入收藏
计算距离下次生日还有多少天注意这里借助 moment 实现 getBirthdayFun(){ // 首先要获取到今年的生日 let birthdayTime = moment().format(&#39;YYYY-&#39;...【详细内容】
2022-10-28  Tags: JavaScript  点击:(46)  评论:(0)  加入收藏
作 者 | 肖荣强(路迁)写在前面为了提升应用稳定性,我们对前端项目开展了脚本异常治理的工作,对生产上报的js error进行了整体排查,试图通过降低脚本异常的发生频次来提升相关...【详细内容】
2022-10-27  Tags: JavaScript  点击:(33)  评论:(0)  加入收藏
▌简易百科推荐
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  启辰8  今日头条  Tags: JavaScript   点击:(1)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  启辰8  今日头条  Tags:JavaScript   点击:(1)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  启辰8  今日头条  Tags:JavaScript   点击:(1)  评论:(0)  加入收藏
译者 | 涂承烨由于代码可见性低,使用Java脚本进行编码可能会很耗时。这里有12个优雅的JavaScript技巧,可以帮助你在2023年优化代码生成。JavaScript已经成为下一批开发人员中...【详细内容】
2023-01-06    51CTO  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
作为 Web 开发人员,我学会构建的第一批应用程序类型之一是待办事项列表。 这些简单但功能强大的工具使我们能够保持井井有条并专注于我们的任务,使它们成为任何希望提高工作...【详细内容】
2023-01-06  启辰8  今日头条  Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
WebRTC vs WebSocket1.什么是WebRTC?WebRTC 是一组 JavaScript API,可以在两个浏览器之间建立点对点连接, 实现音频和视频等数据的传输,也可以用它创建有语音/视频通话功能的应...【详细内容】
2023-01-04  前端进阶  今日头条  Tags:WebRTC   点击:(24)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  游戏开发乔     Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
有时候,我们需要知道当前网络的状态来做一些事情,以提升用户体验,这节课,我们来看一下,如何使用 JavaScript 来检测用户是否在线。检测连接状态我们可以利用navigator.onLine API...【详细内容】
2023-01-03  前端小智  今日头条  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
在PC时代,曾有个名为“变速齿轮”的神奇软件,可以加快或减慢系统时间。当时常用来修改游戏速度,可实现外挂一般的效果,很不可思议。本文,将用JavaScript复刻这一功能,实现一个用于...【详细内容】
2022-12-27   WangLiwen   网易号  Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
了解这33个JavaScript概念绝对会让你将来的职业生涯受益无穷。话不多说,直接进入主题!1. 调用栈 调用栈是解释器(如web浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本...【详细内容】
2022-12-24  程序猿最幽默  今日头条  Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
站内最新
站内热门
站内头条