50天50个项目，已完成3/5！🌻

言归正传，回到我的项目。我终于掌握了大部分内容，尤其是 DOM 操作，它变得越来越简单，但也越来越复杂了……

第21个项目：拖放
这个项目让我对拖放功能的工作原理有了基本的了解。
我一直在探索HTML拖放API，特别是这些事件：dragover、dragenter、dragleave和drop。在HTML中，我确定了哪些元素是可拖动的，为此我使用了“draggable”属性并将其设置为true。
我只需要记住，下次做类似的事情时，一定要添加preventDefault()来阻止自动渲染。所有这些事件都是我用来实现此功能的。

第22个项目：绘图应用程序
这个项目很有趣，我学习了Canvas API，这可是我一直无缘无故拖延的事情之一（？！）。事实上，一旦掌握了它，就会发现它非常有趣。在JavaScript代码中，首先会用到两个主要方法：getElementById() 方法用于获取HTML元素的引用，然后是 getContext() 方法用于获取元素的上下文（也就是画布渲染的位置）。

我使用和研究的方法主要是offsetX，offsetY。我使用鼠标事件来操作canvas HTML元素。

第23个项目：Kinetic CSS Loader
这个项目虽然简短，但引人入胜。主要事件发生在CSS样式文件中，我使用@keyframes并赋值变量来操作元素的类，这样我需要的元素在达到一定角度后就会旋转。我为Kinetic类应用了一个动画，然后使用@keyframes来控制何时应用动画。

第 24 个项目：内容占位符
发现了一个新的 CSS 属性！object-fit。根据文档，此属性设置如何调整替换元素的内容大小以适合其容器。在我的情况下，我使用了 cover。它让我想起了background-size，实际上它们是相当的，尽管使用 object-fit 我们的目标是图像。
我仍然对linear-gradient作为属性感到惊讶，特别是当动画发挥作用时！我使用关键帧在其空间中以不同程度管理动画。
最后，我发现了这个很酷的随机用户生成器 API（！！！！），如果您需要一些快速虚拟数据，它可以让您输入随机的用户配置文件。有点像古老的 Lorem，但至少你可以明白这里发生了什么哈哈。API的实际应用。

第25个项目：粘性导航栏
回到我以前觉得简单到可以称之为“基础”的东西，现在它给了我完全不同的感受。除了给导航栏设置固定位置外，我还修改了JavaScript，使其样式根据导航栏在窗口中的位置而变化。

第 26 个项目：垂直滑块
这里有很多古怪的计算，从索引跳到整数。我了解到，对于没有 CSS 或内联布局框的元素， Element.clientHeight 的只读属性为零；否则，它是元素的内部高度（以像素为单位）。它包括填充，但不包括边框、边距和水平滚动条（如果有）（感谢文档！）。

第27个项目：Toast通知
我刚开始第一份工作时，看到一个叫toast.js的文件就忍不住笑了！想想这到底是什么意思？但我很快就明白了，它不过是一个在触发某个事件时弹出的通知。createNotification方法会创建一个类名为“toast”的div，并将其放置在类名为“toasts”的div/容器中。然后，它会设置一个3秒的间隔，之后将其从DOM中移除（也就是让它消失）。

第 28 个项目：GitHub Profiles
这个项目中有几点值得注意：

1. 使用 Axios 代替 Fetch API（为了更好地处理错误，不需要将响应解析为 JSON 格式）；
2. 将 res.data 解构为我需要的内容，在本例中为 {data}，并连接字符串以转到我需要的任何链接；
3. 使用 JS 的模板文字将内容插入 DOM；
4. 使用 try/catch 刷新。getUser函数接受用户名作为参数，然后使用 axis 库查询 GitHub API。如您所见，获取数据后无需手动解析 JSON 响应，因为格式已经设置好了。

第29个项目：双击心形点击
这个项目非常值得在Instagram上晒一晒！尤其适合用来复习坐标系，这里有一个很棒的插图：https://images1.programmersought.com/197/16/16ee7586e072b18147a89cc2a101a44d.png，它能帮助我们理解pageX和clientX，以及offsetLeft和offsetTop之间的区别；
此外，它还提供了一种有趣的方法来重现“双击”事件。我们没有添加一个实际的“双击”事件，而是使用时间戳来判断连续第二次点击是否足够快，从而可以有效地将其视为双击。我添加了心形图像/图标，然后很快（1秒后）将其从DOM中删除。

第30个项目：自动文本效果。
这是一个非常棒且实用的小项目，尤其适用于动画网站，因为它可以实现标题的动画效果（例如，用于英雄横幅广告或类似的内容）。我花了一段时间才理解这背后的数学原理（咳咳，哈哈），但最终还是明白了！我创建了一个输入框，允许输入1到5之间的数字，该输入框将控制标题自动完成的速度。速度由setTimeout函数控制，它接收实际的writeText函数作为参数，并以速度作为时间间隔。

我不知道我可以简单地在名为“input”的输入元素上添加一个事件监听器，这样只要我在HTML代码中将number属性设置为“number”，我就可以仍然使用通常的e.target.value获取数字。我通过设置一个超时来控制句子的字母数量和写入速度，该超时将接受函数writeText并继续输入speed变量的条目。