# 隨堂測驗
請根據下面題目來完成測驗

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/OJKwgQa)，並且完成以下條件：

題目一：請透過 JSX 的方式，將 products 中的兩筆資料，渲染到畫面上。

題目二：當點擊「調整價格」按鈕的時候，將 products 中第二筆的 price 價格調整為 750。

題目三：請利用 style 的方式，將產品名稱的字體顏色改為 color: red。

題目四：當點擊「更換名稱」按鈕的時候，將 products 中的所有 title 替換成 input 的值。

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

<!-- 解答：
const handlePriceChange = () => {
setProducts((prevProducts) => {
const newProducts = [...prevProducts];
newProducts[1] = { ...newProducts[1], price: 750 };
return newProducts;
});
};

const handleTitleChange = () => {
const newTitle = document.getElementById("text").value;
setProducts((prevProducts) =>
prevProducts.map((product) => ({ ...product, title: newTitle }))
);
};

return (
<div>
{products.map((product) => (
<div className="card mb-3" key={product.id}>
<img src={product.imageUrl} className="card-img-top primary-image" alt="主圖" />
<div className="card-body">
<h5 className="card-title" style={{ color: "red" }}>
{product.title}
<span className="badge bg-primary ms-2">{product.category}</span>
</h5>
<p className="card-text">商品描述：{product.description}</p>
<p className="card-text">商品內容：{product.content}</p>
<div className="d-flex">
<p className="card-text text-secondary">
<del>{product.origin_price}</del>
</p>
&nbsp;元 / {product.price} 元
</div>
</div>
</div>
))}
<button className="btn btn-primary mb-5" onClick={handlePriceChange}>
調整價格
</button>

<div className="d-flex">
<input type="text" className="w-25" id="text" />
<button className="btn btn-primary" onClick={handleTitleChange}>
更換名稱
</button>
</div>
</div>
);
-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:-----------------------------------------------------------------------------|
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/jENLjwP?editors=1111) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/QwLrxEw?editors=1011) |
| 3 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/yyBjwjj) |
| 4 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/PwYeLXp) |
| 5 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/MYgGxqq) |
| 6 | 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/XJrqQrw?editors=1111)|
| 7 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/dPbeLoX) |
| 8 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/dPbeLNO?editors=1011) |
| 9 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/qEWYwZb?editors=1011) |
| 10 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/qEWYwPa) |
| 11 | han | [Codepen](https://codepen.io/iamHanCheng/pen/azoGMar) |
|12|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/jENxRWv?editors=1011)|
|13|Johnson|[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/PwYegVd)|
| 14 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/JoPvqPJ) |
| 15 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/QwLrRYE) |
| 16 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/dPbeEVj?editors=0011) |
| 17 | Toung | [Codepen](https://codepen.io/Toung/pen/KwPRjyZ) |
| 18 | Clove | [Codepen](https://codesandbox.io/p/sandbox/qn523f) |
| 19 | Amanda | [Codepen](https://codepen.io/cym199922/pen/zxOjXeB) |
| 20 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/ogvdOrG) |
| 21 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/MYgGNQM?editors=1111) |
| 22 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/azoKVwR) |
| 23 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/GgKGLpN) |
| 24 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/VYZBxZZ?editors=1010) |
| 25 | Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/YPKOEqj?editors=0010) |
| 26 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/yyBxpxx?editors=0010) |
| 27 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/RNbeper?editors=1010) |
| 28 | kun._c8_shake_it | [Codepen](https://codepen.io/barry91205/pen/pvoJdPq) |
| 29 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/emYZwpG) |
| 30 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/RNwGVaZ?editors=1011) |
| 31 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/JojNJpK) |
| 32 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/gbORxXB?editors=0011) |
| 33 | 姜承 | [Codepen](https://chatgpt.com/c/67e3ef0a-fe0c-800e-a81b-a7a89297c1c9) |
| 34 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/KwwBaeV?editors=0011) |
| 35 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/OPVqaVg) |
| 36 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/MYKygRd) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |