来源
https://github.com/bradtraversy/vanillawebprojects
下载并完善了一下如中文翻译
| 序号 | 英文名称 | 中文翻译 |
| 01 | Form Validator | 表单验证器 |
| 02 | Movie Seat Booking | 电影座位预订系统 |
| 03 | Custom Video Player | 自定义视频播放器 |
| 04 | Exchange Rate Calculator | 汇率计算器 |
| 05 | DOM Array Methods Project | DOM数组方法实战项目 |
| 06 | Menu Slider & Modal | 侧边菜单滑块与模态框 |
| 07 | Hangman Game | 猜单词游戏（刽子手游戏） |
| 08 | Mealfinder App | 美食查找应用 |
| 09 | Expense Tracker | 支出追踪器 |
| 10 | Music Player | 音乐播放器 |
| 11 | Infinite Scrolling | 无限滚动加载 |
| 12 | Typing Game | 打字练习游戏 |
| 13 | Speech Text Reader | 语音文本阅读器 |
| 14 | Memory Cards | 记忆卡牌游戏 |
| 15 | LyricsSearch App | 歌词搜索应用 |
| 16 | Relaxer App | 放松解压应用 |
| 17 | Breakout Game | 打砖块游戏 |
| 18 | New Year Countdown | 新年倒计时 |
| 19 | Speak Number Guessing Game | 语音猜数字游戏 |
| 20 | Product Filtering UI | 产品筛选界面 |
01 Form Validator 表单验证器
表单验证器（入门项目）
简单的客户端表单验证。检查必填项、长度、电子邮件和密码是否匹配
项目规范
- 创建表单用户界面
- 在特定输入下显示错误消息
- checkRequired() 函数接受输入数组
- checkLength() 用于检查最小和最大长度
- checkEmail() 用于使用正则表达式验证电子邮件
- checkPasswordsMatch() 用于匹配确认密码
02 Movie Seat Booking 电影座位预订系统
电影座位预订
展示电影选择和影院座位供选择，以便购买电影票
项目规范
- 显示用户界面，包含电影选择、屏幕、座位、图例和座位信息
- 用户可以选择电影/价格
- 用户可以选择/取消选择座位
- 用户无法选择已占座位
- 座位数量和价格将会更新
- 将座位、电影和价格信息保存到本地存储中，以便刷新时用户界面仍能保持填充状态 设计灵感来源于Dribbble
03 Custom Video Player 自定义视频播放器
自定义视频播放器
自定义视频播放器，使用HTML5视频元素及其JavaScript API，并采用自定义设计
项目规范
- 使用CSS设计自定义视频播放器的样式
- 播放/暂停
- 停止
- 视频进度条
- 设置进度条时间
- 以分钟和秒为单位显示时间
04 Exchange Rate Calculator 汇率计算器
汇率
选择国家以获取特定金额的汇率
项目规范
- 显示用户界面，包含2个用于选择国家的下拉列表和2个用于输入金额的输入框
- 从API获取汇率（https://api.exchangerate-api.com）
- 显示两个国家的数值
- 金额变动时更新数值
- 货币汇率互换
05 DOM Array Methods Project DOM数组方法实战项目
DOM 数组方法
教授高阶数组方法和DOM操作的项目
项目规范
- 从randomuser.me API获取随机用户 使用forEach()循环并输出用户/财富信息
- 使用map()函数使财富翻倍
- 使用
filter()函数仅筛选出百万富翁- 使用sort()函数按财富排序
- 使用reduce()函数来累加所有财富
06 Menu Slider & Modal侧边菜单滑块与模态框
模态与菜单滑块
带有滑动菜单和模态对话框的简单登陆页面
项目规范
- 创建并设计着陆页
- 侧边导航和模态框样式
- 增加功能，使菜单在按钮点击时打开/关闭
- 增加功能，使模态对话框能在按钮点击时打开/关闭
07 Hangman Game 猜单词游戏（刽子手游戏）
猜字游戏
在规定次数内，选择一个字母来猜出隐藏的单词
项目规范
- 使用SVG显示绞刑架的杆子和人形图案
- 生成一个随机单词
- 在用户界面中以正确的字母显示单词
- 显示错误的字母
- 当连续选择两次字母时显示通知
- 无论输赢都显示弹窗
- “重新开始”按钮，用于重置游戏
08 Mealfinder App 美食查找应用
美食查找应用
从themealdb.com API中搜索并生成随机餐食
项目规范
- 显示带有搜索表单和生成按钮的用户界面
- 连接到API并获取餐食信息
- 在DOM中展示带有图片和悬停效果的餐食
- 点击餐食，查看详情
- 点击生成按钮，获取并展示一份随机餐食
09 Expense Tracker 支出追踪器
费用跟踪器
记录收入和支出。添加和删除项目，并保存到本地存储
项目规范
- 为项目创建用户界面
- 在DOM中显示交易项
- 显示余额、支出和收入总额
- 添加新的交易并反映在总额中
- 从DOM中删除元素
- 保存到本地存储
10 Music Player 音乐播放器
音乐播放器
使用HTML5音频API创建精美的用户界面，以播放存储在“音乐文件夹”中的音乐
项目规范
- 为音乐播放器创建用户界面，包括旋转图像和歌曲详情弹窗
- 增加播放和暂停功能
- 切换歌曲
- 进度条
11 Infinite Scrolling 无限滚动加载
无限滚动与过滤
展示来自jsonplaceholder的博客文章，并添加无限滚动功能以获取更多文章，同时添加过滤框
项目规范
- 创建用户界面和自定义CSS加载动画
- 从API获取初始帖子并展示
- 向下滚动，显示加载器并获取下一组帖子
- 为获取的帖子添加过滤功能
12 Typing Game 打字练习游戏
速度打字游戏
通过输入随机单词来争取时间
项目规范
- 创建包含难度设置的游戏用户界面
- 生成随机单词并将其放置在DOM中
- 输入单词后分数增加
- 实现计时器
- 根据单词的难度，在输入单词后增加一定的时间
- 将难度设置存储在本地存储中
13 Speech Text Reader 语音文本阅读器
语音文本阅读器
一款专为非言语人士设计的文本转语音应用。提供预设按钮和自定义文本转语音功能。本项目使用Web Speech API
项目规范
- 使用图片按钮创建响应式用户界面（CSS Grid）
- 点击按钮时朗读文本
- 下拉菜单自定义文本转语音
- 朗读输入的文本
- 变换声音和口音
14 Memory Cards 记忆卡牌游戏
存储卡
学习用的闪卡应用程序。可显示、添加和移除带有问题和答案的记忆卡片
项目规范
- 使用CSS制作翻页卡片
- 创建一个带有表单的“添加新卡片”弹层
- 展示问题卡片并翻转以获取答案
- 查看前一张和后一张卡片
- 将新卡片添加到本地存储中
- 从本地存储中清除所有卡片
15 LyricsSearch App 歌词搜索应用
歌词搜索应用
使用lyrics.ovh API查找歌曲、艺术家和歌词
项目规范
- 根据歌曲/艺术家输入显示用户界面
- 获取歌曲/艺术家信息，并将其放入DOM中
- 添加分页功能
- 添加获取歌词的功能，并在DOM中显示
16 Relaxer App 放松解压应用
放松应用
一个令人放松的呼吸应用程序，配有可视化指导，告诉你何时吸气、屏气和呼气
项目规范
- 使用CSS创建圆形和渐变圆形
- 创建指针（小圆圈）并为其设置动画效果
- 创建放大和缩小动画
- 添加JavaScript以创建呼吸动画效果
17 Breakout Game 打砖块游戏
突破！游戏
在这款游戏中，你可以用箭头键控制挡板，弹起小球打破砖块。这款应用使用了HTML5画布元素和API
项目规范
- 在画布上绘制元素
- 使用画布路径来绘制形状
- 使用requestAnimationFrame(cb)添加动画
- 按下箭头键移动挡板
- 添加碰撞检测
- 记分
- 添加带有滑块的规则按钮
18 New Year Countdown 新年倒计时
新年倒计时
从当前日期倒计时到新一年的着陆页
项目规范
- 使用HTML/CSS创建登陆页面
- 计算距离新年的天数、小时数、分钟数和秒数
- 将值插入到DOM中
- 在加载倒计时之前显示一个加载指示器
- 在背景中展示来年
19 Speak Number Guessing Game 语音猜数字游戏
猜数字游戏
猜数字游戏，您使用语音识别API对着麦克风说出您的猜测
项目规范
- 显示用户界面，提示用户说出猜测
- 实现语音识别以监听麦克风
- 处理用户的猜测并进行匹配
- 让用户知道数字是偏高、偏低、匹配还是不匹配
20 Product Filtering UI 产品筛选界面
21 sortable-list 可排序列表
可排序列表
展示一个打乱的列表，可以通过拖放进行排序
项目规范
- 制作一个有序列表（最富有的10个人）
- 随机打乱列表项的顺序
- 允许用户将项目拖放到不同的位置
- 用于检查物品是否按正确顺序排列的按钮
- 顺序正确时显示绿色，顺序错误时显示红色
