---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 1
###### tags: `Vue 直播班 - 2022 春季班`

變數命名
---
在 JavaScript 中命名規範中，會建議使用駝峰式的命名，駝峰式的命名又分為大駝峰與小駝峰，可參考「[Wiki 上的介紹](https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB)」。大多數的情況來說，我們都會使用小駝峰來進行 JS 變數的命名。

如 我的名字可以使用 `myName` 的方式進行命名。另外，如果是函式時則會以動詞的方式作為開頭，如：繪製表格使用 `renderTable` 的名稱。

每日任務條件：
* 宣告變數、函式，變數請給予值
* 變數名稱請用小駝峰的方式定義，並以非動詞作為開頭
* 函式請用動詞作為開頭

題目 (直接在答案區貼上答案)
---

變數:
1. 我的 slack 名稱:mySlack
2. 餐廳數量:restaurantNum
3. 課程 id:classId
4. 畢業日期:graduateDate
5. 練習時間:practiceTime

函式:
1. 取得產品資料:getProductData
2. 渲染圖表:renderChart
3. 篩選購物車資料:filterCartData
4. 排序註冊日期:sortRegisterDate
5. 刪除訂單:deleteOrder

Bootstrap OOCSS
---
Bootstrap 中有 OOCSS 結構與樣式分離的設計模式（像是：按鈕結構 .btn 與樣式（顏色、大小 ..） .btn-primary），可以提升 CSS 的複用性

* 1. 請嘗試利用 Bootstrap5 還原下方圖片樣式（修改 [Codepen](https://codepen.io/Bingbingboom/pen/jOLdmEV) 中 `...` 的部分，並以 Codepen 提交）


可以參考：
* https://bootstrap5.hexschool.com/docs/5.1/components/buttons/
* https://bootstrap5.hexschool.com/docs/5.1/components/alerts/

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
變數:
1. 我的 slack 名稱: mySlackName
2. 餐廳數量: restaurantNum
3. 課程 id: courseId
4. 畢業日期: graduateDate
5. 練習時間: practiceTime

函式:
1. 取得產品資料: getProductData
2. 渲染圖表: renderChart
3. 篩選購物車資料: filterCartData
4. 排序註冊日期: sortEnrollDate
5. 刪除訂單: deleteOrder

- Bootstrap -

<div class="container p-4">
<div class="w-50 alert alert-danger" role="alert">
這是警告！
</div>
<button class="btn btn-primary btn-lg">按鈕</button>
<button class="btn btn-success">按鈕</button>
<button class="btn btn-warning btn-sm">按鈕</button>
</div>

-->

回報區
---

| 報數 | 組別 / 名字 | codepen / 其他回饋 |
| --- | -------- | -------- |
|1| Pei-Ying | https://codepen.io/Pei-Ying/pen/bGoaGeG?editors=1111 |
|2| Karen Huang | https://codepen.io/Coding_Snorlax/pen/mdBMaxp |
|3| Laura | https://codepen.io/minminn/pen/mdBpEea |
|4|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/BawJaRa|
|5|Arista | https://codepen.io/arista-hsieh/pen/LYzeYJM |
|6|Howard|https://codepen.io/yawdnhbm/pen/YzrYzLM |
|7| Yunei | https://codepen.io/Yunei/pen/QWqaWJd |
|8|Charlotte Lee|https://codepen.io/charlotte-lee/pen/VwzVBJd?editors=1111 |
|9|Jhen|https://codepen.io/cheng-jhen/pen/abLEbjK |
|10|Gill|https://codepen.io/Gill-Chin/pen/ZEXvEdr?editors=1010 |
|11|AllenW|https://codepen.io/AllenW/pen/vYepYaw|
|12|hua|https://codepen.io/hahahazzz123/pen/RwLxNwN|
|13|Tim Lin|https://codepen.io/TimmyLin/pen/wvrpBOy
|14|Iris Hunag|https://codepen.io/ythuang/pen/poWpJem|
|15|威爾|https://codepen.io/WILL_Wu/pen/jOGYPGo|
|16|Meng|https://codepen.io/MGHN/pen/NWaXqzm?editors=0011 |
|17|andersonshen|https://codepen.io/luxyenni-the-bold/pen/LYzeVQL|
|18|Liu|https://codepen.io/feng-chi-liu/pen/qBPpdLX|
|19|yu|https://codepen.io/yuu9916/pen/VwMyvaG?editors=1010
|20|Sheep|https://codepen.io/SheepNDW/pen/oNGpgwN?editors=1011|
|21|Judy|https://codepen.io/hsiaohan/pen/XWeVXpy?editors=1010|
|22|浩|https://codepen.io/Ahoyyyy/pen/LYzeGgV
|23|Leo Song|https://codepen.io/sunnylaba/pen/NWaXNjE
|24|Rick Tzeng|https://codepen.io/rick917jp6/pen/yLodqMg
|25|Evan Chiang|https://codepen.io/piskesocute/pen/ZEXvWrY|
|26|Henry|https://codepen.io/kaohenry9287/pen/jOGYrwq|
|27|Larry|https://codepen.io/larrylinr5/pen/LYzeZWr
|28|davidlai|https://codepen.io/supergoldmanster/pen/XWeVKjg
|29|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/ZEXvOjX
|30|Alicia Lo|https://codepen.io/dkcyhyre/pen/WNZdxqR
|31|Vicky Huang|https://codepen.io/hyxfish27/pen/YzrYGVX |
|32|肉鬆|https://codepen.io/klrkicog/pen/BawJLRW?editors=1011
|33|shio|https://codepen.io/shioyen/pen/BawJLqw |
|34|Mylène|https://codepen.io/hamajibashi/pen/vYepXrK|
|35|Erin Huang|https://codepen.io/ErinHuang/pen/bGoawPv|
|36|Yummyniya|https://codepen.io/yummyniya/pen/WNZdGWy|
|37|咖咖|https://codepen.io/gon790219/pen/eYGyBgO|
|38|Benson|https://codepen.io/soul81624/pen/rNGpWzV|
|39|Yof|https://codepen.io/yangyof/pen/GRMyNWQ?editors=1010
|40|Beanhuang|https://codepen.io/Beanhuang/pen/rNGpWZe?editors=0011
|41| 黃士桓 | https://codepen.io/shr-huan-huang/pen/ZEXvBwQ?editors=1010 |
|42| TimmyHuang | https://codepen.io/TimmyHuang/pen/OJxzRrx |
|43| Terry21 | https://codepen.io/xsqdqqep-the-scripter/pen/RwLxKwY?editors=1010 |
|44|Anna|https://codepen.io/kycrleao/pen/NWaXdJR?editors=1010
|45|Phil Lu|https://codepen.io/ctkeftjp-the-animator/pen/zYEpZGJ?editors=1010|
|46|ShibaCat|https://codepen.io/shibacat/pen/NWaXpYw|
|47|Jess_Wu|https://codepen.io/jess1104/pen/NWaXpdg?editors=1011|
|48|tingyu|https://codepen.io/dgltu/pen/OJxzpog?editors=0011|
|49|FuChang|https://codepen.io/fuchang830714/pen/BawJWrZ|
|50|POPEYE |https://codepen.io/popeye_ux/pen/zYEpwdv |
|51|王老明|https://codepen.io/adonismis/pen/vYeppZO|
|52|Jason Chen|https://codepen.io/jason60810/pen/eYGyyWj?editors=1010|
|53|Clara Cai| https://codepen.io/Clara-Snowy/pen/LYzeeJE |
|54|Will | https://codepen.io/ncrdpepc-the-lessful/pen/ExwooEJ?editors=1011 |
|55|Judy|https://codepen.io/judy86101166/pen/WNZddLz |
|56|Wenfish|https://codepen.io/wenfisht/pen/jOGYzyb|
|57|AKI|https://codepen.io/akichen27/pen/jOGYzxr|
|58|我是泇吟|https://codepen.io/kljuqbxs/pen/eYGyrmM?editors=1010
|59|Abbie|https://codepen.io/Abbie0704/pen/xxXpjWN |
|60|大衛| https://codepen.io/exnsrpjc/pen/LYzeQYG?editors=1010 |
|61|Kevin| https://codepen.io/uilaadhw/pen/zYEpMYN|
|62|聿凌|https://codepen.io/igzdflpu/pen/ZEXvmKB?editors=1010|
|63|Ron|https://codepen.io/long-sian-liang/pen/NWaXEaP?editors=1011|
|64|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/yLzpWNG|
|65|Himi|https://codepen.io/Himi/pen/dyVdbLV|
|66|Empty Wu|https://codepen.io/emptywu/pen/LYzQEpq |
| 67 | Aya | https://codepen.io/NoNameNote/pen/WNZMNKQ |
| 68 | Fleur | https://codepen.io/swwlee/pen/RwLQGJW |
|69|Zhang|https://codepen.io/Zhangbun/pen/KKXQNdx |
|70|Steve|https://codepen.io/ycsteve/pen/poWawvz |
|71|Calon|https://codepen.io/Calon0118/pen/OJxQQBZ|
|72|ShaoYu|https://codepen.io/shaoyukao/pen/VwMQJyx|
|73|Jung|https://codepen.io/ROUJUNG/pen/VwMXYJY?editors=1111|
|74|陳暐中|https://codepen.io/wei-z/pen/BawrpXX|
|75|Otis|https://codepen.io/humming74/pen/KKXovBq?editors=1111
|76|Gu|https://codepen.io/guitimliu/pen/abLYjjW|
|77|Bonnie|https://codepen.io/bonnieli1414/pen/LYzdXbW?editors=1010|
|78|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/LYzmPPv
|79| Elaine Liu | https://codepen.io/elaine7598/pen/VwMxjdr?editors=1010 |
|80|Aaron Tu|https://codepen.io/aarontu/pen/eYGrEbe|
|81|peter.chen1024|https://codepen.io/JIAN-RONG/pen/yLzjvav?editors=1111|
|82|Alvin|https://codepen.io/Alvin20201116/pen/MWEGrOp?editors=1010|
|83|Kelvin Hsu| https://codepen.io/kelvin001/pen/RwLyLzp|
|84|Sihle Huang|https://codepen.io/bugbug777/pen/KKXRRYW|
|85|Steven Chan|https://codepen.io/Steven1220/pen/NWaMePZ?editors=1010|
|86|DDDDK|https://codepen.io/dkklee/pen/XWeYbxo
|87|Hedy|https://codepen.io/hhhsuan41/pen/BawVqjN
|88|Scottie|https://codepen.io/wow767t/pen/abLKQNe
|89|yuan|https://codepen.io/yuanluo13542/pen/BawVvxe
|90|5/周周|https://codepen.io/jhoujhou-the-decoder/pen/XWeYLWO
|91|Jasper|https://codepen.io/li-jasper/pen/GRMBRNW
|92|Yashien Lin |https://codepen.io/YashienLin/pen/ExwpXex?editors=0010
|93|阿武|https://codepen.io/samwnkyat/pen/yLzqPWr
|94|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/poWZMEm
|95|Riley|https://codepen.io/jjpxbprd/pen/xxXawbM|
|96|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/mdBGzQZ?editors=1010|
|97|安志|https://codepen.io/lwmtsgek/pen/GRMXzZw?editors=1011|
|98|Dobe|https://codepen.io/lisebee/pen/8ba3f1fec3bb9cbf24b7f44f4e37b32b?editors=1010|
|99|YC|https://codepen.io/YCLu/pen/LYzXpzq|
|100|Jie|https://codepen.io/qgqonost-the-flexboxer/pen/oNGQYgW?editors=1010|
|101|danny123 |https://codepen.io/binlandz123/pen/jOGQVKE?editors=1010 |
|102|William_O^2|https://codepen.io/CodingTrain_1/pen/bGoQqNR |
|103|Van.CS|https://codepen.io/fbacojji-the-selector/pen/gOGQGxd |
|104|mei|https://codepen.io/Shila-Chen/pen/MWEzQmY |
|105|YaWenYu|https://codepen.io/yuwendy/pen/oNGQOGX |
|106|PeiChi| https://codepen.io/pei-chi-tsai/pen/vYevgGV |
|107|BrunoYu| https://codepen.io/bruno-yu/pen/qBPLyNp |
|108| 阿劍 | https://codepen.io/seonkuraito/pen/QWqYNoP |
|109| manson許 | https://codepen.io/oupbzfxq-the-scripter/pen/zYEbwGe |
|110| Sean Chang | https://codepen.io/seanchang7/pen/KKXByPZ |
|111| 肉桂卷 | https://codepen.io/ginnlee/pen/rNGRYXm?editors=1010 |
|112| Carol Li | https://codepen.io/carolli834/pen/KKXERQm |
|113| andyii | https://codepen.io/gultrotpy/pen/PoJLdvN |
|114| 三隻小貓|https://codepen.io/bagelover/pen/QWqRoxJ|
|115|Mura|https://codepen.io/Murasakicho/pen/mdBNKZb|
|116|阿和|https://codepen.io/shnny/pen/wvrVxeJ|
|117|卡丘|https://codepen.io/OneKwei/pen/JjOPGjo|
|118|2/WA|https://codepen.io/ldddl/pen/MWOgKJR|
|119| 李努 |https://codepen.io/almuptfn-the-reactor/pen/podJdJo|