---
# System prepended metadata

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

---

# 🏅 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://i.imgur.com/ah9cHAW.png)

可以參考：
* 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)|