第三週作業繳交

回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

【題目】：餐點管理工具

作業使用者故事：

點餐人員可以將左側的品項加入購物車
點餐人員，可以刪除、調整購物車品項數量（Level 1, 2 可不做）
點餐人員可加入備註
點餐人員可以建立訂單

解答連結：

執行範例：https://www.casper.tw/2024-vue-homework/#/week3
原始碼：https://github.com/Wcc723/2024-vue-homework/blob/main/src/views/Week3View.vue

<div id="root">
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-4">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">珍珠奶茶</h5>
              <small>$50</small>
            </div>
            <p class="mb-1">香濃奶茶搭配QQ珍珠</p></a
          ><a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">冬瓜檸檬</h5>
              <small>$45</small>
            </div>
            <p class="mb-1">清新冬瓜配上新鮮檸檬</p></a
          ><a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">翡翠檸檬</h5>
              <small>$55</small>
            </div>
            <p class="mb-1">綠茶與檸檬的完美結合</p></a
          ><a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">四季春茶</h5>
              <small>$45</small>
            </div>
            <p class="mb-1">香醇四季春茶，回甘無比</p></a
          ><a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">阿薩姆奶茶</h5>
              <small>$50</small>
            </div>
            <p class="mb-1">阿薩姆紅茶搭配香醇鮮奶</p></a
          ><a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">檸檬冰茶</h5>
              <small>$45</small>
            </div>
            <p class="mb-1">檸檬與冰茶的清新組合</p></a
          ><a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">芒果綠茶</h5>
              <small>$55</small>
            </div>
            <p class="mb-1">芒果與綠茶的獨特風味</p></a
          ><a href="#" class="list-group-item list-group-item-action"
            ><div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">抹茶拿鐵</h5>
              <small>$60</small>
            </div>
            <p class="mb-1">抹茶與鮮奶的絕配</p></a
          >
        </div>
      </div>
      <div class="col-md-8">
        <table class="table">
          <thead>
            <tr>
              <th scope="col" width="50">操作</th>
              <th scope="col">品項</th>
              <th scope="col">描述</th>
              <th scope="col" width="90">數量</th>
              <th scope="col">單價</th>
              <th scope="col">小計</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><button type="button" class="btn btn-sm">x</button></td>
              <td>四季春茶</td>
              <td><small>香醇四季春茶，回甘無比</small></td>
              <td>
                <select class="form-select">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
              </td>
              <td>45</td>
              <td>45</td>
            </tr>
            <tr>
              <td><button type="button" class="btn btn-sm">x</button></td>
              <td>翡翠檸檬</td>
              <td><small>綠茶與檸檬的完美結合</small></td>
              <td>
                <select class="form-select">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
              </td>
              <td>55</td>
              <td>55</td>
            </tr>
          </tbody>
        </table>
        <div class="text-end mb-3">
          <h5>總計: <span>$100</span></h5>
        </div>
        <textarea
          class="form-control mb-3"
          rows="3"
          placeholder="備註"
        ></textarea>
        <div class="text-end">
          <button class="btn btn-primary">送出</button>
        </div>
      </div>
    </div>
    <hr />
    <div class="row justify-content-center">
      <div class="col-8">
        <div class="card">
          <div class="card-body">
            <div class="card-title">
              <h5>訂單</h5>
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">品項</th>
                    <th scope="col">數量</th>
                    <th scope="col">小計</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>翡翠檸檬</td>
                    <td>7</td>
                    <td>385</td>
                  </tr>
                  <tr>
                    <td>冬瓜檸檬</td>
                    <td>7</td>
                    <td>315</td>
                  </tr>
                  <tr>
                    <td>冬瓜檸檬</td>
                    <td>4</td>
                    <td>180</td>
                  </tr>
                </tbody>
              </table>
              <div class="text-end">備註: <span>都不要香菜</span></div>
              <div class="text-end">
                <h5>總計: <span>$145</span></h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

資料：

const data = [
  {
    "id": 1,
    "name": "珍珠奶茶",
    "description": "香濃奶茶搭配QQ珍珠",
    "price": 50
  },
  {
    "id": 2,
    "name": "冬瓜檸檬",
    "description": "清新冬瓜配上新鮮檸檬",
    "price": 45
  },
  {
    "id": 3,
    "name": "翡翠檸檬",
    "description": "綠茶與檸檬的完美結合",
    "price": 55
  },
  {
    "id": 4,
    "name": "四季春茶",
    "description": "香醇四季春茶，回甘無比",
    "price": 45
  },
  {
    "id": 5,
    "name": "阿薩姆奶茶",
    "description": "阿薩姆紅茶搭配香醇鮮奶",
    "price": 50
  },
  {
    "id": 6,
    "name": "檸檬冰茶",
    "description": "檸檬與冰茶的清新組合",
    "price": 45
  },
  {
    "id": 7,
    "name": "芒果綠茶",
    "description": "芒果與綠茶的獨特風味",
    "price": 55
  },
  {
    "id": 8,
    "name": "抹茶拿鐵",
    "description": "抹茶與鮮奶的絕配",
    "price": 60
  }
]

Level	說明
（原版）LV1	僅將以上功能完成，不拆分成元件（可以省略：刪除、調整數量的功能）
（原版）LV2	包含以上功能，至少額外拆分兩個元件
（原版挑戰）LV3	不參考解答製作菜單工具，不省略任何功能且至少包含額外三個元件（重複品項無法重複加入）

#	Level	Discord	CodePen / 答案
範例	LV1	卡斯伯	GitHub / GitHub Pages
1	LV3	Aaron 謝宗佑	GitHub / GitHub Pages
2	LV3	rjjq	GitHub / GitHub Pages
3	LV3	Eric0823	GitHub / GitHub Pages
4	LV3	Shin	GitHub / GitHub Pages
5	LV3	Aden	GitHub / GitHub Pages
6	LV3	Terry.D	GitHub / GitHub Pages
7	LV3	YiShan	GitHub / GitHub Pages
8	LV3	Kevin Wei	GitHub / GitHub Pages
9	LV3	Letitia	GitHub / GitHub Pages
10	LV3	Johnson	GitHub / GitHub Pages
11	LV3	阿B	GitHub / GitHub Pages
12	LV2	smart	GitHub / GitHub Pages
13	LV3	zaoannihao	GitHub / GitHub Pages
14	LV3	SKey	GitHub / GitHub Pages
15	LV3	Sandra191919	GitHub / GitHub Pages
16	LV2	小葉	GitHub / GitHub Pages
17	LV3	Zhu	GitHub / GitHub Pages
18	LV3	Timo	GitHub / GitHub Pages
19	LV2	Vian	GitHub / GitHub Pages
20	LV3	ling	GitHub / GitHub Pages
21	LV2	77	GitHub / GitHub Pages
22	LV3	Victor Lin	GitHub / GitHub Pages
23	LV3	mu mu	GitHub / GitHub Pages
24	LV3	客家鬍渣貓	GitHub / GitHub Pages
25	LV3	imsmallnew	GitHub / GitHub Pages
26	LV3	Barry1104	GitHub / GitHub Pages
27	LV1	regal	GitHub / GitHub Pages
28	LV2	好了啦	GitHub / GitHub Pages
29	LV1	Kevin Cheng	GitHub / GitHub Pages
30	Lv1	Iris	GitHub / GitHub Pages
31	Lv3	Tough life	Github / GitHub Pages
32	Lv3	KK(kai.5075)	Github / GitHub Pages
33	Lv1	anthy7154	Github / GitHub Pages
34	Lv3	納豆	Github / GitHub Pages
35	LV2	雷蒙レイ	GitHub / GitHub Pages
36	LV3	Michael	GitHub / GitHub Pages
37	LV3	Ching	GitHub / GitHub Pages
38	LV3	ABOOS	GitHub / GitHub Pages
39	LV3	Tatsu	GitHub / GitHub Pages
40	LV2	Mars	GitHub / GitHub Pages
41	LV3	duchi	GitHub / GitHub Pages
42	LV3	Peter	GitHub / GitHub Pages
43	LV1	蛋黃	Github / Github Pages
44	LV1	An	Github / Github Pages
45	LV3	World	Github / Github Pages
46	LV1	haohaoliao	GitHub/GitHub Pages
47	LV3	wdsf	Github / Github Pages
48	LV3	Candace	Github / Github Pages
49	LV3	阿昌	Github / Github Pages
50	LV3	poyi	Github / Github Pages
51	LV2	wei_0982	Github / Github Pages
52	LV2	David0799	Github / Github Pages
53	LV3	dPi	Github / Github Pages
54	LV2	thchen2002	Github / Github Pages
55	LV3	AtayalLin	Github / Github Pages
56	LV3	yu005620	Github / Github Pages
57	LV2	Lin	Github / Github Pages
58	LV2	Shuang	Github / Github Pages
59	LV2	s870012	Github / Github Pages

第三週作業繳交

回報流程

Read more

任務二：單一 branch 更新與衝突

🏅 Day 3 - CSS 選擇器運用

第一週作業繳交

第二週作業