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

嗨，我是 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上关注我以获取更多更新和编码技巧。我很乐意在下面的评论中听到您自己的编码挑战和成功！