:::spoiler 目錄
[TOC]
:::
<hr>

:::success
【[題目連結](https://hackmd.io/qqCWpYimSsawvIu9VqN4tw)】

<!-- 【檢核】
- [x] 參與人數: 8人
- [x] 參與名單
- [x] 任務內容
- [x] 討論截圖 -->

:::

## 參與人員
- [x] 阿榮#8277
- [ ] PayRoom#8328
- [x] WA#9787
- [x] Tina02
- [x] AYA
- [x] I401#7101
- [x] abalun#6727
- [x] jia yu#8896
- [ ] 無敵笨笨貓#3628
- [x] 貓咪#6294

## 任務一：請每個小組討論成員，試著載入 BS5 ，並作出 modal 效果
請使用 codepen 來練習，回報也可用 codepen
如果有成員想用 GitHub Pages 來放到自己的環境練習也可以

### ✅任務完成

| # | 組員 | 連結 |
|:-:|:----:|:--------:|
| 01 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/zYMbyXz) |
| 02 |PayRoom |[CodePen](https://codepen.io/water38198/pen/mdQooxW)
| 03 |jia yu |[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/wvQOZXZ) |
| 04 |WA | [Codepen](https://codepen.io/ldddl/pen/BaGbMmo)|
| 05 |abalun | |
| 06 |Tina | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/WNYmqKy) |
| 07 |阿榮 |[GitHub Pages](https://peg-l.github.io/week5-dashboard/admin.html) <br> 以及 [Github Repo](https://github.com/Peg-L/week5-dashboard)|
| 08 |PayRoom | |
| 09 | 無敵笨笨貓| |
| 10 | 貓咪 | |

## 任務二：討論 HTML 裡的表格標籤(table、th、tr、td)的用法，請試著做出設計稿裡面的表格設計，並提供 codepen 來檢視

### ✅任務完成

| # | 組員 | 連結 |
|:-:|:----:|:--------:|
| 01 | AYA | |
| 02 |PayRoom |[CodePen](https://codepen.io/water38198/pen/mdQooxW)|
| 03 |jia yu |[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/MWzxRzy?editors=1100) |
| 04 |WA |[Github Pages](https://ldddl.github.io/adminTemplate/)|
| 05 |abalun | |
| 06 |Tina | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/MWzRjmg) |
| 07 |阿榮 |[GitHub Pages](https://peg-l.github.io/week5-dashboard/admin.html) 以及 [Github Repo](https://github.com/Peg-L/week5-dashboard)|
| 08 |PayRoom | |
| 09 | 無敵笨笨貓| |
| 10 | 貓咪 | |

## 任務三：討論第五週版型該怎麼做
一個人能力有限，八個人團結力量大，彼此討論該版型如何攻略，才能發揮團隊最強力量，攻破最終 BOSS

### 1. 任務一重點
* 載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/download/#cdn-via-jsdelivr)
* 複製 CDN 貼到codepen html的head區塊，css、js都要，modal會用到js (如下圖)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

* 放好BS5 CDN後可以小小測試一下，選擇[按鈕測試](https://bootstrap5.hexschool.com/docs/5.1/components/buttons/#examples) 點程式碼區塊右上方的"copy"，再貼到codepen上
* 順便用container看有沒有格線系統，有這些樣式就表示有載入成功
* 接著到 [modal](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#static-backdrop) 複製程式碼貼上codepen
* 可以加上 modal 內的[滾動長內容](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#scrolling-long-content)
(透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。)

### 2. 第五週任務 material icons 關鍵字統整

| 類別 | icon | 關鍵字 |
| ---------- | ----------- | -------------------------------------- |
| 側欄 | dashboard | insert_chart |
| | question | forum |
| | assignment | assignment |
| | course | video_library |
| | admin | group |
| | settings | settings |
| navbar | 搜尋 | search |
| | 小鈴鐺 | notifications_active |
| assignment | ID 向下箭頭 | arrow_downward <br> arrow_downward_alt |
| | 眼睛 | visibility |
| | 編輯 | edit |
| | 迴紋針 | attach_file |
| | 星星 | star |
| | 箭頭下一個 | navigate_next |
| | 箭頭上一個 | navigate_before |
|modal|圓形打勾| check_circle|
||三角形警告| warning|

### 3. 手刻-container?
後台設計稿可以使用 Bootstrap container，設定 variables 檔案中的變數

### 4. 注意按鈕間距

### 5. 裁切多餘文字
- 會自動把超過單行的文字，用 `...` 呈現


  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

### 6. ejs 寫 sidebar
左邊側欄的部分，我建立了一個 sidebar.ejs，但 sidebar 要依據目前是在哪個頁面做變化，相對應的按鈕要變成綠色 + 綠色左 border，例如：在 admin 頁面， admin 會變綠色並加上 border。

* ejs 引入方式，後面多傳入一個 **物件**
告訴它這個是 admin 頁面
admin.html
`<%- include('./layout/sidebar', {page: "admin"}); -%>`

* 另外，在 class 加入判斷式，如果 page 是 admin，就加上 text-primary border-start.....，不是 admin 就加上 text-gray-900
`<%= page === 'admin' ? 'text-primary border-start border-4 border-primary' : 'text-gray-900' %>`

sidebar.ejs 完整段落

<li class="mb-4">
  <a class="fs-4 py-1 fw-bold px-8 <%= page === 'admin' ? 'text-primary border-start border-4 border-primary' : 'text-gray-900' %>" href="./admin.html">
    <span class="material-symbols-outlined me-3 align-middle py-1"> group </span>Admin
  </a>
</li>

* assignment 的也是一樣做法，把 admin 改成 assignment
因為設計稿只有用到這兩個頁面，我就只在這兩個 a 加判斷式，不然其他的 class 其實也要加
* 判斷式是使用 [**三元運算子**](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator) 的概念
* navbar 也可以運用類似的方法來寫判斷，要放 add new admin 還是 all courses 的按鈕

## 其他討論
[網站](https://www.kadokado.com.tw/)的標籤區要怎麼左右移動

overflow-x: scroll;

.category::-webkit-scrollbar {
    display: none;
}

## 語音 & 文字討論截圖

> 【討論時間】： [time=Sun, Aug 06, 2023 20:00 PM]



{%hackmd RAtn1iEBRO2tCbZeA-NylQ %}