[[420563]]

很多初學者會時不時問我，經常看視頻或書之類的教程，但久了沒用就很容易的忘記，這個要怎么解?這個真是不好解，因為我也經常這樣的，我大都建議多做項目來鞏固記憶，但初學者對于比較復雜的項目很不好上手，所以今天分享 25 個初學者的比較容易上手的開源項目，希望對初學者的你們有所幫助，有時間就自己參考事例做一遍，如果沒有思路就看源碼是怎么實現，相信你會很有收獲的。

1. Colors

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

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

2. Hex colors gradient

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

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

3. Random quote generator

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

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

4. The message

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

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

5. Counter

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

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

6. Image carousel

github: https://github.com/iamcodefoxx

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

[[420565]]

7. Digital clock

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

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

8. Calculator

github: https://github.com/iamcodefoxx

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

9. Grocery list

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

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

10. Tip calculator

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

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

11. Flashcards

github: https://github.com/iamcodefoxx

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

12. To-do list

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

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

13. Sticky notes

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

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

14. Timer

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

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

15. Math

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

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

16. Unsplash API

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

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

17. Typewriter

github: https://github.com/iamcodefoxx

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

18. Square cards

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

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

19. Weather application

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

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

20. Wikipedia API

github: https://github.com/iamcodefoxx

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

21. Marvel API

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

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

22. Marvel API

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

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

23. Recipe API

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

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

 

作者：Miguel Nunez 譯者：前端小智 來源：dev 原文：https://dev.to/codefoxx/25-beginner-javascript-project-ideas-3m9h

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。