paint-brush
计算器项目:为何它更容易,却又充满障碍经过@codebyblazej
313 讀數
313 讀數

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

经过 CodeByBlazej5m2024/06/21
Read on Terminal Reader

太長; 讀書

我完成了计算器项目,发现它比 Etch-a-Sketch 项目容易得多,但仍然面临一些障碍,尤其是 CSS。我分享了我的旅程、编码技巧、资源和解决问题的策略。尽管面临挑战,但我享受了这个过程,学到了很多东西,并为同行程序员提供了实用的建议。查看我的完整故事和技巧!
featured image - 计算器项目:为何它更容易,却又充满障碍
CodeByBlazej HackerNoon profile picture

嗨,我是 Blazej,


从事计算器项目非常有趣,我想说,这是一种不同的体验。不同于 Etch-a-Sketch,后者似乎更难。那么,这是怎么可能的呢?


我想,答案可能不在于练习的难度,而在于其他东西。让我们从头开始。

启动计算器项目

我于 2024 年 5 月 2 日开始研究计算器。第一次课程花了我三个小时,在此期间我设法设置并运行了它。当时大约是中午,所以我决定做最后的努力,吃晚饭,然后锻炼身体。


那天下午我想多写一点代码,因为我知道我的朋友第二天要来拜访,而且她要住三个晚上。


与其他忠诚的奥丁教徒一样,我不想停止编码,尤其是计算器,因为我认为这是 Foundations 中最重要的项目。



计算器的第一张屏幕截图



意想不到的灵感

正当我准备关掉电脑时, ForrestKnight 的 YouTube 视频突然出现。我看了一会儿,在他说喜欢编码后就停了下来。


我仔细考虑了一下,作为一名刚刚完成编码但仍然经常问自己这个问题的初学者,以下是我的看法。


对于像我这样从小就接触电脑、玩过很多游戏、对事物的工作原理有基本了解的人来说,答案并不简单。


但是,我之前从来没有编写过代码!

初始编码经验

然而,我注意到,我编写的代码越多,看到代码运行得越多,我就越享受这个过程。计算器尤其如此,总体来说运行很顺利,我设法避免了严重卡住——嗯,大部分情况下都是如此。我稍后会谈到这一点。


这个项目感觉比 Etch-a-Sketch 项目容易得多,在 Etch-a-Sketch 项目中,我花了两天时间来实现渐变颜色变化逻辑。编码当然并不容易,但对于这个项目,我花了四天时间每天投入大约 1.5 到 2 个小时,这是一次可控且有益的经历。


每次打开 VSCode,我都感觉非常高效,它帮助我快速解决了任务。在工作过程中最有趣的是,我可以想象其他也可以解决这个练习的选项。


我感觉自己就像一个孩子,正在建造一些疯狂的乐高科技汽车,并想象着要再次添加哪些功能。 感觉很奇怪。

享受过程

我到底想表达什么意思?我知道我可以创建一个包含所有数字按钮事件的函数,而不是创建九个单独的按钮。


然而,我忘了如何正确操作,于是决定继续尝试 9 种不同的方法,但我向自己保证,我会回去阅读文档,了解如何解决这个问题。正如我所想的那样。



计算器数字按钮



我原本以为我会再花五个小时左右的时间来完成某件事,但实际上并没有发生这种情况。我用 244 行代码完成了它的工作。



244 行代码



CSS 面临的挑战

现在,是时候开始使用 CSS 并稍微设计一下这个项目了。好吧,那时我陷入了困境。这似乎比编写 JavaScript 更难。


我简直不敢相信!我知道我需要在这个项目中使用 Flexbox,但按钮看起来与我之前制作的 Etch-a-Sketch 有点不同。在 Etch-a-Sketch 中,我被要求使用循环制作网格:



蚀刻素描网格



每当我遇到 Flexbox 问题时,我总会翻阅Josh 的博客文章。在我看来,没有比这篇文章更好地解释它们的工作原理了。


但我不确定它是否适用于计算器,因为并非所有按钮都相同。例如,我希望 0 更大一些。


我向下滚动了文章,因为我记得那里提到过 CSS Grid。事实证明我确实需要在这里使用它。


此外,Odin 展示的计算器也是使用 CSS Grid 设计的。



Odin 计算器示例



探索 CSS 网格

此时,我有点失落,因为我记得我们根本没有触碰网格。


我开始用谷歌搜索。我找到了什么?一篇很长的文章,对如何使用它进行了相当高级的解释。我认为现在还不是时候,并假设我们稍后会接触到网格。


除此之外,练习中只提到了 Flexbox,所以是的,我希望我们也能学习网格。如果没有,我会自己在某个时候再回来学习它。


小更新 - 第二天,我在 Odin Discord 上看到了这篇帖子:



不和谐网格



最终调整和 UI 设计

我决定使用几个 div,然后重新组合 HTML 中的按钮



重组 HTML



经过又一次学习之后,我发现这个计算器看起来和普通设备有些相似。



用户界面就绪



添加键盘支持

对我来说最后一步是提供键盘支持。



键盘支持的噩梦



该死!这可不简单,我不得不回到活动课程并多次阅读文档,才能理解这些键盘键的工作原理。


这非常困难,因为事件冒泡让我感到困惑。现在是时候创建 1 个单击按钮的函数和 2 个调用了。一个用于鼠标“单击”,另一个用于键盘“按下”。


我设法对所有数字和等号按钮进行排序,但决定不使用运算符,因为我必须使用运算符的对象来改变我的逻辑。


如果我稍后需要查看它,这个设置似乎更容易掌握。


然而,我可能是错的,所以不要想当然。


完成的项目可以在这里看到:


计算器

反思与经验教训

这里的教训是什么?我很享受制作和设计应用程序的过程,并且学到了很多关于事件的知识。我强烈建议你通过这个来获得额外的学分!


如果您喜欢这个故事并发现这些技巧很有帮助,请在Twitter上关注我以获取更多更新和编码技巧。我很乐意在下面的评论中听到您自己的编码挑战和成功!