为了让初学者有项目可入门，我整理了这23个开源项目……

亦凉 2022-09-09 12:44 179阅读 0赞

> 作者：Miguel Nunez  
> 译者：前端小智  
> 来源：dev

> 有梦想，有干货，微信搜索 **【大迁世界】** 关注这个在凌晨还在刷碗的刷碗智。
> 
> 本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

很多初学者会时不时问我，经常看视频或书之类的教程，但久了没用就很容易的忘记，这个要怎么解？这个真是不好解，因为我也经常这样的，我大都建议多做项目来巩固记忆，但初学者对于比较复杂的项目很不好上手，所以今天分享 25 个初学者的比较容易上手的开源项目，希望对初学者的你们有所帮助，有时间就自己参考事例做一遍，如果没有思路就看源码是怎么实现，相信你会很有收获的。

### 1. Colors ###

github: https://github.com/iamcodefoxx/Colors

线上演示例子：https://iamcodefoxx.github.io/Colors/

![26ab6f35d6d1f3a14246c8eda5a3083d.gif][]

### 2. Hex colors gradient ###

**github:** https://github.com/iamcodefoxx/Hex-Colors-Gradient

线上演示例子：https://iamcodefoxx.github.io/Hex-Colors-Gradient/

![3b672fde19a36564a5d76c84c67aa412.gif][]

### 3. Random quote generator ###

**GitHub:** https://github.com/iamcodefoxx/Random-Quote-Generator

线上演示例子：https://iamcodefoxx.github.io/Random-Quote-Generator/

![d9b08e6a9fa9699fef5573c8b6c1a363.gif][]

### 4. The message ###

**github:** https://github.com/iamcodefoxx/The-message

线上演示例子：https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h

![f8109b7abc23df5ef69d5369b71b29c7.gif][]

### 5. Counter ###

**github:** https://github.com/iamcodefoxx/Counter

线上演示例子：https://iamcodefoxx.github.io/Counter/

![8a754ca4d67bc026718599d0a26336dc.gif][]

### 6. Image carousel ###

**github:** https://github.com/iamcodefoxx

线上演示例子：https://github.com/iamcodefoxx/ImageCarousel

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ki3t1ecK-1630455546755)(/img/bVcUu2G)\]

### 7. Digital clock ###

**github:** https://github.com/iamcodefoxx/DigitalClock

线上演示例子：https://iamcodefoxx.github.io/DigitalClock/

![13808a36ca048ec36a450c8c9646f284.png][]

### 8. Calculator ###

**github:** https://github.com/iamcodefoxx

线上演示例子：https://iamcodefoxx.github.io/Calculator/

![f310309f7d9ada6aa8ddb2b9077dc6b2.gif][]

### 9. Grocery list ###

**github:** https://github.com/iamcodefoxx/Grocery-List

线上演示例子：https://github.com/iamcodefoxx/Grocery-List

![18b7e4020de7256af118dccbeeb51505.gif][]

### 10. Tip calculator ###

**github:** https://github.com/iamcodefoxx/TipCalculator

线上演示例子：https://iamcodefoxx.github.io/TipCalculator/

![ba394b4a89b1fdc7c6e81e98082fa715.gif][]

### 11. Flashcards ###

**github:** https://github.com/iamcodefoxx

线上演示例子：https://iamcodefoxx.github.io/Flashcards/

![105d348d5be3701532f43f222861100d.gif][]

### 12. To-do list ###

**github:** https://github.com/iamcodefoxx/To-do-list

线上演示例子：https://iamcodefoxx.github.io/To-do-list/

![b9540d93d6941e700c11d07e6d19ff17.gif][]

### 13. Sticky notes ###

**github:** https://github.com/iamcodefoxx/Sticky-Notes

线上演示例子：https://iamcodefoxx.github.io/Sticky-Notes/

![a4389d90b148a7fd333f4f9f49475c7d.gif][]

### 14. Timer ###

**github:** https://github.com/iamcodefoxx/Timer

线上演示例子： https://iamcodefoxx.github.io/Timer/

![c800f9652486c58e5dd4b40b4a6b424e.gif][]

### 15. Math ###

**github:** https://github.com/iamcodefoxx/Math4Kids

线上演示例子：https://iamcodefoxx.github.io/Math4Kids/

![27a3c9c9ff0939ab411c000e1a0fa028.gif][]

### 16. Unsplash API ###

**github:** https://github.com/iamcodefoxx/UnsplashAPI

线上演示例子：https://iamcodefoxx.github.io/UnsplashAPI/

![3f4a28d7b6268be11bff4ebab2aa2f15.gif][]

### 17. Typewriter ###

**github:** https://github.com/iamcodefoxx

线上演示例子：https://iamcodefoxx.github.io/Typewriter/

![98928c851cc3ee5b25f0961fbc53c978.gif][]

### 18. Square cards ###

**github:** https://github.com/iamcodefoxx/SquareCards

线上演示例子：https://iamcodefoxx.github.io/SquareCards/

![657e146e67325d32ea332fffd62e1535.gif][]

### 19. Weather application ###

**github:** https://github.com/iamcodefoxx/Weather-App

线上演示例子： https://iamcodefoxx.github.io/Weather-App/

![10270eb70804c6ed45432bd6c5bbdb4d.gif][]

### 20. Wikipedia API ###

**github:** https://github.com/iamcodefoxx

线上演示例子： https://iamcodefoxx.github.io/WikipediaAPI/

![09eaf4386c13f083f03931f0ede09441.gif][]

### 21. Marvel API ###

**github:** https://github.com/iamcodefoxx/Marvel-API

线上演示例子： https://iamcodefoxx.github.io/Marvel-API/

![4c13a709dceb9a24cba8be284c4f4640.gif][]

### 22. Marvel API ###

**github:** https://github.com/iamcodefoxx/Quiz-App

线上演示例子： https://iamcodefoxx.github.io/Quiz-App/

![c844e023f4ad36ad628d51f8ec20d251.gif][]

### 23. Recipe API ###

**github:** https://github.com/iamcodefoxx/RecipeAPI

线上演示例子： https://iamcodefoxx.github.io/RecipeAPI/

![8c30c0885a435dbc8ef3aff929299639.gif][]

--------------------

原文：https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi
[26ab6f35d6d1f3a14246c8eda5a3083d.gif]: /images/20220829/b0e94149898d472c86e71e676b711240.png
[3b672fde19a36564a5d76c84c67aa412.gif]: /images/20220829/c6a8e4ca24ec40e2954b8c876db260e3.png
[d9b08e6a9fa9699fef5573c8b6c1a363.gif]: /images/20220829/fc21753473654df29e52db4f7fdc77d1.png
[f8109b7abc23df5ef69d5369b71b29c7.gif]: /images/20220829/060030fbd2384e73b81d710376fdeed1.png
[8a754ca4d67bc026718599d0a26336dc.gif]: /images/20220829/193a5aeeb06c4adea9f2c6e75a9cc6d5.png
[13808a36ca048ec36a450c8c9646f284.png]: /images/20220829/cc614dcd9f0546e39600ebb60ecdfe28.png
[f310309f7d9ada6aa8ddb2b9077dc6b2.gif]: /images/20220829/bbcac31a78ec44cb951f0f10ab372ecf.png
[18b7e4020de7256af118dccbeeb51505.gif]: /images/20220829/8832e66ec88c4306872446cc7d4d69be.png
[ba394b4a89b1fdc7c6e81e98082fa715.gif]: /images/20220829/9c72ee3ee8da45beb35682b97f8659bd.png
[105d348d5be3701532f43f222861100d.gif]: /images/20220829/1aefebd64eb543ce9cdb7eeb6a716270.png
[b9540d93d6941e700c11d07e6d19ff17.gif]: /images/20220829/1084c114624f436c80d9f0c6bad2627d.png
[a4389d90b148a7fd333f4f9f49475c7d.gif]: /images/20220829/13dc379233e54f288d2120cdb2a3a13c.png
[c800f9652486c58e5dd4b40b4a6b424e.gif]: /images/20220829/296aa4390d904e8daf2a8d9d658d789d.png
[27a3c9c9ff0939ab411c000e1a0fa028.gif]: /images/20220829/8d172261e97a408aac5381b614e00f1d.png
[3f4a28d7b6268be11bff4ebab2aa2f15.gif]: /images/20220829/c08a76dc424344a4b4870db2b1039bef.png
[98928c851cc3ee5b25f0961fbc53c978.gif]: /images/20220829/e1ccd9e676c8494a9513a3f353e250cb.png
[657e146e67325d32ea332fffd62e1535.gif]: /images/20220829/0cd5a2bee58b434f8b421b6432a977d5.png
[10270eb70804c6ed45432bd6c5bbdb4d.gif]: /images/20220829/99e3df5ec75a4c8498924549ff93640c.png
[09eaf4386c13f083f03931f0ede09441.gif]: /images/20220829/d752656d80524a9397cb9b789535a053.png
[4c13a709dceb9a24cba8be284c4f4640.gif]: /images/20220829/e3b0f1e1c1e34e26987afde6123462c4.png
[c844e023f4ad36ad628d51f8ec20d251.gif]: /images/20220829/6c0049a5d9494d32ae7c0130e6a651aa.png
[8c30c0885a435dbc8ef3aff929299639.gif]: /images/20220829/23187a890ca0430fa7bc07064ed47474.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi