50天50个项目，4/5完成了！🌻

时间过得真快，我现在已经完成了 40 个小项目，同时还在装修房子和搬家。可以肯定地说，这两个项目都遇到了一些小问题 😂
我终于能更轻松地使用 DOM 和字符串插值了！耶！
以下是我过去十多天做的事情：

第31个项目：密码生成器

好吧，这个项目是迄今为止最好的项目之一，因为它远不止是一个简单的演示。我们的目标是构建一个密码生成器，确保满足 5 个条件：密码长度超过 20 个字符，并且需要包含大写和小写字母、符号和数字。
为了生成每个类别的随机元素，我们利用ASCII 码表和String 对象的 fromCharCode属性。
为了生成大写和小写字母，我们取一个随机数并将其乘以 26（考虑到字母表的长度）。然后，我们分别将 97 或 65 添加到小写和大写字母上。这是因为第一个小写字母 a 的符号是 97，而第一个大写字母 A 的代码是 65。
我们对数字执行相同的操作（尽管我们显然将随机数限制为 10），在本例中我们使用 48 的代码，因为 0 的字符代码是 48。

虽然这不是生成随机字符的唯一方法，但我认为这是最简单的方法之一。说实话，
生成密码的实际函数对我来说并不容易理解。
本质上，如果没有检查或填写任何条件，则不返回任何密码；否则，循环遍历条件的长度（在我的情况下是 4 + 长度），对于每个为真的类型，调用相对密码来生成随机字符。虽然概念相当简单，但其中有很多循环和 forEaching 操作，我还需要改进😊

第32个项目：好、便宜、快

一个项目不可能同时兼顾三件事：好、便宜、快，这千真万确。你只能在这三者中挑选两个，每个优秀的项目经理都知道这一点。这个项目相对简单，不过我们没有使用简单的复选框，而是设计了一个滚动球，利用动画效果可以从左向右滑动，然后再滑回。

我们使用了两个 @keyframes 查询来管理 slideOn 和 slideOff 动画。slideOn 与 slideOff 相反，并且转换使用 transformX 属性根据 div 中的位置来回滑动球。

第33个项目：Notes App

现在我们又完成了一个非常有用的项目——一个可爱的笔记应用。听起来可能有点老套，而且用滥了，不过这次我们用了一些新东西。而且我发现，虽然不能像抓取textarea那样抓取div的值（哈哈），但我可以通过查找div的innerHTML值来获取它的内容。

我遇到的第一个新东西是 Marked 库。https ://marked.js.org/
我们使用它，因为它相当轻量，并且实现了所有 Markdown 功能，涵盖了案例支持的风格和规范。在我们的案例中，我们只是简单地将文本环绕在 Marked 库周围。

我在日常工作中使用 localStorage，因此我也很乐意在这个应用中使用它。关于 localStorage（可在开发者工具的“应用程序”选项卡中访问），需要了解的重要一点是，它只能存储字符串类型的键值对。如果我想将数组或对象存储为值，则必须对其进行字符串化（例如使用 JSON.stringify）。sessionStorage 是另一种类似的数据存储方式，但刷新浏览器时数据会丢失。

第34个项目：动画倒计时

好吧，我又学到了另一种让 div 居中的方法（哈哈，这可能是我谷歌搜索次数最多的 CSS 相关问题）。基本上，只需将其固定在页面内，并为其分配顶部和左侧各 50% 的位置。然后，由于你想让整个元素居中，而不仅仅是左侧，你需要使用 transform:translate(-50%, -50%)，这样它实际上就位于页面（或元素）本身的中心了。

我还发现有一个名为 animationend 的事件监听器，它会在 CSS 动画完成时触发！在我看来，这对于任何 DOM 来说都超级方便。整个动画都由这个事件监听器管理，这让我可以根据需要添加或删除元素上的类。

在我的特定情况下，如果动画名称是 goIn 或 goOut，则会触发相应的关键帧动画。

第35个项目：图片轮播

我认为这个项目融合了其他许多项目的特点。比其他一些项目稍微容易一些，但在 X 轴的计算方面略有技巧。 像往常一样，我们混合使用了索引和长度来了解要移动的内容、移动方向以及何时重置轮播。

第36个项目：悬浮滑板

我非常喜欢编写这个小项目的代码，因为我小时候有一件T恤，它的功能和这个一样！我有一个由方块组成的板子，每次我把鼠标悬停在一个方块上，方块就会改变颜色。虽然我并没有真正学到什么真正意义上的新东西，但我玩得很开心，而且我能够将迄今为止学到的大部分知识付诸实践，这真是令人欣慰。
这里需要记住的是鼠标悬停和鼠标释放的工作原理：鼠标悬停相当于将鼠标悬停在一个元素上，而鼠标释放相当于将焦点从元素上移开。

第37个项目：Pokedex

参与这个项目真的很有趣，而且 PokeAPI ( https://pokeapi.co/ ) 也超级好用！我们竟然只用 JavaScript 代码中的变量和字符串插值就能动态添加新卡片，真是太神奇了。

这里用到了不少 JavaScript 方法，让我有机会复习一下之前学过的知识。具体来说，就是：slice、padStart、find和indexOf。

第 38 个项目：移动标签导航。
这是一个简单的项目，模拟了一部手机及其下方的移动菜单。它与我们之前做过的一些项目类似。它的核心功能是添加和删除“显示/活动”类，以及在点击特定按钮时显示相应的图像。

第 39 个项目：密码强度
一个功能练习，看起来也很棒！我以前从未使用过 Tailwind CSS，但我每天都用 Bootstrap，我觉得它们很像。能够在 HTML 代码中设置表单样式真的很方便，不用在 CSS 文件中费心。

就 CSS 本身而言，使用 filter 属性模糊元素如此简单却如此有效，这本身就说明了一切。如果你像我一样将它应用到背景上，它确实会改变整个页面的外观！

第 40 个项目：3D 盒子背景

好吧，我意识到处理动画和过渡时，数学和逻辑都得心应手。这个项目写起来很酷，也是练习各种变换属性的有趣练习。

我终于用上 rotateZ 了！它的作用是让元素绕 z 轴旋转，而不会让元素看起来怪怪的。我用它来把图片旋转了 360 度，非常完整。 对我来说，它的 JavaScript 部分最复杂，因为数学不是我的强项。我使用了一个嵌套循环（虽然有点可惜，但在这个例子中很有用）来控制图片的旋转时间和方式。由于容器尺寸为 500x500，每行有 4 个盒子，所以 4 行的旋转顺序必须按照 125-125-125-125 来计算。所以当我点击按钮时，所有盒子都会根据它们的索引沿着 Z 轴旋转。