---
# System prepended metadata

title: "\U0001F3C5 課前 Day 2｜ ES6 物件解構與強化"
tags: [2022 React 新手讀書會]

---

---
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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)



回報區
---


|         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)