最近在follow一个名为The-Programmers-Idea的书,里面有作者提出的很多小project的想法。我的想法是利用自身上班后的闲暇时间慢慢做完这些project。这些project基本都不难,但是想要做好确实需要一番心思,由于需要上班,平时还需要自学很多东西,因此project也是点到为止,不追求完美。该书一共有大约200左右的项目,想要都完成可能需要几年的时间...
这次的项目是选自书中Numbers章节里面的Alarm Clock,项目要求并不难,就是简单的做一个闹钟就可以了,为了完成这次的小项目,我决定采用前端技术来制作:
- 框架: ReactJS
- 编程语言:Javascript,HTML,CSS
- 包管理及工具:npm,webpack
- IDE:Atom
由于代码部分比较多,因此在这里就不一一展示代码了,代码的托管我放到了Github,有需要的朋友可以在下面的链接看到:
效果展示:
-
项目基本直观展示:
-
时间设定:
-
闹钟时间设定之后:
- 当到达闹铃时间后,会自动播放一个mp3片段来模拟真实的情况,播放时间为20s
由于项目里面使用了google的字体,如果没有cdn的话,国内访问可能有一些延迟或者访问不了,但是这并不影响项目的呈现,只是字体可能不能正确显示。
有不好的地方还请大家多多见谅。