---
# System prepended metadata

title: "\U0001F3C5 Day 1 - 變數命名、Bootstrap OOCSS 運用"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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://i.imgur.com/ah9cHAW.png)

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



## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

變數:
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 / 答案                                                                                               |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| 雲丹 yundan#2720                      | [CodePen](https://codepen.io/yu-xian/pen/NWzZZYE)                                                            |
| K kill9ker#8028                       | [CodePen](https://codepen.io/kill9ker/pen/RwJmOWE)                                                           |
| Aaron Shih#3879                       | [CodePen](https://codepen.io/aaron00366/pen/JjZqOKE?editors=1010)                                            |
| 威0#6919                              | [CodePen](https://codepen.io/n0918679182/pen/zYaQBpN?editors=0010)                                           |
| Wendy3#5615                           | [CodePen](https://codepen.io/wendy03/pen/WNyBxZq)                                                            |
| azami#5986                            | [CodePen](https://codepen.io/azami/pen/abKrZEW)                                                              |
| bakiii                                | [CodePen](https://codepen.io/aki168/pen/WNyBxKe)                                                             |
| 薯餅#3581                             | [CodePen](https://codepen.io/ColdingPoTaTo/pen/JjZqKwM)                                                      |
| AuroraC#6539                          | [CodePen](https://codepen.io/AuroraC/pen/BaVezGg)                                                            |
| 艸良#2846                             | [CodePen](https://codepen.io/momoninainai/pen/abKrZMV)[CodePen](https://codepen.io/bryanlincode/pen/JjZqKqp) |
| 阿榮#8277                             | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/gOKQjeL)                                               |
| albee#9121                            | [CodePen](https://codepen.io/albee-chang/pen/rNKgMNz?editors=1010)                                           |
| 圈圈#4060                             | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/oNyRLqE)                                                  |
| 心幻羽#0056                           | [CodePen](https://codepen.io/linglingsyu/pen/BaVeLjy)                                                        |
| Yishan#4902                           | [CodePen](https://codepen.io/gdjrehhw-the-animator/pen/dyKEpYQ)                                              |
| YC#2522                               | [CodePen](https://codepen.io/YCLu/pen/JjZqKZr)                                                               |
| kenki100#0068                         | [CodePen](https://codepen.io/ken100/pen/QWxREPj)                                                             |
| 泊岸#3466                             | [CodePen](https://codepen.io/qoq77416416/pen/xxzNEEz?editors=1010)                                           |
| RJRS#9430                             | [CodePen](https://codepen.io/RJRS/pen/qBKGajQ)                                                               |
| 法希娜#3206                           | [CodePen](https://codepen.io/yiiserpf-the-encoder/pen/rNKgMzJ?editors=1111)                                  |
| Winnie#1306                           | [CodePen](https://codepen.io/WinnieWuWinnie/pen/YzvbGam?editors=0010)                                        |
| yaru#6308                             | [CodePen](https://codepen.io/lszaietc/pen/oNyRzoV?editors=1010)                                              |
| int#7518                              | [CodePen](https://codepen.io/intHuang/pen/BaVeLKy?editors=1010)                                              |
| 大頭#8186                             | [CodePen](https://codepen.io/d22495521/pen/ExRzged)                                                          |
| Rita916#4384                          | [CodePen](https://codepen.io/rita0916/pen/jOKoMJG)                                                           |
| mandylai#4055                         | [CodePen](https://codepen.io/mandy-lai-2/pen/dyKEpax?editors=1011)                                           |
| yuyu#6310                             | [CodePen](https://codepen.io/yuyu0905/pen/MWXdbYB?editors=1010)                                              |
| Judy Wei#6103                         | [CodePen](https://codepen.io/Judy0718/pen/qBKGqjE)                                                           |
| Sean#3825                             | [CodePen](https://codepen.io/sean_1215/pen/dyKEOqO)                                                          |
| 出事了阿伯#9923                       | [CodePen](https://codepen.io/BradpittLai/pen/abKrBqb)                                                        |
| jacky010080#0880                      | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/YzvbpJZ)                                                      |
| jimmyFang#9575                        | [CodePen](https://codepen.io/pohxiqqo/pen/MWXdJYg?editors=1011)                                              |
| 威爾#1694                             | [CodePen](https://codepen.io/WILL_Wu/pen/xxzNgwE)                                                            |
| Hazel.#6020                           | [CodePen](https://codepen.io/Hazelhsieh/pen/JjZqEbW)                                                         |
| Curtis#4780                           | [CodePen](https://codepen.io/curtislin/pen/yLEWgby)                                                          |
| Rena#6249                             | [Codepen](https://codepen.io/aureate0116/pen/VwdOPyX)                                                        |
| JackC#0411                            | [Codepen](https://codepen.io/key0329/pen/oNyRBJd)                                                            |
| PH#2731                               | [Codepen](https://codepen.io/lokf9527/pen/gOKJgVJ)                                                           |
| kuku#3118                             | [Codepen](https://codepen.io/mengting-ku/pen/jOKoBqM)                                                        |
| Benson#6763                           | [CodePen](https://codepen.io/kumashow/pen/wvXbJQo)                                                           |
| 小夜#3809                             | [CodePen](https://codepen.io/Naito_K/pen/oNyRZGm?editors=1011)                                               |
| hannahTW#2224                         | [CodePen](https://codepen.io/hangineer/pen/MWXdrzQ?editors=0010)                                             |
| 小潘#8743                             | [CodePen](https://codepen.io/hexschool/pen/OJEYmPW)                                                          |
| SASIMI#5099                           | [Codepen](https://codepen.io/sashimi1327/pen/oNyRZVr)                                                        |
| Hironaka#7367                         | [Codepen](https://codepen.io/Hironaka0815/pen/GRGaWLo?editors=1010)                                          |
| Kimi#9564                             | [CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ)                                                           |
| 楊苡安#2752                           | [CodePen](https://codepen.io/yi-an-yang/pen/oNyRZRK)                                                         |
| masterYan#2480                        | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/VwdOpgZ?editors=1010)                                   |
| RyanC#6960                            | [CodePen](https://codepen.io/RyanYD/pen/mdKYmeE?editors=1010)                                                |
| Alex#9978                             | [CodePen](https://codepen.io/datsxzqg-the-selector/pen/QWxRvpm?editors=1010)                                 |
| Tunafin#5340                          | [CodePen](https://codepen.io/tunafin/pen/eYKaWdb)                                                            |
| Austyn#0949                           | [CodePen](https://codepen.io/fish90547/pen/GRGamxE)                                                          |
| cbs#9007                              | [Codepen](https://codepen.io/wasdjk/pen/oNyRWej)                                                             |
| IreneY#0086                           | [Codepen](https://codepen.io/HalfPlannedJourney/pen/mdKYwyp)                                                 |
| RainLiao#2616                         | [Codepen](https://codepen.io/billpop741/pen/xxzNrPd)                                                         |
| ㄚ翔#8126                             | [codepen](https://codepen.io/engineerjohnson/pen/ZERNyZB)                                                    |
| 小木馬#8760                           | [Codepen](https://codepen.io/wmmtbcsd/pen/XWYweKO?editors=1010)                                              |
| 無名#6427                             | [Codepen](https://codepen.io/Nomoney/pen/PoavJzp)                                                            |
| Jill Lee#0809                         | [Codepen](https://codepen.io/chi-ling-lee/pen/WNyBZPg?editors=1010)                                          |
| yuchenye#6119                         | [Codepen](https://codepen.io/yuchen/pen/GRGaMby)                                                             |
| RayChen#6088                          | [Codepen](https://codepen.io/raychen1996/pen/OJEYOyw)                                                        |
| 949cat 𓃠#2154                         | [codepen](https://codepen.io/Ariel_Chen/pen/NWzVaeB)                                                         |
| 冬天#5215                             | [codepen](https://codepen.io/winter_/pen/rNKgYJL)                                                            |
| 鑫鑫#4346                             | [CodePen](https://codepen.io/Neil1024/pen/BaVeQrJ?editors=1010)                                              |
| yoyo123456#0577                       | [CodePen](https://codepen.io/hungyoyo/pen/XWYwzGR?editors=0010)                                              |
| xin#1214                              | [CodePen](https://codepen.io/SiaoYao/pen/KKeLZKz)                                                            |
| yuling#1634                           | [CodePen](https://codepen.io/igzdflpu/pen/KKeLZZm)                                                           |
| JimmyChang#5558                       | [CodePen](https://codepen.io/JimmyChangWenChi/pen/MWXdrRV)                                                   |
| RainJ#3480                            | [CodePen](https://codepen.io/RainJCode/pen/PoavEwr)                                                          |
| 布魯諾#7239                           | [CodePen](https://codepen.io/bruno-yu/pen/OJEYQLb?editors=1010)                                              |
| Mia小福#4473                          | [CodePen](https://codepen.io/a0950271/pen/eYKaybr)                                                           |
| Bella_#1587                           | [CodePen](https://codepen.io/Chen-Bella/pen/xxzNYRo)                                                         |
| Fannie_#7800                          | [CodePen](https://codepen.io/dgltu/pen/rNKgWPB?editors=1011)                                                 |
| PayRoom#8328                          | [Codepen](https://codepen.io/water38198/pen/XWYwEqN)                                                         |
| 魚子醬#5220                           | [CodePen](https://codepen.io/haihsuan/pen/WNyBzXB)                                                           |
| 竹輪#3335                             | [CodePen](https://codepen.io/chikuwa0120/pen/LYrodqQ)                                                        |
| 拓子#0577                             | [CodePen](https://codepen.io/vjqetrjt-the-scripter/pen/abKrGNq)                                              |
| DIO大人#4776                          | [CodePen](https://codepen.io/oscar-2283/pen/jOKoxBM)                                                         |
| ABOOS#6276                            | [CodePen](https://codepen.io/guhungyin/pen/yLEWEXx)                                                          |
| Eileen#6454                           | [CodePen](https://codepen.io/Eileen-io/pen/PoavLRy)                                                          |
| LHchien33#6232                        | [CodePen](https://codepen.io/lin_chien/pen/VwdORqx)                                                          |
| Fang#4680                             | [CodePen](https://codepen.io/std95174/pen/eYKaopv)                                                           |
| CatBoxy#4207                          | [CodePen](https://codepen.io/nekoboxy/pen/poKmBjb)                                                           |
| PeihanWang#2530                       | [CodePen](https://codepen.io/PeihanWang/pen/rNKgbXr)                                                         |
| Knock59487#9114                       | [CodePen](https://codepen.io/Zack88/pen/dyKEEBO)                                                             |
| 阿沁#8176                             | [CodePen](https://codepen.io/a8322342/pen/WNyBqJB)                                                           |
| Yiru#0236                             | [Codepen](https://codepen.io/yiru94/pen/VwdOJeb?editors=1010)                                                |
| Potatolee#7749                        | [Codepen](https://codepen.io/potatoleee/pen/XWYwvmg)                                                         |
| Natsuki#9555                          | [Codepen](https://codepen.io/tinawang722/pen/eYKaqXM)                                                        |
| kevin#8349                            | [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/ExRBYYO?editors=1010)                                  |
| AkiHico#9239                          | [Codepen](https://codepen.io/akihico/pen/XWYLrZQ?editors=1010)                                               |
| Chaya#3412                            | [Codepen](https://codepen.io/ChiaoJiao/pen/LYroZXd)                                                          |
| Jamie Wu#9345                         | [Codepen](https://codepen.io/Wu220103/pen/eYKwNyb)                                                           |
| Barret#1110                           | [codepen](https://codepen.io/barret0720/pen/dyKBPMj)                                                         |
| sherlin#4587                          | [codepen](https://codepen.io/sherlinKuo/pen/jOKjqPG)                                                         |
| Ron Liang#7277                        | [codepen](https://codepen.io/ron-go/pen/Yzvoqxy)                                                             |
| Doris Li#2096                         | [codepen](https://codepen.io/ping-lee/pen/oNyrxgr)                                                           |
| Asher Xu #9297                        | [Codepen](https://codepen.io/kirakira72/pen/MWXMyKV)                                                         |
| christina#6185                        | [Codepen](https://codepen.io/chrisc0210/pen/YzvoWqQ)                                                         |
| Cheryl#4007                           | [Codepen](https://codepen.io/Cheryl-Hsu/pen/jOKjMKV)                                                         |
| Paul#7426                             | [CodePen](https://codepen.io/paul-1997/pen/rNKEMQJ?editors=1010)                                             |
| JY#5712                               | [CodePen](https://codepen.io/judychang789/pen/ExRBNQz)                                                       |
| ssozr#4680                            | [codepen](https://codepen.io/ssozr/pen/KKeLgOQ)                                                              |
| 黑白兔#0684                           | [codepen](https://codepen.io/johnny329/pen/mdKZXMP)                                                          |
| MotoRin#2616                          | [codepen](https://codepen.io/sakimoto/pen/rNKEJJo?editors=1010)                                              |
| 大衛#4869                             | [codepen](https://codepen.io/exnsrpjc/pen/bGKyZzP)                                                           |
| Yuna Huang#2692                       | [codepen](https://codepen.io/Yuna1002/pen/BaVgVNz)                                                           |
| LinaChen#1796                         | [codepen](https://codepen.io/LinaChen/pen/wvXLxgX)                                                           |
| Amberhh#2465                          | [Codepen](https://codepen.io/Amberhh/pen/bGKPOgb?editors=1100)                                               |
| shiuan#4721                           | [Codepen](https://codepen.io/prankaChang/pen/eYKwbgg)                                                        |
| 小天#7177                             | [Codepen](https://codepen.io/linyujing/pen/QWxXzvb)                                                          |
| danny123                              | [codepen](https://codepen.io/binlandz123/pen/ExRBMzN?editors=1010)                                           |
| Creeam#3449                           | [codepen](https://codepen.io/frxdwbbi-the-sasster/pen/KKeLQJb?editors=1010)                                  |
| 狸貓#5863                             | [codepen](https://codepen.io/tanuki320/pen/NWzZVxd)                                                          |
| enolachen#8031                        | [codepen](https://codepen.io/Chen-Enola/pen/eYKwwjm)                                                         |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922 | [codepen](https://codepen.io/sho666/pen/rNKXBgR)                                                             |
| Mattie#0788                           | [codepen](https://codepen.io/mattielin/pen/qBKeWJW)                                                          |
| Bingsu#2362                           | [Codepen](https://codepen.io/pmyfr/pen/JjZgGMp)                                                              |
| 柔柔#1716                             | [Codepen](https://codepen.io/rouchen/pen/ExRqyWa)                                                            |
| 米米#1824                             | [Codepen](https://codepen.io/Jameshsu0407/pen/mdKNEBB)                                                       |
| Tami#6742                             | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/qBKeaeJ)                                                  |
| Hilda#7085                            | [Codepen](https://codepen.io/vwquikad-the-vuer/pen/qBKerpx)                                                  |
| Keep#4336                             | [Codepen](https://codepen.io/keep-/pen/NWzQvLq?editors=1111)                                                 |
| 老皮博士#8050                         | [Codepen](https://codepen.io/li0406/pen/ExRqwNp)                                                             |
| Hsiu#8767                             | [Codepen](https://codepen.io/amy-hsiu/pen/rNKXGoQ)                                                           |
| Zack_P#1805                           | [Codepen](https://codepen.io/tmzazirh-the-animator/pen/QWxemGB)                                              |
| 柚子#3958                             | [Codepen](https://codepen.io/as6625998/pen/poKMVdg?editors=1010)                                             |
| Jenny真#7532                          | [CodePen](https://codepen.io/wei-chen-wu/pen/WNyVWbm?editors=1010)                                           |
| 阿蘇#8531                             | [CodePen](https://codepen.io/susu3131/pen/jOKgjbx?editors=0010)                                              |
| Bassjim#0118                          | [CodePen](https://codepen.io/unrtxbaq/pen/XWBrbeq)                                                           |
| wen#2289                              | [CodePen](https://codepen.io/bfvnyzol-the-typescripter/pen/RwBbZPx)                                          |
| Tuhacrt#0008                          | [codepen](https://codepen.io/Tuhacrt/pen/NWBKvPE)                                                            |
| How#5806                              | [codepen](https://codepen.io/howtobefine/pen/zYLOWpV)                                                        |
| 雞腿#6089                             | [codepen](https://codepen.io/C-WEi/pen/YzjKvXR)                                                              |
| 喬喬#2824                             | [codepen](https://codepen.io/joanne-wei/pen/qByWvWw)                                                         |
| hua#9099                              | [Codepen](https://codepen.io/LHua/pen/poZzMRX)                                                               |
| KC_8685#9343                          | [Codepen](https://codepen.io/cathy7411/pen/abjbmyZ)                                                          |
| yoyo#1003                             | [Codepen](https://codepen.io/pen/YzjzGJa)                                                                    |
| Chi#7605                              | [Codepen](https://codepen.io/YoChi84/pen/gOjOXYa)                                                            |
| Jeff#6077                             | [Codepen](https://codepen.io/nonwaaa/pen/mdjdQJy)                                                            |
| Adeiv                                 | [Codepen](https://codepen.io/Adif/pen/vYaEOgz)                                                               |
| suihsilan#9485                        | [Codepen](https://codepen.io/cathy7411/pen/abjbmyZ)                                                          |
| MingJuan#0071                         | [Codepen](https://codepen.io/M-Juan/pen/rNramvm)                                                             |
| ViNci#4273                            | [Codepen](https://codepen.io/ViNciSyo/pen/qByEzqQ)                                                           |
| Chole#1041                            | [Codepen](https://codepen.io/LinChole/pen/WNKbVPY)                                                           |
| hogan#6653                            | [Codepen]( https://codepen.io/hexschool/pen/OJEwzZJ)                                                         |
| yummyniya#7185                        | [Codepen](https://codepen.io/yummyniya/pen/WNZdGWy)                                                          |
| 你看我像是會玩嗎#1866                 | [Codepen](https://codepen.io/hasagg/pen/mdjJWeE)                                                             |
|sophiee#7015|[codpen](https://codepen.io/sophiee2727/pen/ZEjGoYj)|
|Silvialu#4521|[codpen](https://codepen.io/Silvia091640/pen/WNKbKgE)|
|Shuo#1596|[codpen](https://codepen.io/chiangchungshuo/pen/oNMXKXK?editors=1100)|
|FiReBrO#0557|[codpen](https://codepen.io/firebro42/pen/NWBGKPL)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/WNKQXQN)|
|大大#5164|[CodePen](https://codepen.io/gzonothk-the-looper/pen/oNMjEQG)|
popcorn_3q#9893|[CodePen](https://codepen.io/arnyrpqt-the-sasster/pen/vYaNjNY?editors=1111)|
| Wei#2330        | [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/bGjVMYr) |
| --------------- | ------------------------------------------------------------------- |
| hungya#0773     | [Codepen](https://codepen.io/hungya777/pen/rNrxYwj?editors=1010)    |
| 狸貓#5863       | [Codepen](https://codepen.io/tanuki320/pen/NWzZVxd)                 |
| Eason#7884      | [CodePen](https://codepen.io/ASLEO/pen/yLqexwE)                     |
| 詠銓#7784       | [CodePen](https://codepen.io/GGfish26/pen/qBybQJo)                  |
| Ringo#7583      | [CodePen](https://codepen.io/ringolai1988/pen/jOpqMwB?editors=1010) |
| Wendy77#8049    | [Codepen](https://codepen.io/Wendy__/pen/BaPKmzq)                   |
| YI#0863         | [Codepen](https://codepen.io/YI0305/pen/OJwXNgp?editors=1010)       |
| Andrea_#9338    | [Codepen](https://codepen.io/Andrea_11/pen/BaPzKYd)                 |
|阿異#4776|[Codepen](https://codepen.io/yani21399/pen/LYBZazx)|
| Cookie SSS#6991 | [Codepen](https://codepen.io/sqhjikpa-the-selector/pen/PoBzVwP)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/yLqMMYQ)|
| YU#0618     | [Codepen](https://codepen.io/yoken_/pen/qByrzNJ?editors=1010)    |
| 周周#3503     | [Codepen](https://codepen.io/jhoujhou-the-decoder/pen/dyjKXBy?editors=1010)    |
 |Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/MWQyPJe)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/dyjgNLq?editors=1010) |
|Velma#1693|[Codepen](https://codepen.io/Ze1225/pen/BaPGoQO)|
