Skip to content

Latest commit

 

History

History
34 lines (27 loc) · 1.77 KB

File metadata and controls

34 lines (27 loc) · 1.77 KB

線上點餐系統實作題|六角學院|框架專題班

題目:線上點餐系統

功能描述:

  1. 請 clone 此模板,實作一個線上點餐系統,可以將餐點加入購物車、調整購物車品項的數量,並計算總金額。
  2. 實現以下功能:
    • 餐點列表: 畫面上顯示多個餐點選項,包含名稱、價格、圖片。
    • 加入購物車: 點擊「加入購物車」按鈕可將餐點加入購物車。
    • 數量調整: 在購物車中可以增加或減少餐點數量(最少為 1)。
    • 移除餐點: 可從購物車中移除特定餐點。
    • 金額計算: 自動計算並顯示購物車的總金額。
    • 清空購物車: 提供「清空購物車」按鈕,點擊時清除所有項目。

可參考的文件資源

  1. React 官方文件React Hooks - useState
  2. MDN - Array(map, filter, find, reduce)
  3. MDN - 解構賦值

實作題檢核點

  1. 將 menuData 資料渲染到畫面中(餐點列表)
  2. 使用 useState 管理購物車狀態
  3. 能夠將餐點加入購物車(首次加入數量為 1)
  4. 重複加入相同餐點時,數量會累加而非新增一筆資料
  5. 將購物車資料渲染到畫面中
  6. 當購物車為空時,顯示適當的提示訊息
  7. 能夠在購物車中增加餐點數量
  8. 能夠在購物車中減少餐點數量(最少為 1,不可為 0)
  9. 能夠從購物車中移除特定餐點
  10. 正確計算並顯示購物車總金額
  11. 清空購物車功能正確運作