来源https://github.com/bradtraversy/vanillawebprojects下载并完善了一下如中文翻译序号英文名称中文翻译01Form Validator表单验证器02Movie Seat Booking电影座位预订系统03Custom Video Player自定义视频播放器04Exchange Rate Calculator汇率计算器05DOM Array Methods ProjectDOM数组方法实战项目06Menu Slider Modal侧边菜单滑块与模态框07Hangman Game猜单词游戏刽子手游戏08Mealfinder App美食查找应用09Expense Tracker支出追踪器10Music Player音乐播放器11Infinite Scrolling无限滚动加载12Typing Game打字练习游戏13Speech Text Reader语音文本阅读器14Memory Cards记忆卡牌游戏15LyricsSearch App歌词搜索应用16Relaxer App放松解压应用17Breakout Game打砖块游戏18New Year Countdown新年倒计时19Speak Number Guessing Game语音猜数字游戏20Product Filtering UI产品筛选界面01 Form Validator 表单验证器表单验证器入门项目简单的客户端表单验证。检查必填项、长度、电子邮件和密码是否匹配项目规范创建表单用户界面在特定输入下显示错误消息checkRequired() 函数接受输入数组checkLength() 用于检查最小和最大长度checkEmail() 用于使用正则表达式验证电子邮件checkPasswordsMatch() 用于匹配确认密码02 Movie Seat Booking 电影座位预订系统电影座位预订展示电影选择和影院座位供选择以便购买电影票项目规范显示用户界面包含电影选择、屏幕、座位、图例和座位信息用户可以选择电影/价格用户可以选择/取消选择座位用户无法选择已占座位座位数量和价格将会更新将座位、电影和价格信息保存到本地存储中以便刷新时用户界面仍能保持填充状态 设计灵感来源于Dribbble03 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个人随机打乱列表项的顺序允许用户将项目拖放到不同的位置用于检查物品是否按正确顺序排列的按钮顺序正确时显示绿色顺序错误时显示红色