前言:
最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基础入门到深入学习。这些项目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 课程的一部分,但是如果你已经拥有了一些基础,不妨试着看一下源码,然后模仿实现吧
1. Form Validator 表单验证
判断输入的表单字段是否合法
![2c643e118650c71b2625124c1c952640.png](https://img-blog.csdnimg.cn/img_convert/2c643e118650c71b2625124c1c952640.png)
2. Movie Seat Booking 预定电影座位
一个简单的电影座位预定演示项目
![e3111682188369e218573e8eaf7a971c.png](https://img-blog.csdnimg.cn/img_convert/e3111682188369e218573e8eaf7a971c.png)
3. Custom Video Player 定制视频播放器
一个简单的网页视频播放器
![ecbb817532bf8f7c361c4a2ff84c2245.png](https://img-blog.csdnimg.cn/img_convert/ecbb817532bf8f7c361c4a2ff84c2245.png)
4. Exchange Rate Calculator 汇率计算器
计算不同货币的兑换汇率
![13be538183d63d1ca96f9f3847a8fc93.png](https://img-blog.csdnimg.cn/img_convert/13be538183d63d1ca96f9f3847a8fc93.png)
5. DOM Array Methods Project DOM 数组方法
练习如何操作 DOM 数组
![6b76e018cd36bd4941805fbb04b78e32.png](https://img-blog.csdnimg.cn/img_convert/6b76e018cd36bd4941805fbb04b78e32.png)
6. Menu Slider & Modal 动态菜单以及弹窗
练习如何弹出登录注册窗口,以及滑动弹出菜单
![a48add94ebc88789b33e4fe8cfff4d4b.png](https://img-blog.csdnimg.cn/img_convert/a48add94ebc88789b33e4fe8cfff4d4b.png)
![6fce4291627589cdbd1e670c05e8fb0e.png](https://img-blog.csdnimg.cn/img_convert/6fce4291627589cdbd1e670c05e8fb0e.png)
7. Hangman Game 字符侦探游戏
练习如何判断隐藏字符是否正确
![7bfd738a0ade49f6b54a81fd1ad9f668.png](https://img-blog.csdnimg.cn/img_convert/7bfd738a0ade49f6b54a81fd1ad9f668.png)
8. Mealfinder App 点餐应用
简单的点餐查询应用
![f710008fea0e11e4f5480fbad3b326a3.png](https://img-blog.csdnimg.cn/img_convert/f710008fea0e11e4f5480fbad3b326a3.png)
9. Expense Tracker 购物结算应用
简单的购物车结算应用
![9e612f1725f98427ba79fa1aceba91d7.png](https://img-blog.csdnimg.cn/img_convert/9e612f1725f98427ba79fa1aceba91d7.png)
10. Music Player 音乐播放器
简单的网页音乐播放器
![cffefa846d7c29a0d0d882a95318ef76.png](https://img-blog.csdnimg.cn/img_convert/cffefa846d7c29a0d0d882a95318ef76.png)
11. Infinite Scrolling 网页无限滚动演示
网页无限向下滚动实现
![edcd417df76a59ba732dea564656a2dc.png](https://img-blog.csdnimg.cn/img_convert/edcd417df76a59ba732dea564656a2dc.png)
12. Typing Game 打字游戏
简单的打字输入游戏
![2ac554dd5cc774085154a56b5fe91ea5.png](https://img-blog.csdnimg.cn/img_convert/2ac554dd5cc774085154a56b5fe91ea5.png)
13. Speech Text Reader 文本阅读器
文本阅读器
![2441c365d396033947db71c95952ddff.png](https://img-blog.csdnimg.cn/img_convert/2441c365d396033947db71c95952ddff.png)
14. Memory Cards 记忆卡片
测试记忆的记忆卡片
![238929120c4c5fb4ca74eb911f2edbf4.png](https://img-blog.csdnimg.cn/img_convert/238929120c4c5fb4ca74eb911f2edbf4.png)
15. LyricsSearch App 歌词搜索应用
网页歌词搜索器
![7e9028f4c6faea6de4ec5502bc376a4a.png](https://img-blog.csdnimg.cn/img_convert/7e9028f4c6faea6de4ec5502bc376a4a.png)
16. Relaxer App 休闲呼吸应用
模拟呼吸的节奏
![4396e96616f27a28ba3f67706396d4c3.png](https://img-blog.csdnimg.cn/img_convert/4396e96616f27a28ba3f67706396d4c3.png)
17. Breakout Game 弹跳破冰游戏
简单的网页破冰游戏
![34a6a24b103add693a0ce0c2068a192f.png](https://img-blog.csdnimg.cn/img_convert/34a6a24b103add693a0ce0c2068a192f.png)
18. New Year Countdown 新年倒计时
网页新年倒计时
![868f78af3d49591830ee018402283d30.png](https://img-blog.csdnimg.cn/img_convert/868f78af3d49591830ee018402283d30.png)
19. Sortable List 榜单应用
网页财富榜单
![2ca81e5c0fd216638890adb7dc7f9c93.png](https://img-blog.csdnimg.cn/img_convert/2ca81e5c0fd216638890adb7dc7f9c93.png)
20. Speak Number Guessing Game 猜数字游戏
说出数字,猜测数字
![c07f0bb3703cd9ce79f12a12c8201939.png](https://img-blog.csdnimg.cn/img_convert/c07f0bb3703cd9ce79f12a12c8201939.png)
今天我们给大家分享了,20 个 JavaScript+Html+CSS 练手小项目,大家觉得哪个最简单,哪个最复杂呢?赶紧去 Github 仓库拉取项目,码上行动吧
欢迎关注公众号:KnowHub 知识加油站!
参考资料
[1]
vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects