---
tags: 2022 React 新手讀書會
---
# 🏅 課前 Day 2｜ ES6 物件解構與強化
### 物件解構
以前我們要讀取物件裡面的值，都會如下程式碼來取值：
```=JavaScript
const family = {
ming: '小明',
jay: '杰倫',
};
// 一般會這樣寫
const ming = family.ming
const jay = family.jay
```
但藉由 ES6 的`物件解構`語法，下方程式碼也可達到一樣效果，讓程式碼可以更精簡：
```=JavaScript
const family = {
ming: '小明',
jay: '杰倫',
};
// 縮寫版
const { ming, jay } = family
// console.log(ming)
// 小明
// console.log(jay)
// 杰倫
```
**沒有要用到全部屬性，也可以解構其中一個即可**，在 React 上，就很常利用這招，只取出自己要的功能語法來使用。
```=JavaScript
// 縮寫版
const { ming } = family
```
### 物件語法強化
以前我們要將變數代入物件屬性時，得用以下方式設計
```=JavaScript
const bananaPrice = 30;
const bananaNum = 9;
const total = 270;
const group = {
bananaPrice: bananaPrice,
bananaNum: bananaNum,
total: total
}
```
現在 ES6 物件語法強化(Enhanced Object Literal)，可以透過精簡語法，將變數重組為物件，結果也會和上方一樣。
```=JavaScript
const bananaPrice = 30;
const bananaNum = 9;
const total = 270;
const group = {
bananaPrice,
bananaNum,
total
}
console.log(group);
// {"bananaPrice":30,"bananaNum":9,"total":270}
```
以往物件屬性要代入函式，會像是下方語法
```=JavaScript
const obj = {
a:function(num){
return num
},
b:function(){
return "b"
}
}
```
但藉由 ES6 強化語法，可以精簡寫成如下，就不需要再使用 `function` 關鍵字，程式碼會產生一樣的結果
```=JavaScript
const obj = {
a(num){
return num;
},
b(){
return "b"
}
}
```
## 題目一
請優化以下描述六角學院資訊的 JS 寫法，可變更 `hexschool` 物件變數裡面的屬性名稱，讓程式碼可讀性更高
```=JavaScript
const students = 30000;
const schoolName = "六角學院";
const courseList = ["HTML","JS","React"]
const hexschool = {
name: schoolName,
students: students ,
courseAllList: courseList,
sayHello: function(){
return `歡迎加入六角學院！`
},
addStudent: function(){
hexschool.students+=1;
}
}
```
## 題目二
請利用題目一的 `hexschool` 物件變數，使用物件解構語法來優化 `callSchoolDetail` 函式
```=JavaScript
function callSchoolDetail(school){
console.log(`學校名稱為 ${school.name}`);
console.log(`學生數共有 ${school.students}`);
}
callSchoolDetail(hexschool)
```
## 題目三
請透過物件強化語法，在填空處宣告一個 `total` 物件，使用前面的變數，賦予物件屬性與方法。
讓後面的 console.log 可以成立。
```=JavaScript
const a = 1;
const b = 2;
const c = function(){
console.log(`hello`)
}
<!-- 填空處開始 -->
<!-- 填空處結束 -->
console.log(total.a)
// 1
console.log(total.b);
// 2
console.log(total.c())
// hello
```
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
回報區
---
| Discord | CodePen / 答案 |
|:-----------------------:|:----------------------------------------------------------------------------:|
| 陳sam | [CodePen](https://codepen.io/euldpliv/pen/rNdzzdv?editors=1011) |
| kp | [CodePen](https://codepen.io/keep-/pen/GRxvyeo?editors=1111) |
| claire#2116 | [CodePen](https://codepen.io/claire-chang-the-bashful/pen/qBoXpRM) |
| kyle890721#1016 | [CodePen](https://codepen.io/KYLE890721/pen/BardYJm) |
| 楓之聲#6945 | [CodePen](https://codepen.io/sshane258/pen/rNdzddM) |
| 翔 #0859 | [CodePen](https://codepen.io/energy95272z/pen/YzaxLmP) |
| Rice #8043 | [CodePen](https://codepen.io/riecball/pen/LYdjroR?editors=0010) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/ExEvdZz?editors=1011) |
| yunyun#5215 | [CodePen](https://codepen.io/yun_yunni/pen/wvmqYyp) |
| rainbow#3329 | [CodePen](https://codepen.io/g901612002/pen/zYWdmjg?editors=1011) |
| Andrew Wu#5237 | [CodePen](https://codepen.io/Andy2148/pen/QWmMrvK) |
| charlottelee849#0366 | [CodePen](https://codepen.io/charlotte-lee/pen/zYWdmgG?editors=0010) |
| 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/OJvjaXw) |
| Evonne#7078 | [CodePen](https://codepen.io/Hsu1Fang/pen/jOzLQrR) |
| YuZhun#1362 | [CodePen](https://codepen.io/danzhun/pen/QWmMJMX?editors=0111) |
| Ayre#0016 | [CodePen](https://codepen.io/yichunlin09/pen/PoRKxQx?editors=0011) |
| hobby#6565 | [CodePen](https://codepen.io/hobbyling/pen/jOzLQzN) |
| AllenW#1132 | [CodePen](https://codepen.io/AllenW/pen/xxWLQXq?editors=0012) |
| easton#3863 | [Codepen](https://codepen.io/EastonIsCodingNow/pen/LYdjXXe) |
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/WNzEYYe) |
| RON#2813 | [Codepen](https://codepen.io/Ron115/pen/qBoXQGx) |
| ZengZeng#7807 | [Codepen](https://codepen.io/tyzyoko/pen/vYRJQVa) |
| Wu#0167 | [CodePen](https://codepen.io/Xander0705/pen/abYyQeV) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/zYWdyvE) |
| DIANAxAKKO#4298 | [CodePen](https://codepen.io/redfire29/pen/OJvjaGY?editors=1010) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/abYyPNq) |
| Morris#8755 | [Codepen](https://codepen.io/morrisss/pen/dymzwXg?editors=1111) |
| Yukon #2618 | [CodePen](https://codepen.io/ukowork/pen/oNqeJXM) |
| ChloeLo#4858 | [CodePen](https://codepen.io/chloelo/pen/RwMZENv) |
| LEO#7779 | [CodePen](https://codepen.io/nekorice/pen/jOzLXrr) |
| 座標33129#8748 | [CodePen](https://codepen.io/ad80352/pen/oNqeJLP?editors=1111) |
| shoppingq | [CodePen](https://codepen.io/shoppingq/pen/NWYveEd) |
| Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/xxWLmMm) |
| 𝔼.𝕎#4742 | [CodePen](https://codepen.io/kidult316/pen/Bardvza) |
| hiYifang #0736 | [CodePen](https://codepen.io/hiYifang/pen/xxWLyLK) |
| Kimi #2092 | [CodePen](https://codepen.io/a3216lucy/pen/qBoXLLv) |
| Yiling #4054 | [CodePen](https://codepen.io/lin010/pen/ExEvMKK?editors=1011) |
| React-慧茹(拉拉醬)#3414 | [CodePen](https://codepen.io/lala-lee-jobs/pen/NWYvJre?editors=0011) |
| Mr.Sean#3825 | [CodePen](https://codepen.io/sean_1215/pen/KKovENj?editors=1011) |
| 眼睛#0314 | [CodePen](https://codepen.io/thrizzacode/pen/NWYvJam?editors=1111) |
| Yanyan#3555 | [Codepen](https://codepen.io/wei-yi-lee/pen/xxWLBXq) |
| moitw | [Codepen](https://codepen.io/tsuifei/pen/YzaxgWr) |
| Timothy#5863 | [Codepen](https://codepen.io/timothy_hippo/pen/ExEvMdm?editors=0011) |
| SHIN#6075 | [Codepen](https://codepen.io/shin9626/pen/gOexyrN) |
| IreneLee#7932 | [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/OJvjGvy?editors=0010) |
| BEAN#8402 | [Codepen](https://codepen.io/Beanhuang/pen/oNqeOpJ?editors=0011) |
| 史帝夫#5075 | [Codepen](https://codepen.io/TaroPanda/pen/mdxMQBK) |
| Stacy#1442 | [Codepen](https://codepen.io/keebibmh/pen/yLKorwp) |
| Overy#4545 | [Codepen](https://codepen.io/overy-tsai/full/XWEaoGB) |
| Eric Su#7798 | [Codepen](https://codepen.io/wc-su/pen/JjLyqdq) |
| YJ#1839 | [Codepen](https://codepen.io/cshjufxc/pen/ZExJNJm?editors=1010) |
| Robert Lo #9653 | [Codepen](https://codepen.io/Robert-Lo/pen/eYMEXjz?editors=1111) |
| JanllyGuo #0208 | [Codepen](https://codepen.io/kedugaw/pen/ZExJNZN) |
| Nico #8739 | [Codepen](https://codepen.io/Nicof2e/pen/zYWdQgx?editors=0011) |
| Vada Chen #2055 | [Codepen](https://codepen.io/vadachen/pen/GRQVNbZ) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/NWYvZym) |
| Midnightdinner#6220 | [Codepen](https://codepen.io/woowooyong/pen/zYWdVvv) |
| Kunda#2800 | [Codepen](https://codepen.io/kunda0818/pen/MWVEgPL?editors=0110) |
| Li-Ninja#0471 | [Codepen](https://codepen.io/li-ninja/pen/NWYaWGO?editors=1111) |
| Yihan#5560 | [Codepen](https://codepen.io/h513hh513h/pen/PoRJoNe?editors=1011) |
| Stanley#2505 | [Codepen](https://codepen.io/bigbearada/pen/OJvxJza) |
| JarDar#6980 | [Codepen](https://codepen.io/jardarpen/pen/LYdzYej) |
| Wins#8457 | [Codepen](https://codepen.io/winszhuang/pen/oNqGgdm?editors=1112) |
| lloydd#8224 | [Codepen](https://codepen.io/thanatus25/pen/JjLroyB) |
| andersonshen#4675 | [Codepen](https://codepen.io/luxyenni-the-bold/pen/KKoXwEv) |
| peter#0 | [Codepen](https://codepen.io/JIAN-RONG/pen/JjLroee?editors=0011) |
| GL#2256 | [Codepen](https://codepen.io/4genie/pen/NWYaWeQ) |
| Mitour#0672 | [Codepen](https://codepen.io/mitour/pen/RwMLPbP) |
| CofCat#9226 | [Codepen](https://codepen.io/cofcat456/pen/dymVoob) |
| Seijo#1585 | [Codepen](https://codepen.io/SeijoHuang/pen/abYLOoP?editors=0011) |
| JessSong#5050 | [Codepen](https://codepen.io/jssanji03/pen/abYyENY) |
| 小夜#3809 | [Codepen](https://codepen.io/Naito_K/pen/wvmraMJ?editors=0011) |
| anby#7112 | [Codepen](https://codepen.io/andy-ch-bo-an/pen/yLKzNOj?editors=0011) |
| Dylan_Lin#7320 | [Codepen](https://codepen.io/lin-dylan/pen/MWVEgdR?editors=0012)
| Rocker#6235 | [Codepen](https://codepen.io/RockerLi/pen/zYWEGzb)
| emma#3398 | [Codepen](https://codepen.io/itsems/pen/XWEebEQ?editors=1011) |
| AYA | [Codepen](https://codepen.io/NoNameNote/pen/GRxvOLe) |
| 城堡#2126 | [Codepen](https://codepen.io/tthcastle/pen/MWVEwzL?editors=1111)|
| Sylvia-H #0024 | [Codepen](https://codepen.io/Cosmosheart/pen/yLKzYMm) |
| Paper #1658 | [Codepen](https://codepen.io/paper_hsiao/pen/QWmqjGo) |
| 紅豆豆 #0518 | [Codepen](https://codepen.io/zoseqlpc/pen/zYWEvWK?editors=0011) |
| james#1443 | [Codepen](https://codepen.io/clothn0105700/pen/rNdGOWV?editors=0011) |
| 小熊#0685 | [Codepen](https://codepen.io/YuHan0704/pen/rNdGxew?editors=0011) |
| JC#8658 | [Codepen](https://codepen.io/jcsamoyed/pen/QWmqjrX?editors=0011) |
Carolkiki2003#7399 | [Codepen](https://codepen.io/wasfzuig/pen/QWmqyKy)
| Tsuei#9284 | [Codepen](https://codepen.io/AlbertoLL/pen/yLKzeaV?editors=0011) |
| Emily#3648 | [Codepen](https://codepen.io/flien/pen/YzarwQB?editors=0011) |
| Chelly#6129 | [Codepen](https://codepen.io/chellyhsu/pen/Yzaryoj?editors=1011) |
| count1count2#9636 | [Codepen](https://codepen.io/souhakusou/pen/yLKzYWe?editors=0012) |
| Zihur#7755 | [Codepen](https://codepen.io/Zihur/pen/gOeGrdR?editors=0011) |
Evileye#0666 | [Codepen](https://codepen.io/gn-lin/pen/XWEeKxj?editors=0010) |
| ねこ*#9385 | [Codepan](https://codepen.io/kunpao0104/pen/mdxBJow) |
| m_m#5493 | [Codepen](https://codepen.io/minnn7716/pen/jOzGmEL?editors=0010) |
| Bumble幫啵#0255 | [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/VwXMpgO) |
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/eYMGWyb?editors=1112) |
| 露易莎#7673 | [Codepen](https://codepen.io/louisa-lin/pen/wvmrewj?editors=1111) |
| 小班#3324 | [Codepen](https://codepen.io/jlhung168/pen/eYMGWaa) |
| Iris#8462 | [Codepen](https://codepen.io/irissamy/pen/oNqGWmx) |
| 山貓(焜)#7041 | [Codepen](https://codepen.io/nopeta/pen/BarwZzV) |
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/abYLyqG?editors=0011) |
Evachan#5729 | [Codepen](https://codepen.io/Eva-go/pen/gOeGxBO)
Emily Hsi #9066 | [Codepen](https://codepen.io/EmilyHsi/pen/mdxBMod)
| TaoDoris#5230 | [CodePen](https://codepen.io/taomaomao/pen/PoRZPJX) |
| --------------- | -------------------------------------------------------------------- |
| LiuLyn#8458 | [Codepen](https://codepen.io/ouoyy/pen/qBoPPyE) |
| Yin#2493 | [Codepen](https://codepen.io/andy888jam/pen/bGvooKY) |
| 葉秋#2335 | [Codepen](https://codepen.io/as880074/pen/qBoPPeb) |
| SunnyCheng#4113 | [Codepen](https://codepen.io/Sunny0509/pen/vYReWYm?editors=0011) |
| A-Kai#2134 | [Codepen](https://codepen.io/kenneth1002/pen/KKoXyRO?editors=0011) |
| KuoMin#4931 | [Codepen](https://codepen.io/KuoMin/pen/oNqGoWZ?editors=1111) |
| fannnny#7112 | [Codepen](https://codepen.io/fannyHO/pen/poLWazW?editors=0011) |
| Otis#8455 | [Codepen](https://codepen.io/humming74/pen/JjLrpQd?editors=1012) |
| shin#5792 | [Codepen](https://codepen.io/hah1030/pen/MWVEVGW?editors=0012) |
| shin#5792 | [Codepen](https://codepen.io/hah1030/pen/MWVEVGW?editors=0012) |
| Mori#5582 | [Codepen](https://codepen.io/flower9312/pen/eYmJwzQ?editors=0111) |
| Kelvin#3296 | [Codepen](https://codepen.io/kelvinchang/pen/QWmqBGz) |
| Kenge#3690 | [Codepen](https://codepen.io/pgkusn/pen/JjLrBgy) |
| 家洋#6999 | [Codepen](https://codepen.io/aa235553756/pen/BarwOdB) |
| hahaalin#3209 | [Codepen](https://codepen.io/shellyPen/pen/ExEweLQ) |
| yolala#7070 | [Codepen](https://codepen.io/chiakilalala/pen/BarjBqx) |
| hw#0715 | [Codepen](https://codepen.io/Lhwei/pen/dymVEYE) |
| east#4003 | [Codepen](https://codepen.io/EastM/pen/BarwgqG?editors=0010) |
| L0F0#8733 | [Codepen](https://codepen.io/l0f0/pen/poLWXZM?editors=0011) |
| Double C#7388 | [Codepen](https://codepen.io/Double-C/pen/KKoXjOK) |
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/dymVBJW) |
| kevinhes#2881 | [codepen](https://codepen.io/kevinhes/pen/KKoXOJa?editors=0012) |
| alphatero#8299 | [Codepen](https://codepen.io/alphatero/pen/QWmOLWp) |
| yoshidc#0455 | [Codepen](https://codepen.io/yoshiyyc/pen/rNdYNvV) |
| Vivi0225#3634 | [Codepen](https://codepen.io/vivian820225/pen/BarmyLe) |
| wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/ZExaQoK) |
| 灰塵貓#7994 | [Codepen](https://codepen.io/rjk66268/pen/mdxqEyW?editors=1011) |
| 阿暟 | [Codepen](https://codepen.io/charlotte-lee/pen/zYWdmgG?editors=0011) |
| bakiii | [codepen](https://codepen.io/aki168/pen/gOeXwpQ) |
| Pandaa#7740 | [Codepen](https://codepen.io/pandaachu/pen/VwXMJpp) |
| HedgehogKU#1182 | [CodePen](https://codepen.io/hedgehogkucc/pen/xxWPXLM?editors=0012) |
| IceSam#7836 | [CodePen](https://codepen.io/sam-hsu/pen/bGvYozo) |
| Alex Liao#8538 | [CodePen](https://codepen.io/alex0207s/pen/YzaEYXa) |
| zzly#9134 | [CodePen](https://codepen.io/ly00/pen/zYWPpZZ) |JimmyChang#5558 | [CodePen](https://codepen.io/JimmyChangWenChi/pen/oNqoEvJ)
|wenyun#2362 | [CodePen](https://codepen.io/wenyuncc/pen/yLKPpZg?editors=0011) |
|hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/mdxqLLv?editors=0010) |
|niel#2413 | [CodePen](https://codepen.io/danielhsu/pen/xxWPJoR?editors=0010) |
|crowley#7180|[CodePen](https://codepen.io/pon88/pen/eYMeOzr?editors=0011) |
|魚魚#1220|[CodePen](https://codepen.io/vkkkmkbv-the-selector/pen/oNqoaON) |
|Susie(軒)#6181|[CodePen](https://codepen.io/Codeleaf/pen/XWEzyqW) |
|Neuf|[CodePen](https://codepen.io/yifanneuf/pen/BarmMKo?editors=0011)|
|喬喬#2824|[CodePen](https://codepen.io/joanne-wei/pen/JjLOxMx?editors=0011)|
|Hannah|[CodePen](https://codepen.io/zhanmes/pen/xxWpKPQ?editors=0110)|
k.sin|[CodePen](https://codepen.io/sin588/pen/rNdYEYX?editors=0011)|
TedWang#7721|[CodePen](https://codepen.io/wangtaiyan/pen/PoREYyG?editors=0011)|
無名#6427|[CodePen](https://codepen.io/Nomoney/pen/KKoZPxy?editors=0012)|
|布魯布魯#6177|[CodePen](https://codepen.io/akai-huang/pen/gOeXzJV?editors=0011)|
Neal#0665|[CodePen](https://codepen.io/neallkf/pen/QWmaWbm?editors=0012)|
葉岱穎 DEBBYYEH#4696|[CodePen](https://codepen.io/bhliyoup/pen/VwXyYdB?editors=0011)|
Renren #8437|[CodePen](https://codepen.io/ehren-chen/pen/abYEzjL?editors=0011)|
YiWun #0953|[CodePen](https://codepen.io/kagamiakira_IBUN/pen/xxWpGBe?editors=0010)|
Tuhacrt #0008|[CodePen](https://codepen.io/Tuhacrt/pen/KKoZdGJ)|
yuyu#6310|[CodePen](https://codepen.io/yuyu0905/pen/JjLMXOw?editors=0011)|
JimHwang#3594|[CodePen](https://codepen.io/jimh1129/pen/eYMygpQ?editors=1111)|
huch09#1426|[CodePen](https://codepen.io/subarashii-huch09/pen/rNdpjLP?editors=0010)|
| Zoe | [CodePen](https://codepen.io/Zoechiueh/pen/dymJNNG?editors=0011) |
| ----------------- | ------------------------------------------------------------------------------------------------------------ |
| Wendy Chang | [Codepen](https://codepen.io/Zhangbun/pen/abYVoLM) |
| Ada_Su | [Codepen](https://codepen.io/zggsoagv-the-scripter/pen/poLpPbe) |
| Murmurline#6969 | [Codepen](https://codepen.io/murmurline/pen/yLKpNaX) |
| lingxuan | [Codepen](https://codepen.io/lingxuan0618/pen/gOeoxPK?editors=1111) |
| bonnieli1414#4906 | [Codepen](https://codepen.io/bonnieli1414/pen/zYWpEGP?editors=0011) |
| EvaLin#4546 | [Codepen](https://codepen.io/evalin0316/pen/jOzaxPg?editors=1111) |
| Rose Wu#1669 | [Codepen](https://codepen.io/Rose-Wu/pen/dymJaKL) |
| leoneboy#0851 | [Codepen](https://codepen.io/Leoneboy/pen/abYEoPM?editors=0012) |
| Rikku#1756 | [Codepen](https://codepen.io/rikkubook/pen/QWmaRWj?editors=0010) |
| Margo#7139 | [Codepen](https://codepen.io/ssuchen_lee/pen/QWmaRKN?editors=0011) |
| 真．穎旻粉撕#4995 | [Codepen](https://codepen.io/gbnbihif/pen/abYEgzX?editors=0011) |
| POKA#2168 | [Codepen](https://codepen.io/pen/?editors=0011) |
| Judy☻ | [Codepen](https://codepen.io/hsiaohan/pen/NWYXVEd?editors=0011) |
| Justin☻ | [Codepen](Codepen]https://codepen.io/just-perfect/pen/ZExvNwx?editors=1010) |
| Josh DB #3366 | [Codepen](https://codesandbox.io/s/ke-qian-day-2-es6-wu-jian-jie-gou-yu-qiang-hua-oj0pr2?file=/src/index.js) |
| Anson #3594 | [Codepen](https://codepen.io/huanmingchang/pen/vYRgeOj?editors=1012) |
| 鉛筆 #7763 | [Codepen](https://codepen.io/zoeguava/pen/MWVQOMx?editors=0012) |
| Amy芸 #6575 | [Codepen](https://codepen.io/crazzyamy/pen/VwXQyXr) |
| Carol Li #2269 | [Codepen](https://codepen.io/carolli834/pen/VwXQXyv?editors=0010) |
| Shani #4593 | [Codepen](https://codepen.io/ShaniMa/pen/XWEVBLJ) |
| 彼得#1923 | [Codepen](https://codepen.io/shiou-ho/pen/MWVQLGm) |
| 龜人#7299 | [Codepen](https://codepen.io/dullshen/pen/ZExrvMb) |
| RayRayHuang#1998 | [Codepen](https://codepen.io/hongrueihuang/pen/RwMMggN) |
| Shau#6400 | [Codepen](https://codepen.io/shau-chen/pen/XWEEgLQ) |
| JasonLu#7313 | [Codepen](https://codepen.io/wnptocip/pen/rNddzWE) |
| HsuMing#6772 | [CodePen](https://codepen.io/hsu860112/pen/ExEEwOo) |
| MarsKuo#6015 | [CodePen](https://codepen.io/MarsKuo/pen/YzaaEPb) |
| 逸川#6319 | [CodePen]([/fw08hnZJSSGky3N1Xal_fQ](https://codepen.io/bryanlin8911/pen/bGvvjbE)) |
| Terencedev | [CodePen](https://codepen.io/terencedev/pen/vYRRVgr) |
| kir4che#7701 | [CodePen](https://codepen.io/kir4che/pen/zYWWyEY) |
| 蘇蘇#0426 | [CodePen](https://codepen.io/sabine1123/pen/YzaLPrN) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/WNzMVzP) |
| NinaKuo#3332 | [CodePen](https://codepen.io/ninakuo0814/pen/KKoRpyp) |
| SleepWalk#1635 | [CodePen](https://codepen.io/arthurliinn/pen/yLKKZgY) |
| 許揚民Evan#4546 | [CodePen](https://codepen.io/gitevanhsu/pen/vYRjzdy?editors=0011) |
| 好愛睏 | [Codepan](https://codepen.io/wei-nie/pen/gOeKMBb?editors=0011) |
| Louise | [Codepan](https://codepen.io/LouiseHuang/pen/JjLZNrE) |
| yaru#6308 | [Codepan](https://codepen.io/lszaietc/pen/JjLyQzO) |
|toshow#5609 |[CodePen](https://codepen.io/toshow/pen/KKoeJaE)|
|qing#7665 |[CodePen](https://codepen.io/cellur/pen/jOzKoZR?editors=0011)|
|CookieSSS#6991 |[CodePen](https://codepen.io/sqhjikpa-the-selector/pen/KKoejvz?editors=0012)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/rNdrpZQ?editors=1112)
|frank#5177|[Codepen](https://codepen.io/Frankhu5150/pen/rNdZdjx?editors=0011)|
|Cherry ZY#4647|[Codepen](https://codepen.io/qoosdd89382/pen/NWYLQLb)|
| 雪莉#4827 |[Codepen](https://codepen.io/utshang216/pen/xxWyKyb?editors=1111)|
| hsiuhsiu #7412 |[Codepen](https://codepen.io/hsiuhsiu/pen/RwMeZyz?editors=0012)|
| eching#9183 |[Codepen](https://codepen.io/echin/pen/YzaRGgg?editors=0011)|
| helen #1041 |[Codepen](https://codepen.io/Tian-Lin/pen/eYMQbrv )|
| kancheng#3915 |[Codepen](https://codepen.io/kancheng/pen/jOzQJdR )|
| ninipopo#7983 |[Codepen](https://codepen.io/Robinnini/pen/mdxaJqy?editors=1111)|
| SleepWalk#1635 |[Codepen](https://codepen.io/arthurliinn/pen/MWVLGgR?editors=0012)|
| Eileen#6454 |[Codepen](https://codepen.io/Eileen-io/pen/WNzPBbe)|
| karakamin#3416 |[Codepen](https://codepen.io/karakamin/pen/mdxvYYb)|
| beta lin#1445 |[Codepen](https://codepen.io/linbeta/pen/QWmRozG)|
雅帆 |[Codepen](https://codepen.io/yafanchung/pen/xxjEbBN?editors=0011)|
Amy |[Codepen](https://codepen.io/crazzyamy/pen/rNRXmaO?editors=0012)
| Eshiunm | [Codepen](https://codepen.io/Code-My/pen/WNWZpdB)
Sign in with Wallet
Connect another wallet