标准蕃茄钟_12月开始设计项目：番茄钟

最新推荐文章于 2024-09-12 08:30:41 发布

cumian9828

最新推荐文章于 2024-09-12 08:30:41 发布

阅读量772

点赞数

文章标签： java python 人工智能编程语言机器学习

原文链接：https://www.freecodecamp.org/news/december-go-design-something-project-pomodoro-timer-9617ac5d733b/

版权

标准蕃茄钟

by K. Anthony

通过K.安东尼

12月开始设计项目：番茄钟 (December Go Design Something Project: Pomodoro Timer)

The end of the year has been sneaking up on me. I realized that I’ve been seriously neglecting my Free Code Camp practice.

今年年底一直在偷偷摸摸我。我意识到我一直在严重忽视我的免费代码训练营实践。

Seeing as how I had some free time on my hands, in between taking a pretty good, in-depth beginner course on D3.js, I decided to tackle my next front end project: the pomodoro timer.

看到我手上有空余的时间，在学习D3.js的一个很好的，深入的入门课程之间，我决定解决我的下一个前端项目：番茄计时器。

球场 (The Pitch)

So the project was to reverse-engineer this pen by Geoff Stoerbeck. Seems simple right?

因此，该项目是对Geoff Stoerbeck的这支笔进行反向工程。看起来很简单吧？

Wrong!

错误！

I could tell right from the beginning that this project was going to be more complex than the others had been, which is probably why I dragged my feet on it. But once I did get started, I found myself super motivated to work through the problems my idea presented.

我从一开始就可以断定这个项目将比其他项目更加复杂，这可能就是为什么我不愿意这样做。但是一旦开始，我发现自己非常有动力去解决我的想法提出的问题。

我的想法 (My Idea)

I took my inspiration both from the Geoff’s demo and from the pomodoro apps in the iOS App Store. Particularly this offering by NASA Trained Monkeys.

我从Geoff的演示和iOS App Store中的pomodoro应用程序中汲取了灵感。特别是美国宇航局训练的猴子提供的这项服务。

Essential functionality was to allow users to set both the session and break time and start the timer. They should also be able to pause the timer and restart it.

基本功能是允许用户设置会话和休息时间并启动计时器。他们还应该能够暂停计时器并重新启动它。

On the aesthetic side, I really liked the idea of filling up the circle as time passed in the reference pen, but I wanted to add on to that idea by creating little progress bars for each session. I also really liked the idea of shaping the progress bar like a tomato.

在美学方面，我真的很喜欢随时间在参考笔中填充圆圈的想法，但是我想通过为每个会话创建小的进度条来补充这个想法。我也非常喜欢将进度条像番茄一样成形的想法。

With those two things in the back of my mind, I resolved to start from the beginning and just get something working.

有了这两件事，我决心从头开始，然后开始工作。

查找插件 (Finding Plugins)

My first trial was to find some frameworks that would allow me to do what I wanted.

我的第一个尝试是找到一些框架，这些框架可以让我做自己想做的事情。

Naturally, I started with basic functionality. I needed something that would let me easily build a timer. There’s no shortage of timer plugins for jQuery, but I was able to sift through them fairly easily, eschewing anything that was pre-styled.

自然，我从基本功能开始。我需要一些可以让我轻松构建计时器的东西。 jQuery的计时器插件不缺，但是我能够相当轻松地筛选它们，避免使用任何预先设置样式的插件。

I experimented with jQuery Simple Timer by Carlous Souza. It has a lot of the functionality I wanted but didn’t have the built in ability to pause and restart the timers. So I kept looking until I ran across Jason Chavannes’ jQuery Timer, which had everything I wanted, including good demos and documentation.

我尝试了Carlous Souza的jQuery Simple Timer 。它具有我想要的许多功能，但没有内置的功能可以暂停和重新启动计时器。所以我一直在寻找，直到遇到Jason Chavannes的jQuery Timer为止，它具有我想要的一切，包括良好的演示和文档。

Using Jason’s plugin, I was able to get a basic timer working fairly quickly.

使用Jason的插件，我可以使基本计时器运行得相当快。

My structure mimics the Geoff’s demo, with two variables — one for break time and one for session time — that you can modify using plus and minus buttons.

我的结构模仿了Geoff的演示，其中有两个变量-一个用于休息时间，一个用于会话时间-您可以使用加号和减号按钮进行修改。

Once you’ve made your selections, you click the start button and the session timer starts. Once the session timer is complete, then that div hides and the break div shows and the break timer starts.

做出选择后，单击开始按钮，会话计时器将启动。会话计时器完成后，该div会隐藏并显示break div，然后启动break计时器。

进度条 (Progress Bars)

My next project was to try and add in progress bars. As I said, I originally wanted to try and create one shaped like a tomato. I hoped that my newfound beginner knowledge of SVG could come in handy and I even went to the trouble to create a handy little SVG tomato. (Trust me, it’s super cute.)

我的下一个项目是尝试添加进度条。就像我说的那样，我最初想尝试创建一个像番茄一样的形状。我希望我对SVG的新手入门知识会派上用场，我甚至不愿意创建一个方便的SVG小番茄。 (相信我，它超级可爱。)

But I abandoned that idea after a couple of days in favor of just getting a simple circle to work. I had to do a little thinking to realize that I wanted this image to act as a progress bar. But once I hit upon the idea, I went searching for another jQuery plugin. After going through a couple of options, I found that Rostyslav Bryzgunov’s jQuery Circle Progress plugin fit the bill perfectly.

但几天后，我放弃了这个想法，转而希望自己做一个简单的圈子。我不得不做一点思考，以意识到我希望该图像充当进度条。但是一旦我想到了这个主意，我便开始寻找另一个jQuery插件。经过几个选择之后，我发现Rostyslav Bryzgunov的jQuery Circle Progress插件非常适合。

The plugin makes it super easy to create a stand-alone progress bar, but I needed it to work within my larger app. I needed to be able to start it, pause it, and resume it.

该插件使创建一个独立的进度条变得非常容易，但是我需要它在我的大型应用程序中工作。我需要能够启动它，暂停它并继续它。

Again, this was where I had a lot of issues. Documentation for the plugin mentions a way to stop the animation and, through days of experimentation, I was becoming more and more familiar with the variables involved. I was able to create a half-solution by updating the animationProgress property of the animation call.

同样，这是我遇到很多问题的地方。该插件的文档中提到了一种停止动画的方法，经过几天的实验，我对所涉及的变量越来越熟悉。我能够通过更新动画调用的animationProgress属性来创建半解。

However, I found that that this only worked for the first pause. If you were to resume the timer, let it run, pause it, and try to resume it again, animationProgess stayed stuck at the older value.

但是，我发现这仅在第一次暂停时有效。如果要恢复计时器，请让其运行，暂停并尝试再次恢复它，animationProgess会停留在较早的值。

After about 3 days, I broke down and asked on StackOverflow. As is often the way, I got a quick answer that did the trick.

大约三天后，我崩溃了，问了StackOverflow。像往常一样，我得到了解决问题的快速答案。

So, 89 versions in, I was finally able to add the progress bar to my app.

因此，在89个版本中，我终于能够将进度条添加到我的应用程序中。

搭便车 (The Hitch)

There always has to be a problem, right? I discovered that while my progress bar would keep right on ticking, whether or not the window tab was active. I’d built the timer in such a way that the browser paused its progress when you weren’t looking at it. Not fun.

总是有问题吧？我发现，尽管进度栏将一直保持选中状态，但窗口选项卡是否处于活动状态。我构建计时器的方式是，当您不查看计时器时，浏览器会暂停其进度。不好玩。

I was looking around for a way to fix it when I moseyed back over to the timer GitHub repo and saw that other folks had brought up this issue and the code author had begun working on a solution! It would mean using a non-canonical branch of the code but, I was game.

当我回到计时器GitHub存储库，看到其他人提出了这个问题，并且代码作者已经开始研究解决方案时，我正在寻找一种修复它的方法！这将意味着使用代码的非规范分支，但我是游戏。

I refactored my code to use the new version. I had to add back in some features that had been removed, most notably the isActive property, and I also had to figure out how to update the new countdown parameter. But in the end, I got it running smoothly after about 5 or 6 hours of work.

我将代码重构为使用新版本。我必须重新添加一些已删除的功能，尤其是isActive属性，并且还必须弄清楚如何更新新的倒数参数。但是最后，经过大约5或6个小时的工作，我才能使它平稳运行。

抛光 (Polishing Up)

I added a few aesthetic bits at the end — mostly fonts and styling. I was also able to add back in my super sweet tomato, albeit as a PNG instead of an SVG.

最后，我添加了一些美学元素-主要是字体和样式。我还可以添加超级甜番茄，尽管它是PNG而不是SVG。

One thing that I discovered is that the code is not quite as DRY as I might like. The way the functions are written, they can’t access global variables, so I’ve had to make variables more than once, within specific scopes. However, I think the code is still pretty readable. I also took the time to comment the code to point out areas of interest.

我发现的一件事是代码并不像我想的那样干。函数的编写方式无法访问全局变量，因此我不得不在特定范围内多次创建变量。但是，我认为代码仍然可读性强。我还花了一些时间注释代码以指出感兴趣的领域。

This project was the most difficult so far, but I’m proud of the outcome.

这个项目是迄今为止最困难的，但是我为结果感到骄傲。

Probably the best thing about the method Free Code Camp chose for these projects is that they aren’t just going step by step through a tutorial. You have a project with functionality for reference but you have to figure out how to make things work on your own.

Free Code Camp为这些项目选择的方法最好的一点是，它们不只是一步一步地学习教程。您有一个具有参考功能的项目，但是您必须弄清楚如何使事情自己完成。

At the end of it, you really feel a sense of accomplishment. Plus you’ve actually put your new knowledge to work. You also get a nifty portfolio piece!

最后，您真的会感到成就感。另外，您实际上已经将新知识投入工作。您还可以获得精美的作品集！