嗨，我是 Blazej， 从事计算器项目非常有趣，我想说，这是一种不同的体验。不同于 Etch-a-Sketch，后者似乎更难。那么，这是怎么可能的呢？ 我想，答案可能不在于练习的难度，而在于其他东西。让我们从头开始。 启动计算器项目 我于 2024 年 5 月 2 日开始研究计算器。第一次课程花了我三个小时，在此期间我设法设置并运行了它。当时大约是中午，所以我决定做最后的努力，吃晚饭，然后锻炼身体。 那天下午我想多写一点代码，因为我知道我的朋友第二天要来拜访，而且她要住三个晚上。 与其他忠诚的奥丁教徒一样，我不想停止编码，尤其是计算器，因为我认为这是 Foundations 中最重要的项目。  意想不到的灵感 正当我准备关掉电脑时，  突然出现。我看了一会儿，在他说喜欢编码后就停了下来。 ForrestKnight 的 YouTube 视频 我仔细考虑了一下，作为一名刚刚完成编码但仍然经常问自己这个问题的初学者，以下是我的看法。 对于像我这样从小就接触电脑、玩过很多游戏、对事物的工作原理有基本了解的人来说，答案并不简单。 但是，我之前从来没有编写过代码！ 初始编码经验 然而，我注意到，我编写的代码越多，看到代码运行得越多，我就越享受这个过程。计算器尤其如此，总体来说运行很顺利，我设法避免了严重卡住——嗯，大部分情况下都是如此。我稍后会谈到这一点。 这个项目感觉比 Etch-a-Sketch 项目容易得多，在 Etch-a-Sketch 项目中，我花了两天时间来实现渐变颜色变化逻辑。编码当然并不容易，但对于这个项目，我花了四天时间每天投入大约 1.5 到 2 个小时，这是一次可控且有益的经历。 每次打开 VSCode，我都感觉非常高效，它帮助我快速解决了任务。在工作过程中最有趣的是，我可以想象其他也可以解决这个练习的选项。 我感觉自己就像一个孩子，正在建造一些疯狂的乐高科技汽车，并想象着要再次添加哪些功能。 感觉很奇怪。 享受过程 我到底想表达什么意思？我知道我可以创建一个包含所有数字按钮事件的函数，而不是创建九个单独的按钮。 然而，我忘了如何正确操作，于是决定继续尝试 9 种不同的方法，但我向自己保证，我会回去阅读文档，了解如何解决这个问题。正如我所想的那样。  我原本以为我会再花五个小时左右的时间来完成某件事，但实际上并没有发生这种情况。我用 244 行代码完成了它的工作。   CSS 面临的挑战 现在，是时候开始使用 CSS 并稍微设计一下这个项目了。好吧，那时我陷入了困境。这似乎比编写 JavaScript 更难。 我简直不敢相信！我知道我需要在这个项目中使用 Flexbox，但按钮看起来与我之前制作的 Etch-a-Sketch 有点不同。在 Etch-a-Sketch 中，我被要求使用循环制作网格：  每当我遇到 Flexbox 问题时，我总会翻阅 在我看来，没有比这篇文章更好地解释它们的工作原理了。 Josh 的博客文章。 但我不确定它是否适用于计算器，因为并非所有按钮都相同。例如，我希望 0 更大一些。 我向下滚动了文章，因为我记得那里提到过 CSS Grid。事实证明我确实需要在这里使用它。 此外，Odin 展示的计算器也是使用 CSS Grid 设计的。  探索 CSS 网格 此时，我有点失落，因为我记得我们根本没有触碰网格。 我开始用谷歌搜索。我找到了什么？一篇很长的文章，对如何使用它进行了相当高级的解释。我认为现在还不是时候，并假设我们稍后会接触到网格。 除此之外，练习中只提到了 Flexbox，所以是的，我希望我们也能学习网格。如果没有，我会自己在某个时候再回来学习它。 小更新 - 第二天，我在 Odin Discord 上看到了这篇帖子：  最终调整和 UI 设计 我决定使用几个 div，然后重新组合 HTML 中的按钮 经过又一次学习之后，我发现这个计算器看起来和普通设备有些相似。  添加键盘支持 对我来说最后一步是提供键盘支持。  该死！这可不简单，我不得不回到活动课程并多次阅读文档，才能理解这些键盘键的工作原理。 这非常困难，因为事件冒泡让我感到困惑。现在是时候创建 1 个单击按钮的函数和 2 个调用了。一个用于鼠标“单击”，另一个用于键盘“按下”。 我设法对所有数字和等号按钮进行排序，但决定不使用运算符，因为我必须使用运算符的对象来改变我的逻辑。 如果我稍后需要查看它，这个设置似乎更容易掌握。 然而，我可能是错的，所以不要想当然。 完成的项目可以在这里看到： 计算器 反思与经验教训 这里的教训是什么？我很享受制作和设计应用程序的过程，并且学到了很多关于事件的知识。我强烈建议你通过这个来获得额外的学分！ 如果您喜欢这个故事并发现这些技巧很有帮助，请在 上关注我以获取更多更新和编码技巧。我很乐意在下面的评论中听到您自己的编码挑战和成功！ Twitter

Read My Stories

該音頻是用故事的原始語言製作的！

计算器项目：为何它更容易，却又充满障碍

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Telegram：加密岛通往大陆的桥梁

扬帆起航：利用数据湖开发生产级 RAG 应用程序

从论坛到信息流：社交媒体算法如何塑造数字互动

如何将您的工作流程提高 10 倍：17 个必备应用程序

Telegram：加密岛通往大陆的桥梁

扬帆起航：利用数据湖开发生产级 RAG 应用程序

从论坛到信息流：社交媒体算法如何塑造数字互动

如何将您的工作流程提高 10 倍：17 个必备应用程序

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps