# 🏅 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. 我的 Discord 名稱
2. 餐廳數量 
3. 課程 id
4. 畢業日期
5. 練習時間

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

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

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


可以參考：
* https://getbootstrap.com/docs/5.3/components/buttons/
* https://getbootstrap.com/docs/5.3/components/alerts/

<!-- 解答：

變數:
1. 我的 discord 名稱: myDiscordName
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>
-->

| 名字 | 連結 |
| ------------- | ---------------------------------------------------------------------------- |
| Saika | [codePen](https://codepen.io/saika4501/pen/LENoQBq?editors=1011) |
| liwen | [codepen](https://codepen.io/liwenchiou/pen/RNamMBp) |
| Marco | [codepen](https://codepen.io/MarcoChiu/pen/ogxRqZg) |
| Jeffrey | [codepen](https://codepen.io/jeffreylin1990/pen/emZaMex) |
| 登登登 | [codepen](https://codepen.io/Duncanin/pen/OPNYZXw) |
| Michelle | [codepen](https://codepen.io/bastar_dize/pen/wBGbjKE?editors=1010) |
| Chia | [codepen](https://codepen.io/Chia-the-encoder/pen/azNrGqJ) |
| 洋蔥 | [codepen](https://codepen.io/mikeyam/pen/GgZadLP) |
| Sherry | [codepen](https://codepen.io/twvyqojd-the-typescripter/pen/GgZaGja) |
| Hugh | [codepen](https://codepen.io/Hugh-Chen/pen/NPNVBPg) |
| 小懿 | [codepen](https://codepen.io/YT-the-vuer/pen/OPNYwaz) |
| jchunnn | [codepen](https://codepen.io/jchunnn/pen/bNpyxVm) |
| Leonard | [codepen](https://codepen.io/hyyfjqra-the-sans/pen/raegZEy) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/WbwBaxQ?editors=1010) |
| Naojun | [codepen](https://codepen.io/NAOJUN/pen/VYaOEwG) |
| Wafa | [codepen](https://codepen.io/dqricwgo-the-reactor/pen/PwNvygN?editors=1010) |
| Percy | [codepen](https://codepen.io/Percy-Ku/pen/RNamqXZ) |
| Katie | [codepen](https://codepen.io/Katiekatiehsu/pen/ByKebKW) |
| andy | [codepen](https://codepen.io/ewnblckz-the-styleful/pen/XJdwGWP) |
| maerc | [codepen](https://codepen.io/Lu-Liangyu/pen/xbVNead?editors=0010) |
| wind | [codepen](https://codepen.io/wind7y/pen/emZaoKZ) |
| Debby Yang | [codepen](https://codepen.io/Debby-Yang/pen/azNrxXw) |
| mini | [codepen](https://codepen.io/miiinii32-Cheng/pen/MYyMWEq?editors=1010) |
| Nooooora | [codepen](https://codepen.io/Nora-Ch/pen/dPMBPbO) |
| suemma | [codepen](https://codepen.io/suemma/pen/zxqVxvx) |
| RUDY | [codepen](https://codepen.io/Rudy-crw/pen/WbwqbGL?editors=1010) |
| 柔術小子 | [codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/NPNZPpe) |
| Tetsu | [codepen](https://codepen.io/ttgchang/pen/pvyXjgp?editors=1010) |
| esther | [codepen](https://codepen.io/biunpujm-the-flexboxer/pen/WbwqQzM) |
| Eileen | [codepen](https://codepen.io/Eileen-io/pen/MYyMaGP?editors=1010) |
| Vergil | [codepen](https://codepen.io/aglgvsie/pen/OPNeMRZ) |
| Rogan | [codepen](https://codepen.io/RoganHsu/pen/MYyMKmg) |
| Sam.S.T.Y | [codepen](https://codepen.io/Sam-Yang-the-animator/pen/MYyMeVP) |
| 社子畢卡索 | [codepen](https://codepen.io/pen?template=myPZEom) |
| Zem | [codepen](https://codepen.io/dgldwqlg-the-vuer/pen/dPMBpeV) |
| 7Red | [codepen](https://codepen.io/cch2655/pen/ogxrzmo) |
| 星雪糖 | [codepen](https://codepen.io/vfpofbgm-the-scripter/pen/QwNXdMa?editors=1010) |
| YUCCC | [codepen](https://codepen.io/taroooo/pen/RNazKMR) |
| An | [codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/raeEyVX?editors=1010) |
| 布萊斯 | [codepen](https://codepen.io/oddmtaag-the-scripter/pen/Wbwqpdm) |
| JiaMori | [codepen](https://codepen.io/jiamori/pen/ByKevNV) |
| bon | [codepen](https://codepen.io/pengpon/pen/bNpPKWG) |
| cindy | [codepen](https://codepen.io/a50134/pen/azNgRaY) |
| Cami | [codepen](https://codepen.io/irisLife/pen/zxqVMdM) |
| UNO | [codepen](https://codepen.io/uno1985/pen/OPNedge) |
| Tippy | [codepen](https://codepen.io/Ektodor-Wang/pen/MYyNWXX) |
| Eric | [codepen](https://codepen.io/lumedkle/pen/YPqmqBB) |
| tanuki | [codepen](https://codepen.io/tanuki320/pen/ZYWgLGa?editors=1010) |
| eagle_huang27 | [codepen](https://codepen.io/YuCi/pen/bNpXvee) |
| cks40660 | [codepen](https://codepen.io/CKS40660/pen/vEGoaKq) |
| Atian | [codepen](https://codepen.io/A-Tian-Chen/pen/myPNjGV) |
| Jenna | [codepen](https://codepen.io/abiscc14/pen/VYaoJQJ) |
| KOMATSU PEI | [codepen](https://codepen.io/Komatsu2021/pen/ByzBVyV?editors=1010) |
| 老屠 | [codepen](https://codepen.io/fsgfxvlb-the-selector/pen/XJKrYvR?editors=0010) |
| ying | [codepen](https://codepen.io/Lara-Lin/pen/zxBOLqP) |
| 地瓜 | [codepen](https://codepen.io/ChippyYU/pen/gbMOYJZ) |
| 伊迪 | [codepen](https://codepen.io/sorryFish/pen/KwMKNoO) |
| Owen He | [codepen](https://codepen.io/owen1120/pen/azZbpow?editors=1010) |
| 蜜桃果茶 | [codepen](https://codepen.io/jia-yiii/pen/KwMKXmY) |
| nonwa_jeff | [codepen](https://codepen.io/nonwaaa/pen/NPrWPYX) |
| 平平 | [codepen](https://codepen.io/ypinpin/pen/ZYOExRy) |
| CharisLai | [codepen](https://codepen.io/charislai/pen/bNpPVYo) |
| 舜仁 | [codepen](https://codepen.io/shunjen/pen/MYyMwYj) |
| 主委加碼啦幹 | [codepen](https://codepen.io/popbob-the-bashful/pen/zxBYVwz) |
| Eric | [codepen](https://codepen.io/wc-su/pen/jErEWQZ) |
| RyanC | [codepen](https://codepen.io/RyanYD/pen/QwEwKNp) |
| kashiwatei | [codepen](https://codepen.io/kashiwatei/pen/gbMboEL?editors=1010) |
| 冠翔 | [codepen](https://codepen.io/hsrfcdrx-the-bold/pen/raLaPjb) |
| ZoeKang | [codepen](https://codepen.io/byehywmx-the-animator/pen/raLaPrB)|
| Jin | [codepen](https://codepen.io/Jin-L/pen/dPXobMY) |
| Kate Chou| [codepen](https://codepen.io/ydzfqmuh-the-selector/pen/GgqgWEp) |
| bill0530| [codepen](https://codepen.io/rexvfzmf-the-typescripter/pen/myEJMZV) |
| Miikaa| [codepen](https://codepen.io/Miikaa/pen/xbOGmLz) |
|小趴|[Codepen](https://codepen.io/papa2415/pen/xbOwPEZ)|
|PAgaNiNi|[Codepen](https://codepen.io/PA-OTTER/pen/PwzPXYX?editors=0010)|
|蛋白|[Codepen](https://codepen.io/sjlu-0/pen/XJKmvXp)|
|Midy Wu|[Codepen](https://codepen.io/work-wu/pen/KwMzpXq?editors=0010)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/ByzWVvP)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/gbMWXzQ?editors=1010)|
|Doreen翠翠翠|[Codepen](https://codepen.io/cuei-sian-Wang/pen/NPrgzJY?editors=1010)|