---
tags: React 直播班 - 2024 冬季班
---
# 🏅 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/

## 回報流程

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


<!-- 解答：

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

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| IG| [Codepen](https://codepen.io/ingrid-chi/pen/zxOzjmg)|
| GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/bNbByyW)|
| Jun| [Codepen](https://codepen.io/jun12079/pen/gbYgOqo)|
| Toung | [Codepen](https://codepen.io/Toung/pen/pvzRoxG)|
| imsmallnew | [Codepen](https://codepen.io/imsmallnew/pen/ByBpyZv)|
| Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/raBjaJM)|
| Noy (Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/OPLWVgV)|
| Satar | [Codepen](https://codepen.io/SatarKuo/pen/XJrpXJb?editors=1011)|
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/VYZPedx?editors=1010)|
| Dolce_墨 | [Codepen](https://codesandbox.io/p/sandbox/day-1-bian-shu-ming-ming-bootstrap-oocss-yun-yong-k75l9t)|
| Tatsu | [Codepen](https://codepen.io/chindesu0207/pen/OPLWyaQ)|
| Amanda | [Codepen](https://codepen.io/cym199922/pen/yyBgOqP)|
| Nocab | [Codepen](https://codepen.io/PeihanWang/pen/zxONBqb?editors=1010)|
| Kaya | [Codepen](https://codepen.io/kayaribi/pen/EaYZyRY)|
| Tammy | [Codepen](https://codepen.io/Tammy_Tsai/pen/JoPEKOo)|
| 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/raBjMxV?editors=1010)|
| 1457 | [Codepen](https://codepen.io/1457dys/pen/WbeRGOB)|
| yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/emOgdVZ) |
| 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/QwLdGGE)|
| ollie |[CodePen](https://codepen.io/daiyy97/pen/MYgJbpo?editors=1010)|
| andy |[CodePen](https://codepen.io/andygggg/pen/qEWRqzG)|
| 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ByBppyW)|
| Rothy | [Codepen](https://codepen.io/ChloeHsu1/pen/zxONNJO)
| 蕾蕾 leilei | [Codepen](https://codepen.io/Leileisme/pen/XJrppeQ)|
| Sonia | [Codepen](https://codepen.io/YUJOU/pen/GgKrrvW?editors=1010)|
|christina | [Codepen](https://codepen.io/chris0210/pen/RNbKjzZ)|
| 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/yyBgpJm)|
| shiou | [Codepen](https://codepen.io/shiou-ho/pen/PwYWEjd)|
| haojing | [Codepen](https://codepen.io/hjxu/pen/gbYgvoO)|
|voke|[Codepen](https://codepen.io/FiSi-the-lessful/pen/zxONRML)|
| Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/ByBpraQ)|
|JIA | [Codepen](https://codepen.io/nzaicwlw-the-styleful/pen/GgKrdvG?editors=1010)|
| Cami | [Codepen](https://codepen.io/irisLife/pen/PwYWaOo) |
|mercury2508.| [Codepen](https://codepen.io/Mercury2508/pen/ogvBMVL)|
| Jasmine Lin | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/QwLdzgP)|
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/JoPEwOW)|
| cbs9007 |[CodePen](https://codepen.io/wasdjk/pen/gbYgZVq)|
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/YPKNMKZ)|
| 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/NPKdzyr?editors=1010)|
| skyderry | [Codepen](https://codepen.io/rrkkxeip-the-decoder/pen/VYZpYVQ)|
| ycl325.etheddie | [Codepen](https://codepen.io/wdvikfuz-the-selector/pen/JoPWbdO)|
| abab016001 | [Codepen](https://codepen.io/abab016001Jin/pen/qEWmbKa)|
| Fabio20| [Codepen](https://codepen.io/fabio7621/pen/yyBbOvJ)|
| .michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/Wbejwzb) |
| 阿佑 | [Codepen](https://codepen.io/ans9323052/pen/LEPybjQ)|
| CrystalLala | [Codepen](https://codepen.io/crystallala/pen/gbYWBvZ)|
| .ztion | [Codepen](https://codepen.io/ztion/pen/mybmvex?editors=1111) |
| LinaChen | [Codepen](https://codepen.io/LinaChen/pen/NPKgKqe) |
| Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/YPKQXPr) |
| Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/xbKrGqq) |
| 爆漿 | [Codepen](https://codepen.io/nvdwwlbx-the-vuer/pen/emORRjV) |
| 阿鼠 | [Codepen](https://codepen.io/wuasu/pen/wBweYxO) |
| 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/qEWjgPr) |
| Claire | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/zxOzVZP)|
| kaka_945 | [Codepen](https://codepen.io/kay945/pen/EaYXjmN)|
| ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/EaYXqqx)|
|a1phaki(小k)|[Codepen](https://codepen.io/a1phaki/pen/ogveqpM)
|嚼勁先生|[Codepen](https://codepen.io/James520284/pen/OPLjdZE)
|Joannehu|[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/GgKvVRK)
|Glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/WbeZKXe)
|chris|[Codepen](https://codepen.io/chris-chen-the-selector/pen/JoPOvop)
|Mike| [Codepen](https://codepen.io/mike2049/pen/GgKygwR?editors=0010)|
|是在哈囉| [Codepen](https://codepen.io/miyxdhem-the-solid/pen/vEBdLwM)
|Edie| [Codepen](https://codepen.io/eku10rei/pen/yyBKENa?editors=1010)
|yaoling.liang| [Codepen](https://codepen.io/Yao-Ling-L-/pen/yyBjNWz)|
| Chieh | [Codepen](https://codepen.io/Chieh_/pen/WbeJEym?editors=1000)|
| yun-lin | [Codepen](https://codepen.io/yunlinhsu/pen/QwLVwaQ)|
| jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/dPbgEKO)|
| Chun | [Codepen](https://codepen.io/Chun_debbie/pen/yyBdENd?editors=1010)|
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/OPJJPKW)|
| Jim | [Codepen](https://codepen.io/JimChou/pen/pvzxNJO)|
| 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/PwozoMW)|
| 姜承 | [Codepen](https://codepen.io/Troy0718/pen/EaxLZmK)|
| Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/MYWqREN)|

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