EIE4432 Lab 1–3 — Drink Ordering System

按实验instruction的顺序整理，将相关的小步骤合并为一个实现环节。三次实验逐步扩展同一个饮品点单网站。

实验	主要内容	核心技术
Lab 1	搭建饮品首页与点单表单	HTML、CSS、Flexbox
Lab 2	改用responsive UI，并加入价格计算和表单处理	Bootstrap、JavaScript、DOM events
Lab 3	增加订桌系统与动态饮品菜单	SVG、jQuery、localStorage、JSON、AJAX

Lab 1 — HTML and CSS Basics

建立项目和HTML框架。 创建lab1_<Student ID>，准备index.html、styles/main.css与assets/。在HTML中写好DOCTYPE、head/body、页面title，再用header/nav/main/section/footer划分页面。
加入首页内容。 Header显示Drink Ordering System，navigation加入Home、Order、Menu；main展示Bubble Milktea与Iced Latte，各自包含图片、名称和价格。图片使用relative path，并写好alt/title；footer放项目与学生信息。
统一CSS样式和布局。 链接external stylesheet，设置字体、颜色、margin/padding；用Flexbox实现body纵向布局、两款饮品横向排列与居中。结合min-height: 100vh和main的flex: 1将footer推到页面底部，并加入navigation的hover与current-page样式。

建立点单页与表单。 创建order.html，复用首页header/nav/footer，加入POST form。依次放入required姓名input、drink select、Small/Medium/Large radio group，以及Place Order submit按钮；label的for与input的id对应，size radios使用相同name。
整理表单样式与页面链接。 创建并链接styles/order.css，保持两页视觉一致；用纵向Flexbox、gap和padding排列表单，size选项横向排列。将Order设为当前导航项，更新两页的Home/Order链接，并用Live Server查看页面与链接效果。

完成效果： 能在饮品首页与点单页之间切换，页面结构、样式和表单controls完整。Lab 1的重点是HTML/CSS界面搭建。

准备项目并引入Bootstrap。 创建lab2_<Student ID>或使用starter，准备首页、点单页和图片。引入Bootstrap CSS与JS，再用utilities设置header颜色、文字、对齐与spacing。
重建responsive导航和首页。 Navbar包含Home、Order与Reserve a Table；大屏展开，小屏折叠到toggler，当前页面使用active样式。首页用container、row和responsive columns排列两款饮品，设置图片样式与价格；使用body纵向Flexbox和可伸展的main实现sticky footer。
重建点单表单。 在order.html加入id="order-form"的form，依次安排Name、Drink、Size/Ice/Sweetness和Price。使用Bootstrap form controls、radio toggle buttons与spacing classes；价格数字放在id="price"的span内，初始为0。

计算并更新价格。 创建并引入order.js，在calculatePrice()中读取drink和size：Bubble Milktea基础价 $30 、 I ce d L a tt e 基础价$ 28，Medium加 $5 、 L a r g e 加$ 10。Drink select与size radios都要触发重算；未选drink却先选size时，提示用户、清空size并将价格设为0。
验证必填内容。 在validateForm()中检查name.trim()是否为空、drink是否仍为默认选项；不符合时alert并返回false，符合时返回true。其他radio selections的验证为optional。
处理下单操作。 通过Place Order按钮或submit listener调用placeOrder(event)，阻止默认提交，再执行验证。通过后收集name、drink、size、ice、sweetness，并显示成功提示；保存订单到localStorage、reset表单与价格属于optional扩展。

完成效果： 同一网站能适应不同屏幕，选择drink/size会立即更新价格，姓名或饮品未填写时能提示，合法输入能显示下单成功消息。

扩展Lab 2项目。 创建lab3_<Student ID>并复用首页、点单页与order.js，在navigation加入Menu，更新footer的项目名称。由首页复制出reserve.html，清空main container内部内容但保留container，将Reserve设为当前导航项。
绘制SVG桌位图与操作区。 引入jQuery，在SVG中横向放四个circle，为每桌设置唯一ID与文字编号。用.table设置初始green、.booked表示已订red状态；加入桌号提示与默认隐藏的Confirm/Dismiss按钮。SVG文字设pointer-events: none，让点击能落到circle上。
读取并恢复预订记录。 创建并引入scripts/reserve-table.js，在DOM ready后读取localStorage的bookedTable，用JSON.parse()还原桌号数组，无记录时使用[]；将selectedTable初始化为null，再遍历桌位，为已订ID加上.booked。
处理选择、确认与取消。 用.on("click", ...)绑定桌位点击：已订桌alert不可用，并清空selectedTable、恢复默认提示与隐藏按钮；空桌记录selectedTable并显示操作按钮。Confirm将桌号加入数组，用JSON.stringify()存回localStorage，更新桌位颜色与成功提示，然后清空selectedTable并隐藏按钮；Dismiss清除待选状态、恢复提示并隐藏按钮，不新增预订。

准备菜单页面与JSON。 将drink-menu.json放入assets/，创建menu.html和scripts/menu.js，引入jQuery与菜单script。在页面中建立id="drink-menu"的Bootstrap grid container，设置大/中/小视口最多4/2/1列及统一图片高度。
发送AJAX请求并处理结果。 DOM ready后调用$.get("assets/drink-menu.json", ...)。成功时在Console输出data；用.fail()处理请求失败，在Console与页面显示错误。这里的relative path以menu.html为参照，不是以menu.js所在目录为参照。
将数据渲染成responsive cards。 遍历返回的drink array，用template literals填入饮品图片、名称等fields，再通过.append()加入菜单container。将菜单扩展到至少8项饮品，并用不同viewport查看4/2/1列效果；通过Live Server加载页面与JSON。

完成效果： 桌位确认预订后变色，重新进入页面能恢复记录；菜单从JSON加载并动态生成cards，请求失败时能显示错误。

来源：EIE4432 Lab 1 Student’s Version（Ver 1.12）、Lab 2（Ver 1.8）、Lab 3（Ver 1.7）实验说明。