---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 1 - 變數命名、Bootstrap OOCSS 運用

變數命名
---
在 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 名稱
2. 餐廳數量 
3. 課程 id
4. 畢業日期
5. 練習時間

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

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

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


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

## 回報流程

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


<!-- 解答：

變數:
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>
-->

回報區
---

| Discord | CodePen / 答案 |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| elena | [Codepen](https://codepen.io/elena0127abc/pen/eYxqVja)|
| carriet 🍄 | [Codepen](https://codepen.io/echocarriet/pen/zYegwBb)|
| pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/NWoQjbX?editors=1010)|
| runweiting | [Codepen](https://codepen.io/weiting14/pen/ZEwgKBm)|
| 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/YzBmVQW)|
| Celine 510 | [Codepen](https://codepen.io/Celine-510/pen/rNPXmmR)|
| yuan! | [Codepen](https://codepen.io/townyuan/pen/wvNVdpp)|
| pingshian | [Codepen](https://codepen.io/pingshian0131/pen/jOdgmap) |
| zona | [Codepen](https://codepen.io/w242920/pen/MWLNmQL) |
| kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/xxMvdJG) |
| fanshu0303 | [Codepen](https://codepen.io/JuiHsuanLee0303/pen/qBgemwN) |
| Leo | [Codepen](https://codepen.io/Aruminiya/pen/VwgobNp) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/GRzVEgQ) |
| 翔.(Ben) | [CodePen](https://codepen.io/energy95272z/pen/MWLNobW) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/vYboZKp) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/gOqVRWd) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/xxMvrWr) |
| 教練 | [CodePen](https://codepen.io/monkeybear721/pen/GRzVEvB) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/OJdKgEq) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/PoVMjdV)|
| Bin |[CodePen](https://codepen.io/binbro708/pen/LYqwjYr)|
|荷菓かのり| [Codepen](https://codepen.io/oogxwkvw-the-builder/pen/WNPVEQr?editors=1111)|
|ryan.chou| [Codepen](https://codepen.io/csw8524/pen/rNPXzeG)|
| Yijing | [Codepen](https://codepen.io/Yi-Jing-71080635/pen/YzBmxXd?editors=0010)|
| rayPo | [Codepen](https://codepen.io/raycheng/pen/LYqwjdq)|
| FangFang | [Codepen](https://codepen.io/FangFang09/pen/MWLNvQE)|
| Eden |[Codepen](https://codepen.io/iseden/pen/MWLNvqr)|
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/poGMrKr)|
| cbs |[Codepen](https://codepen.io/wasdjk/pen/ZEwgJqx)|
| kawa | [Codepen](https://codepen.io/z83xji6/pen/RwvXZvN)|
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/dyaxVPy)|
|haru|[Codepen](https://codepen.io/haru_portfoilo/pen/poGMWeZ)|
| dora | [Codepen](https://codepen.io/dorayu/pen/zYegwoX)|
| Eazy | [Codepen](https://codepen.io/Eazychen/pen/OJdKxmg)|
| Yang | [Codepen](https://codepen.io/Yang-J/pen/abXeLgd)|
| cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/abXeWOx)|
| MDFK | [Codepen](https://codepen.io/maywang/pen/bGzXYwO?editors=1010)|
| Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/poGMdPz?editors=1010)|
| Nelly | [Codepen](https://codepen.io/Nelly-Guo/pen/QWYeOyo)|
| Tippy | [Codepen](https://codepen.io/Ektodor-Wang/pen/ZEwgaZB)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/BaMXJdo)|
|Yafan|[CodePen](https://codepen.io/yafanchung/pen/abXeEVj)|
|XinYu|[CodePen](https://codepen.io/HsuXinYu/pen/KKJOZxv)|
|ann6212|[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/XWOvZdo)|
| SHUO | [Codepen](https://codepen.io/xrzarxkl-the-reactor/pen/yLZmvzR)|
| nini1202desu | [Codepen](https://codepen.io/tvxq5206/pen/gOqVvzx?editors=1010)|
| BUG | [Codepen](https://codepen.io/BUG-the-sans/pen/eYxqVMo)|
| Elio | [Codepen](https://codepen.io/Elio_TYC/pen/jOdgzLg)|
| Neil | [Codepen](https://codepen.io/Neil1024/pen/qBgeopX)|
| Chris | [Codepen](https://codepen.io/cjtseng07/pen/wvNVmGY)|
| Jennifer | [Codepen](https://codepen.io/yujhen/pen/RwvXMgM)|
| Uli | [Codepen](https://codepen.io/uli1313/pen/NWoQYLQ?editors=1010)|
| Lobinda | [Codepen](https://codepen.io/Lobinda/pen/gOqVeJE)|
| Mattie | [Codepen](https://codepen.io/mattielin/pen/qBgexOe)|
| yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/QWYerNN)|
| \_amaaaa | [Codepen](https://codepen.io/Alicia-Chu/pen/BaMXxJo)|
| 熊大 | [Codepen](https://codepen.io/asiating/pen/xxMvjMm)|
| Emily | [Codepen](https://codepen.io/Emily2089/pen/MWLNGRQ)|
| 關關 | [Codepen](https://codepen.io/ashkuan/pen/YzBmLvo)|
| wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/KKJOeRx)|
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/gOqVKZG) |
| Enzo | [codePen](https://codepen.io/Enzo-Lo/pen/zYegLrv?editors=1111) |
| Oria | [Codepen](https://codepen.io/kajing/pen/dyaxjBK?editors=0010)|
| Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/eYxqQmO)|
| bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/LYqwqdV)|
| 貢波波夫 | [Codepen](https://codepen.io/mxgrfgcr-the-bashful/pen/GRzVzYE)|
| santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/yLZmZxG)|
| ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/xxMvBar)|
| stone4584 | [Codepen](https://codepen.io/Royen0506/pen/bGzXJEG)|
|依依 | [Codepen](https://codepen.io/Rita-Yang/pen/dyaxEbx )|
| hedy_h | [Codepen](https://codepen.io/Hedy_H/pen/OJdKGqN)|
| JING | [Codepen](https://codepen.io/HSUANIN0327/pen/zYeVKEm)|
| adonis | [Codepen](https://codepen.io/adonismis/pen/LYqwoOE)|
| hua | [Codepen](https://codepen.io/LHua/pen/gOqVJgL)|
| Martin | [Codepen](https://codepen.io/markyourpage/pen/VwgoRNd)|
| Sabrina | [Codepen](https://codepen.io/SabrinaGuo/pen/qBgezyX)|
| yahan87097 | [Codepen](https://codepen.io/sakana0830/pen/ExrqqWo)|
| 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/GReKREd)|
| KUN.| [Codepen](https://codepen.io/barry91205/pen/wvOwBEG)|
| c8529 | [Codepen](https://codepen.io/claire210401/pen/mdaEoMN)|
| MikeLin | [Codepen](https://codepen.io/MikeLin0701/pen/yLwBYVd)|
| MY | [Codepen](https://codepen.io/ahmomoz/pen/OJqLMMe)|
| 風羽 | [Codepen](https://codepen.io/Joy-Huang/pen/ExrqvQp?editors=1010)|
| RayRay | [Codepen](https://codepen.io/CityRay/pen/KKEPWEm)|
| Tom | [Codepen](https://codepen.io/sp1daTomm/pen/VwRZzqN)|
| Ivy |[Codepen](https://codepen.io/yi-hua-lin/pen/wvOwrMo)|
| Zem |[Codepen](https://codepen.io/Potoro/pen/BabBrwP)|
|_shun0130 | [Codepen](https://codepen.io/koba60052ww/pen/ExMYLxm?editors=1010)|
|hsuhsusophie| [Codepen](https://codepen.io/hsuhsusophie/pen/qBvWYbp)|
| WA | [Codepen](https://codepen.io/ldddl/pen/PoLYrvy?editors=1000)|
| Ariel | [Codepen](https://codepen.io/ariel0510/pen/RwdwNqO)|
| Peng | [Codepen](https://codepen.io/H-Peng/pen/PoLobWZ?editors=1010)|
| joy-chiang| [Codepen](https://codepen.io/dcthmcje-the-reactor/pen/wvOvdPg?editors=1010)|
| QOO | [Codepen](https://codepen.io/QOOQOOQ/pen/vYPYWGy?editors=1000)|
| yuli | [Codepen](https://codepen.io/qlmjined-the-typescripter/pen/dyryaVE)|
| jeremyChan | [Codepen](https://codepen.io/nudieisgood/pen/xxBbxWG)|
| Rock | [Codepen](https://codepen.io/xiu43317/pen/LYaEYZE)|
| Yuetin | [Codepen](https://codepen.io/Yue9527/pen/qBvEEgo)|
| 小正 | [Codepen](https://codepen.io/colorgolden/pen/dyrPoyg)|
| WEI | [Codepen](https://codepen.io/wei-z/pen/bGZNqqZ)|
| .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/BabyRpN)|
| 豪豪 | [Codepen](https://codepen.io/hao-yeye/pen/eYXmvPB)|
| Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/xxBbLyX)|
| macihuang | [Codepen](https://codepen.io/macy1215/pen/zYbxpzK)|
| Yang | [Codepen](https://codepen.io/hike1707/pen/vYPEjVa)|
| Aaron| [Codepen](https://codepen.io/nzygxhnl-the-scripter/pen/BabyVpy)|
| lxokine| [Codepen](https://codepen.io/iqqdmhtf-the-builder/pen/OJqPEgP)|
| 柚子| [Codepen](https://codepen.io/as6625998/pen/LYaEvBz)|
| adam322| [Codepen](https://codepen.io/hexschool/pen/OJEwzZJ)|
| sponge| [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/ZEPGWxJ)|
| 保羅| [Codepen](https://codepen.io/paul-1997/pen/zYbGogL)|
| PoWei#8484| [Codepen](https://codepen.io/harrison-wei-lai/pen/WNmvzdX)|
| owen| [Codepen](https://codepen.io/owen-dong/pen/eYXNPbe?editors=1010)
| Vivian2857| [Codepen](https://codepen.io/vivian_lin/pen/gOEpZWv?editors=1010)|
|　狸貓 | [Codepen](https://codepen.io/tanuki320/pen/NWJqozG)|
| Ting | [Codepen](https://codepen.io/liara/pen/MWxaJjr)|
| Iris | [Codepen](https://codepen.io/iris831206/pen/abMvJWO)|
| xuan | [Codepen](https://codepen.io/xuan0915/pen/wvOKeeo?editors=1010)|
peggy | [Codepen](https://codepen.io/peggylai/pen/NWJGYqr)|
|　Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/XWGmGyx)|
| Jason | [Codepen](https://codepen.io/bfnrjakt/pen/PoLPgRE)|
| jia yu | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/xxBZmLv)|
| skypassion5000 | [Codepen](https://codepen.io/skypassion5000/pen/ExMPBoL)|
|shuuu|[Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/YzgWNQj?editors=1010)|
|samgu666|[Codepen](https://codepen.io/orz311013/pen/bGZwWXm)|
|JasonFu|[Codepen](https://codepen.io/jie-Fu/pen/NWJbpPK)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/oNVYmKb)|
| Jim | [Codepen](https://codepen.io/asiahedh-the-encoder/pen/yLwgQwm)|
| 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/jOJaJqg?editors=1010)|

<!--快速<!-- | | [Codepen]()|