day49-Todo List(待办事项列表)

50 天学习 50 个项目 - HTMLCSS and JavaScript

day49-Todo List(待办事项列表)

效果

在这里插入图片描述

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</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <h1>todos</h1>
    <form id="form">
        <!-- 输入 -->
        <!--autocomplete="off" 用于控制浏览器是否自动填充输入字段的功能。它主要用于阻止浏览器在用户输入时自动弹出先前输入过的值或历史记录。 -->
        <!-- 由于会多次输入,所以添加autocomplete="off" 以提高用户体验 -->
        <input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off">
        <!-- 显示todo list -->
        <ul class="todos" id="todos"></ul>
    </form>
    <small>左键单击以切换完成。<br> 右键单击可删除待办事项</small>

    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    color: #444;
    font-family: 'Poppins', sans-serif;
    /* 子元素竖直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

/* 标题 */
h1 {
    color: aqua;
    font-size: 10rem;
    text-align: center;
    opacity: 0.5;
}

/* 带有input的form表单 */
form {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8),
        4px 0px 10px rgba(255, 255, 255, 0.9);
    max-width: 100%;
    width: 400px;
}

/* 输入框 */
.input {
    border: none;
    color: #444;
    font-size: 2rem;
    padding: 1rem 2rem;
    display: block;
    width: 100%;
}

.input::placeholder {
    color: #d5d5d5;
}

.input:focus {
    outline-color: aqua;
}

/* 显示区域 */
.todos {
    background-color: #fff;
    list-style-type: none;
}

/* 每一项 */
.todos li {
    border-top: 1px solid #e5e5e5;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 1rem 2rem;
}

/* 完成后,添加删除线 */
.todos li.completed {
    color: #b6b6b6;
    text-decoration: line-through;
}

/* 提示文本 */
small {
    color: #b5b5b5;
    margin-top: 1rem;
    text-align: center;
}

script.js


// 重点 flex text-decoration: line-through; localStorage JSON
// 1.获取元素节点
const form = document.getElementById('form')//表单
const input = document.getElementById('input')//输入框
const todosUL = document.getElementById('todos')//todos容器
// 获取本地存储的todolist
const todos = JSON.parse(localStorage.getItem('todos'))
// 如果有,则遍历,显示
if (todos) {
    todos.forEach(todo => addTodo(todo))
}
// 表单提交 即输入框回车后
form.addEventListener('submit', (e) => {
    // 阻止表单默认行为 不希望发生页面刷新或导航行为
    e.preventDefault()
    // 添加todo
    addTodo()
})
// 函数 添加todo
function addTodo(todo) {
    // 获取input的值
    let todoText = input.value
    // 如果todo存在值,即本地存储时有值,比如10行代码执行时
    if (todo) {
        todoText = todo.text
    }
    // 值存在,防止表单提交后,但是在表单的input并未输入值
    if (todoText) {
        // 创建li
        const todoEl = document.createElement('li')
        // 本地存储,并且时完成的,则添加删除线
        if (todo && todo.completed) {
            todoEl.classList.add('completed')
        }
        // 文本
        todoEl.innerText = todoText
        // 单机,即左键 完成
        todoEl.addEventListener('click', () => {
            todoEl.classList.toggle('completed')
            // 更新本地存储
            updateLS()
        })
        // 右键
        todoEl.addEventListener('contextmenu', (e) => {
            // 阻止右键的默认行为,即跳出菜单
            e.preventDefault()
            // 移除dom节点
            todoEl.remove()
            // 更新本地存储
            updateLS()
        })
        // 添加到ul中的第一个位置
        todosUL.insertBefore(todoEl, todosUL.children[0])
        // 置空input
        input.value = ''
        // 更新本地存储
        updateLS()
    }
}
// 函数:更新本地存储
function updateLS() {
    // 获取所有的todo
    let todosEl = document.querySelectorAll('li')
    // 先设置空的
    const todos = []
    // 再遍历添加每一项
    todosEl.forEach(todoEl => {
        todos.push({
            text: todoEl.innerText,//文本
            completed: todoEl.classList.contains('completed')//是否完成
        })
    })
    // 本地存储
    localStorage.setItem('todos', JSON.stringify(todos))
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/52650.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

word xls有用小技巧

不少office、代码编辑等软件&#xff0c;很简单高效小技巧。Word xlsx 某一行或列不动&#xff1a; 视图》冻结窗格》冻结首行 eclispe 全局搜索 CtrlH 制定变量、名称搜索 鼠标左键点中CtrlAltG

el-table 表格头部合并

<el-table v-loading"listLoading" :key"tableKey" :data"list" stripe border fit highlight-current-rowstyle"width: 100%;" size"mini"><el-table-column label"第一行" align"center">…

使用DataX实现mysql与hive数据互相导入导出

一、概论 1.1 什么是DataX DataX 是阿里巴巴开源的一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle 等)、HDFS、Hive、ODPS、HBase、FTP 等各种异构数据源之间稳定高效的数据同步功能。 1.2 DataX 的设计 为了解决异构数据源同步问题&#xf…

HTML5前端开发工程师的岗位职责说明(合集)

HTML5前端开发工程师的岗位职责说明1 职责 1、根据产品设计文档和视觉文件&#xff0c;利用HTML5相关技术开发移动平台的web前端页面; 2、基于HTML5.0标准进行页面制作&#xff0c;编写可复用的用户界面组件; 3、持续的优化前端体验和页面响应速度&#xff0c;并保证兼容性和…

C# NDArray System.IO.FileLoadException报错原因分析

C# NDArray System.IO.FileLoadException 报错原因分析&#xff1a; 1.NuGet程序包版本有冲突 2.统一项目版本 1.打开解决方案NuGet程序包设置 2.查看是否有版本冲突 3.统一版本冲突

【数据结构与算法】基数排序

基数排序 基数排序&#xff08;Radix Sort&#xff09;属于“分配式排序”&#xff0c;又称“桶子法”或 bin sort&#xff0c;顾名思义&#xff0c;它是通过键值的各个位的值&#xff0c;将要排序的元素分配至某些“桶”中&#xff0c;达到排序的作用。基数排序法是属于稳定性…

【UE5】快速认识入门

目录 &#x1f31f;1. 快速安装&#x1f31f;2. 简单快捷键操作&#x1f31f;3. 切换默认的打开场景&#x1f31f;4. 虚幻引擎术语 &#x1f31f;1. 快速安装 进入Unreal Engine 5官网进行下载即可&#xff1a;UE5 &#x1f4dd;官方帮助文档 打开后在启动器里创建5.2.1引擎…

Java并发系列之一:JVM线程模型

什么是线程模型&#xff1a; Java字节码运行在JVM中&#xff0c;JVM运行在各个操作系统上。所以当JVM想要进行线程创建回收这种操作时&#xff0c;势必需要调用操作系统的相关接口。也就是说&#xff0c;JVM线程与操作系统线程之间存在着某种映射关系&#xff0c;这两种不同维…

Qt信号与槽机制的本质

引入 对象与对象之间的通信有多个方式&#xff0c;如果我们要提供一种对象之间的通信机制。这种机制&#xff0c;要能够给两个不同对象中的函数建立映射关系&#xff0c;前者被调用时后者也能被自动调用。 再深入一些&#xff0c;两个对象如果都互相不知道对方的存在&#xff…

搭建网站 --- 快速WordPress个人博客并内网穿透发布到互联网

文章目录 快速WordPress个人博客并内网穿透发布到互联网 快速WordPress个人博客并内网穿透发布到互联网 我们能够通过cpolar完整的搭建起一个属于自己的网站&#xff0c;并且通过cpolar建立的数据隧道&#xff0c;从而让我们存放在本地电脑上的网站&#xff0c;能够为公众互联…

【phaser微信抖音小游戏开发002】hello world!

执行效果&#xff1a; 将以下代码文本内容&#xff0c;放入到game.js中即可。目录结构如下图 import ./js/libs/weapp-adapter import ./js/libs/symbolGameGlobal.window.scrollTo () > { };//防止真机出错 import Phaser from ./js/phaser//引入Phaservar {windowWidth, …

在线阅读版:《2023中国软件供应链安全分析报告》全文

聚焦源代码安全&#xff0c;网罗国内外最新资讯&#xff01; 专栏供应链安全 数字化时代&#xff0c;软件无处不在。软件如同社会中的“虚拟人”&#xff0c;已经成为支撑社会正常运转的最基本元素之一&#xff0c;软件的安全性问题也正在成为当今社会的根本性、基础性问题。 随…

28_计算机网络(Computer Networks)基础

本篇介绍计算机网络的基础知识。 文章目录 1. 计算机网络历史2. 以太网" (Ethernet)2.1 以太网" (Ethernet)的简单形式及概念2.2 指数退避解决冲突问题2.3 利用交换机减少同一载体中设备2.4 互联网&#xff08;The Internet&#xff09;2.5 路由(routing)2.6 数据包…

基于SpringBoot+Vue的财务管理系统设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

Docker基础命令(一)

Docker使用1 一、运行终端 打开终端&#xff0c;输入docker images &#xff0c;如果运行正常&#xff0c;表示docker已经可以在本电脑上使用了 二、docker常用命令 指令说明docker images查看已下载的镜像docker rmi 镜像名称:标签名删除已下载的镜像docker search 镜像从官…

STM32 LWIP UDP 一对一 一对多发送

STM32 LWIP UDP通信 前言设置 IP 地址UDP函数配置实验结果单播发送&#xff0c;一对一发送广播发送&#xff0c;一对多发送 可能遇到的问题总结 前言 之前没有接触过网络的通信&#xff0c;工作需要 UDP 接收和发送通信&#xff0c;在网上没有找到一对一、一对多的相关例程&am…

Kata Containers

Kata Containers&#xff08;简称 Kata 或 Kata Containers&#xff09;是一个开源的容器运行时项目&#xff0c;它提供了一种轻量级的虚拟化解决方案&#xff0c;用于在容器内运行应用程序。Kata Containers 结合了虚拟机&#xff08;VM&#xff09;和容器的优势&#xff0c;旨…

【容器编排】初识 Kubernetes

目录 1.简介 2.为什么需要 k8s 3.k8s 能做什么? 4.k8s 不是什么? 1.简介 摘取官网: 概述 | Kubernetes Kubernetes 这个名字源于希腊语&#xff0c;意为舵手或飞行员。k8s 这个缩写是因为 k 和 s 之间有八个字符的关系。 Google 在 2014 年开源了 Kubernetes 项目。 Kub…

gti 远程操作

目录 一. 分布式版本控制管理系统 1. 理解分布式版本控制管理系统 二. 创建远程仓库 ​编辑 ​编辑 三. 克隆远程仓库_HTTP 四. 克隆远程仓库_SSH 配置公钥 添加公钥 五. git 向远程仓库推送 六. 拉取远程仓库 七. 忽略特殊文件 八. 配置别名 一. 分布式版本控制管理…

【腾讯云 Cloud Studio 实战训练营】体验搭建软件系统,无经验也能做开发

文章目录 前言IDE 解放开发者的生产力功能强大的 IDE快速搭建 Vue 开发环境注册 Cloud Studio进入Vue预置开发环境安装相关依赖包主文件 main.js 引入相关库和包首页增加移动端默认样式增加主要代码 IDE 的适用场景总结 前言 云计算技术的不断发展为代码开发带来了全新的体验&…