---
# System prepended metadata

title: 破冰任務 - node直播班 北6組
tags: [node直播班 - 2023 北6組]

---

---
tags: node直播班 - 2023 北6組
---
# 破冰任務 - node直播班 北6組
> 討論日期及時間 > 2023/02/26 20:00-21:30
> 
**組員參與名單(06 / 6)：**
- [x] Ellson#8776
- [x] HuIsNext#1670
- [x] jason.liu#6876
- [x] pamiya#7070
- [x] vivian 57#1279
- [x] 灰塵貓#7994


## 任務挑戰一：小組自我介紹


答：

| Name | 留言截圖 
| -------- | -------- 
| Ellson#8776|![](https://i.imgur.com/yMfJ9OW.png)|
| HuIsNext#1670 | ![](https://i.imgur.com/dj9A55o.png)|
| jason.liu#6876 |![](https://i.imgur.com/tF3dEXk.png)| 
|pamiya#7070 |![](https://i.imgur.com/63qM1rY.png)| 
| vivian 57#1279|  ![](https://i.imgur.com/qN06to7.png)|
| 灰塵貓#7994 | ![](https://i.imgur.com/p2ET5mU.png)
| 




## 任務挑戰二：AI 生成式圖像訓練

:::info
- :speaker: **詠唱語法如下:**

There are six penguins with different attributes and professions: a warrior, a female mage, a fairy, an archer, a demon hunter, and a dragon knight. At sunset, they stand handsome and brave on the battlefield, ready to venture to the demon king's castle to rescue the princess.
:::

圖片如下：
![](https://i.imgur.com/nmy82yu.jpg)


## 任務挑戰三：ChatGPT AI 程式題詠唱訓練
### 題目一 : 用 chatGPT 解答10 道 if+function 題目


:::info
- #### **第一題**:一週有七天，請製作一個函式可輸入不同的星期日數，並回傳當天的心情小語，
 ![](https://i.imgur.com/vFEvrtJ.png)

- #### **第二題**:**飲酒測試**

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

- #### **第三題**:**發燒檢測**
![](https://i.imgur.com/G0NFSTk.png)

- #### **第四題**:**溫標轉換**
![](https://i.imgur.com/xURnLw0.png)
![](https://i.imgur.com/4y1dMw1.png)

- #### **第五題**:**餵食青蛙**
![](https://i.imgur.com/df7RYsz.png)
![](https://i.imgur.com/NS9YETE.png)



- #### **第六題**:**計算球體體積**
![](https://i.imgur.com/i885atN.png)
![](https://i.imgur.com/pNvNMYj.png)


- #### **第七題**:**BMI 計算**
BMI 稱為身體質量指數（Body Mass Index，縮寫為BMI），是目前美國疾病管制局及世界衛生組織所認可，利用身高為基礎來測量體重是否符合標準。請套用以下公式製作一個 BMI 計算函式。
![](https://i.imgur.com/p9I2D2a.png)

![](https://i.imgur.com/ufZ4DFm.png)
![](https://i.imgur.com/Azrm5rU.png)
![](https://i.imgur.com/GS0vCZc.png)


- ####  **第八題**:**斜邊計算**
直角三角形的斜邊長度公式為：x² + y² = z²，請製作一個輸入兩邊邊長並回傳四捨五入取至小數第一位斜邊的函式。
![](https://i.imgur.com/6oSo6FK.png)


- #### **第九題**
    
![](https://i.imgur.com/NEJwhm1.png)

- #### **第十題**
![](https://i.imgur.com/7rd7LWt.jpg)

:::

### 題目二 : 用 chatGPT 詠唱以下 Bootstrap 5 文件的募資網站

:::info
- **:bulb:[Codecpen Link](https://codepen.io/yu-hung-yi/pen/JjabXzR)**


![](https://i.imgur.com/VQoFuRn.png)
  - :speaker: **詠唱語法如下:**

你現在是一個資深的前端工程師，請從cdn載入不帶有integrity的Boostrap 5.0.0及Font Awesome 6.3.0，然後用boostrap 5的技術製作一個網站

`<body>`是個有顏色色號為#f8f9f的背景，裡再用container包住一行.row，.row裡面有2列，分別為.col-lg-7及.col-lg-5，

在.col-lg-7裡面`<h1>`及`<img>`的標籤
`<h1>`內容為拍出會動的照片|LivePhotos魔法拍立得，
`<img>`的標籤則插入`https://hexschool.github.io/boootstrap5WebLayout/assets/produt_image.jpg`這張圖片，同時加上.img-fluid類

在.col-lg-5裡面放入6個類.row。每個.row都20px的間距
- 第一個類.row請放入`<p>`、`<h2>`的標籤及進度條，`<p>`內容為目標$600,000，同時加上.text-secondary類，`<h2>`的內容為$280,047同時加上.fw-bold 及.mb-3的類，而進度條為黃色的41%
- 第二個類.row請放入二個col-6，第一個col-6裡面放入內容為贊助人數及類為text-secondary的`<p>`標籤及內容為1374 人及類為fw-bold的`<h2>`標籤，第二個col-6裡面則放入內容募資倒數及類為text-secondary的`<p>`標籤及內容為27天`<h2>`標籤
- 第三個類.row請放一個.col，在.col裡直接放入4個`<img>`標籤且類為.me-2的圖片，圖片內容分別為`https://hexschool.github.io/boootstrap5WebLayout/assets/icon_good01.svg、https://hexschool.github.io/boootstrap5WebLayout/assets/icon_good02.svg、https://hexschool.github.io/boootstrap5WebLayout/assets/icon_good03.svg、https://hexschool.github.io/boootstrap5WebLayout/assets/icon_good04.svg`
- 第四個類.row背景色號為#fff，樣式是左邊border為橘黃色，裡面放一個quote且上下有5px的間距，quoute裡面放二行`<p>`標籤且字體顏色為深灰色的的內容，第一行內容為募專案募資中!第二行內容為在2021/6/14 23:59募資結束前，您都可以贊助我們!
- 第五個類.row則放入一個按鈕，按鈕樣式為黃色半透明而且有50%圓角，按鈕寬度為100%，按鈕裡的內容為"贊助專案"的灰色文字
- 第六類.row請放入二個col-6，二個col-6都放入2個邊框及字體為灰色的按鈕，按鈕寬度為100%，第一個按鈕的文字為"追蹤專案"且文字左邊有個灰色的愛心icon，第二個按鈕的文字為"分享"且文字左邊有個灰色的分享icon
:::

### 題目三 : 嘗試用 chatGPT 寫出 todolist API，並一樣需載入 uuid NPM 套件，並寫出各 API
:::info
- :speaker: **詠唱語法如下:**

你是一個資深的後端工程師，請幫我用nodejs寫出todolit的API，並且程式碼裡所放的變數id為uuid的npm套件
:::
```javascript=
// chatgtp 回覆如下程式碼
const express = require('express');
const { v4: uuidv4 } = require('uuid'); // 引用uuid套件
const app = express();

// 設定中介軟體解析JSON請求主體
app.use(express.json());

// 建立一個空的todolist陣列
let todos = [];

// 取得todolist的API路由
app.get('/api/todos', (req, res) => {
  res.json(todos);
});

// 新增todo的API路由
app.post('/api/todos', (req, res) => {
  const { task } = req.body;
  const id = uuidv4(); // 使用uuid產生唯一的id
  const newTodo = { id, task, completed: false };
  todos.push(newTodo);
  res.json(newTodo);
});

// 更新todo完成狀態的API路由
app.patch('/api/todos/:id', (req, res) => {
  const { id } = req.params;
  const todo = todos.find((todo) => todo.id === id);
  if (!todo) {
    return res.sendStatus(404);
  }
  todo.completed = true;
  res.json(todo);
});

// 刪除todo的API路由
app.delete('/api/todos/:id', (req, res) => {
  const { id } = req.params;
  const index = todos.findIndex((todo) => todo.id === id);
  if (index === -1) {
    return res.sendStatus(404);
  }
  todos.splice(index, 1);
  res.sendStatus(204);
});

// 啟動伺服器
app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

// 這個API包含四個路由：

//     取得所有的todolist，路由為 /api/todos，使用 HTTP GET 方法。
//     新增一個todo，路由為 /api/todos，使用 HTTP POST 方法。
//     更新一個todo的完成狀態，路由為 /api/todos/:id，使用 HTTP PATCH 方法。
//     刪除一個todo，路由為 /api/todos/:id，使用 HTTP DELETE 方法。

// 這個API使用了uuid npm套件來產生唯一的id，可以避免id重複的問題。

```


## 討論紀錄




## 任務挑戰四：專題討論

目前是：活動訂票服務

| 主題參考網站 | 備註 | 
| -------- | -------- 
|[KKTIX](https://www.klook.com/zh-TW/)  | Ellson
|[ibon](https://ticket.ibon.com.tw/) | 灰塵貓
|[accupass](https://www.accupass.com/?area=north) | 灰塵貓
|[go票亮](https://tixinn.com/) | pamiya

## 討論紀錄
![](https://i.imgur.com/xHFRc1P.png)
![](https://i.imgur.com/U1kCAol.png)

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



---


> 謝謝今天有參與的同學們 :100: 
> 
<iframe src="https://giphy.com/embed/Dh5q0sShxgp13DwrvG" width="480" height="296" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/scaler-official-dogs-computer-typing-Dh5q0sShxgp13DwrvG">via GIPHY</a></p>
