---
# System prepended metadata

title: "\U0001F3C5 Day 3｜React Hook - useState"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 Day 3｜React Hook - useState
今日我們要進入 React Hook，並嘗試用 useState 這個 Hook 來做出改變狀態值的練習。
### React Hook
Hook 其實就是 JavaScript function，但要特別注意兩個使用的規則：
1. 只在最上層呼叫 Hook，不要在迴圈、條件式或是巢狀的 function 內呼叫 Hook（[詳細解說](https://zh-hant.reactjs.org/docs/hooks-rules.html#explanation)）
2. 只在 React Function 中呼叫 Hook，例如：在 React function component 中呼叫 Hook。

今日的練習我們會著重在規則二，也就是練習『在 React function component 中呼叫 Hook』。

### React function component
```jsx=
function Example() {
    // 在這邊使用 Hook
  return (
    // 在這邊加入 Template，例如：
    <p>Hello</p>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Example />);
```
### useState
useState 是被用來加入一些基礎的變數狀態。useState 會回傳一組數值：目前 state 數值和一個可以更新 state 的方法，寫法如下：
```jsx=
const [count, setCount] = React.useState(0);
```
透過 setCount 方法可以改變 count 的值
```jsx=
setCount(count + 1)
```

### 補充：JSX 的事件綁定
在 JSX 中，事件綁定是以小駝峰的方式命名（camelCase），因此 onclick 事件即為 onClick、onchange 事件為 onChange。
```jsx=
<button onClick={() => {}}> 按鈕 </button>
```


[參考：Hook 的規則](https://zh-hant.reactjs.org/docs/hooks-rules.html)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/VwXYKZY)，並撰寫內容，完成以下畫面：

![](https://i.imgur.com/H0Nczyx.gif)


## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
function Example() {
  // 宣告一個新的 state 變數，我們叫他「count」
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>現在的數字是 {count} </p>
      <button onClick={() => setCount(count + 1)}>
        加一
      </button>
      <button onClick={() => setCount(count - 1)}>
        減一
      </button>
    </div>
  );
}
```
-->


回報區
---


| Discord                 | CodePen / 答案                                                               |
|:----------------------- |:---------------------------------------------------------------------------- |
| Rice#8043               | [Codepen](https://codepen.io/riecball/pen/LYdjxLz?editors=1010)              |
| Joechiboo#3960          | [Codepen](https://codepen.io/joe-chiboo/pen/VwXQVeo)                         |
| yunyun#5215             | [Codepen](https://codepen.io/yun_yunni/pen/vYRdQxO)                          |
| DIANAxAKKO#4298         | [Codepen](https://codepen.io/redfire29/pen/GRxQwQj?editors=1010)             |
| 布魯諾#7239             | [Codepen](https://codepen.io/bruno-yu/pen/rNdJQmq)                           |
| LEO#7779                | [Codepen](https://codepen.io/nekorice/pen/oNqEQZK)                           |
| 魚魚#0937               | [Codepen](https://codepen.io/fish0522/pen/KKoQrWZ)                           |
| AllenW#1132             | [Codepen](https://codepen.io/AllenW/pen/LYdQXBE?editors=1011)                |
| HedgehogKU              | [CodePen](https://codepen.io/hedgehogkucc/pen/KKoQrrB?editors=1010)          |
| 棒腿#9350               | [Codepen](https://codepen.io/frankHsu/pen/LYdQXMV)                           |
| JarDar#6980             | [codepen](https://codepen.io/jardarpen/pen/oNqEQVb)                          |
| Carolkiki2003#7399      | [codepen](https://codepen.io/wasfzuig/pen/gOevQyR)                           |
| wiimax#4564             | [Codepen](https://codepen.io/willismax/pen/RwMQqmK)                          |
| 黃士桓#7654             | [codePen](https://codepen.io/shr-huan-huang/pen/jOzZQjv)                     |
| Evonne#7078             | [codePen](https://codepen.io/Hsu1Fang/pen/gOevQJR?editors=1011)              |
| Yukon#2618              | [codePen](https://codepen.io/ukowork/pen/abYqQMo)                            |
| m_m#5493                | [Codepen](https://codepen.io/minnn7716/pen/qBoxLZZ)                          |
| Kimi#2092               | [Codepen](https://codepen.io/a3216lucy/pen/rNdJoOX)                          |
| Eric Su#7798            | [Codepen](https://codepen.io/wc-su/pen/GRxQPJv)                              |
| Kelvin#3296             | [Codepen](https://codepen.io/kelvinchang/pen/vYRdvGm)                        |
| 葉秋#2335               | [Codepen](https://codepen.io/as880074/pen/LYdQMGZ)                           |
| Ayre#0016               | [Codepen](https://codepen.io/yichunlin09/pen/BarYvLx?editors=0010)           |
| L0F0#8733               | [Codepen](https://codepen.io/l0f0/pen/ExEQGWV?editors=0010)                  |
| Kenge#3690              | [Codepen](https://codepen.io/pgkusn/pen/VwXQqWW)                             |
| 小熊#0685               | [Codepen](https://codepen.io/YuHan0704/pen/yLKvGJr?editors=1010)             |
| kevinhes#2881           | [CodePen](https://codepen.io/kevinhes/pen/qBoxLxR?editors=0010)              |
| Mickey Hsu #9693        | [CodePen](https://codepen.io/kikmiao1995/pen/jOzZXzo)                        |
| 連小艾#0791             | [Codepen](https://codepen.io/bolaslien/pen/abYqPRB?editors=0010)             |
| Iris#8462               | [Codepen](https://codepen.io/irissamy/pen/ExEQGoK)                           |
| aki                     | [codepen](https://codepen.io/aki168/pen/qBoxLor)                             |
| YenYing#4029            | [Codepen](https://codepen.io/yenying0804/pen/mdxXapX?editors=1010)           |
| niel#2413               | [Codepen](https://codepen.io/danielhsu/pen/jOzZXpj)                          |
| Paper#1658              | [Codepen](https://codepen.io/paper_hsiao/pen/MWVQZzY)                        |
| 威爾#1694               | [CodePen](https://codepen.io/WILL_Wu/pen/NWYyeJV)                            |
| Ada                     | [CodePen](https://codepen.io/zggsoagv-the-scripter/pen/eYMVbMN)              |
| wenyun#2362             | [CodePen](https://codepen.io/wenyuncc/pen/JjLpwwN)                           |
| Bumble幫啵#0255         | [CodePen](https://codepen.io/lmpzezvw-the-lessful/pen/mdxXaYj)               |
| christina#6185          | [Codepen](https://codepen.io/chrisc0210/pen/QWmQzao)                         |
| 時雨#8837               | [Codepen](https://codepen.io/jjustin-35/pen/yLKvZye)                         |
| SHIN#6075               | [Codepen](https://codepen.io/shin9626/pen/vYRdbOa)                           |
| 露易莎#7673             | [Codepen](https://codepen.io/louisa-lin/pen/vYRdbXV)                         |
| 座標33129#8748          | [Codepen](https://codepen.io/ad80352/pen/jOzZdBW?editors=1010)               |
| hiYifang #0736          | [Codepen](https://codepen.io/hiYifang/pen/zYWReZd)                           |
| JC#8658                 | [Codepen](https://codepen.io/jcsamoyed/pen/bGvLOXy)                          |
| Vada Chen#2055          | [Codepen](https://codepen.io/vadachen/pen/ZExrwxy)                           |
| RON#2813                | [Codepen](https://codepen.io/Ron115/pen/OJvQrLO)                             |
| claire#2116             | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/ZExrPEr)           |
| 無名#6427               | [Codepen](https://codepen.io/Nomoney/pen/WNzMLBq?editors=1010)               |
| Morris#8755             | [Codepen](https://codepen.io/morrisss/pen/dymdrpx)                           |
| 喬喬#2824               | [Codepen](https://codepen.io/joanne-wei/pen/PoRQVeY?editors=1010)            |
| Yanyan#3555             | [Codepen](https://codepen.io/wei-yi-lee/pen/MWVQxJG)                         |
| EvaLin#4546             | [Codepen](https://codepen.io/evalin0316/pen/vYRdPdL?editors=1111)            |
| Mitour#0672             | [CodePen](https://codepen.io/mitour/pen/KKoQEOG?editors=1010)                |
| Overy#4545              | [Codepen](https://codepen.io/oceanwhale52hz/pen/wvmyORP)                     |
| Ｎico#8739               | [Codepen](https://codepen.io/Nicof2e/pen/vYRdPwy)                             |
| 吉利#3810               | [CodePen](https://codepen.io/gillianyy/pen/OJvQGyz)                          |
| React-慧茹(拉拉醬)#3414 | [Codepen](https://codepen.io/lala-lee-jobs/pen/BarYEjr)                      |
| ZengZeng                | [Codepen](https://codepen.io/tyzyoko/pen/bGvLJgj)                            |
| Shani#4593              | [Codepen](https://codepen.io/ShaniMa/pen/abYqxWd)                            |
| KuoMin#4931             | [Codepen](https://codepen.io/KuoMin/pen/poLaBoQ?editors=1111)                |
| yuyu#6310               | [Codepen](https://codepen.io/yuyu0905/pen/yLKvWee?editors=1010)              |
| JimmyChang#5558         | [Codepen](https://codepen.io/JimmyChangWenChi/pen/KKoQLWV)                   |
| Timothy#5863            | [Codepen](https://codepen.io/timothy_hippo/pen/RwMQvQd)                      |
| IreneLee#7932           | [Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/QWmQRed?editors=1010) |
| Yiling#4054             | [Codepen](https://codepen.io/lin010/pen/VwXQJWw?editors=1010)                |
| ChloeLo#4858            | [Codepen](https://codepen.io/chloelo/pen/vYRdqQK)                            |
| Mr.Sean#3825            | [Codepen](https://codepen.io/sean_1215/pen/yLKvdjE)                          |
| Midnightdinner#6220     | [Codepen](https://codepen.io/woowooyong/pen/MWVQMLz)                         |
| Neuf#3083               | [Codepen](https://codepen.io/yifanneuf/pen/MWVQNyR?editors=0010)             |
| Arista#5802             | [Codepen](https://codepen.io/arista-hsieh/pen/zYWRgjr)                       |
| count1count2#9636       | [Codepen](https://codepen.io/souhakusou/pen/poLaMPB?editors=1010)            |
| Yihan#5560              | [Codepen](https://codepen.io/h513hh513h/pen/jOzZgKo?editors=0011)            |
| Ryder#7398              | [Codepen](https://codepen.io/rider159159/pen/QWmmLyW?editors=1010)           |
| 史蒂夫#5075             | [Codepen](https://codepen.io/TaroPanda/pen/PoRRYdY)                          |
| easton#3863             | [Codepen](https://codepen.io/EastonIsCodingNow/pen/xxWWKBJ)                  |
| shin#5792               | [Codepen](https://codepen.io/hah1030/pen/XWEEWdB?editors=1010)               |
| huch09#1426             | [Codepen](https://codepen.io/subarashii-huch09/pen/GRxxRqp?editors=0010)     |
| 𝔼.𝕎#4742                | [Codepen](https://codepen.io/kidult316/pen/mdxxywq)                          |
| rainbow#3329            | [Codepen](https://codepen.io/g901612002/pen/VwXXYOy?editors=1011)            |
| Dylan_Lin#7320          | [Codepen](https://codepen.io/lin-dylan/pen/jOzZQQK)                          |
| Chelly#6129             | [Codepen](https://codepen.io/chellyhsu/pen/LYddPKM)             |
| minmin#8960             | [Codepen](https://codepen.io/minfan-chen/pen/BarrNyb)                        |
| lingxuan                | [Codepen](https://codepen.io/lingxuan0618/pen/KKoopQM)                       |
| hw#0715                 | [Codepen](https://codepen.io/Lhwei/pen/XWEZovN)                              |
| CofCat#9226             | [Codepen](https://codepen.io/cofcat456/pen/yLKKNZb?editors=1010)             |
| yunyun#2239             | [Codepen](https://codepen.io/jarita0826/pen/Barroaj)                         |
| Sylvia-H #0024          | [Codepen](https://codepen.io/Cosmosheart/pen/QWmmbed)                        |
| 紅豆豆 #0518            | [Codepen](https://codepen.io/zoseqlpc/pen/XWEEmjB?editors=0010)              |
| hobby #6565             | [Codepen](https://codepen.io/hobbyling/pen/WNzzQxp)                          |
| 芝麻凜#1627             | [Codepen](https://codepen.io/bardkidd/pen/oNqqjYR?editors=0010)              |
| Wu#0167                 | [Codepen](https://codepen.io/Xander0705/pen/WNzzQZE)                         |
| Stanley#2505            | [Codepen](https://codepen.io/bigbearada/pen/MWVVaxP)                         |
| kyle890721#1016         | [Codepen](https://codepen.io/KYLE890721/pen/yLKKeVw)                         |
| 阿暟                    | [Codepen](https://codepen.io/patrickrrr007/pen/OJvvMEw?editors=1010)         |
| yiwun#0953              | [Codepen](https://codepen.io/kagamiakira_IBUN/pen/MWVVKmd)                   |
| Evileye#0666            | [Codepen](https://codepen.io/gn-lin/pen/wvmmKXe?editors=1010)                |
| hungya#0773             | [Codepen](https://codepen.io/hungya777/pen/jOzzNoy?editors=1010)             |
| Anson #3594             | [Codepen](https://codepen.io/huanmingchang/pen/dymmvjR?editors=1010)         |
| ねこ*#9385              | [Codepan](https://codepen.io/kunpao0104/pen/KKoomNp)                         |
| lloydd#8224             | [Codepen](https://codepen.io/thanatus25/pen/poLLPxN)                         |
| 𝓛𝓊𝒸𝓎#8635               | [Codepen](https://codepen.io/lucygirl/pen/MWVVoaE)                           |
| IceSam#7836             | [Codepen](https://codepen.io/sam-hsu/pen/vYRRZgB)                            |
| Kunda#2800              | [Codepen](https://codepen.io/kunda0818/pen/ExEEXKp?editors=0010)             |
| east#4003               | [Codepen](https://codepen.io/EastM/pen/mdxxwxV)                              |
| larahuang#8309          | [Codepen](https://codepen.io/lara1105huang/pen/YzaaQZK)                      |
| TaoDoris#5230           | [Codepen](https://codepen.io/taomaomao/pen/rNddzME?editors=0010)             |
| andersonshen#4675       | [Codepen](https://codepen.io/luxyenni-the-bold/pen/wvmmrLK)                  |
| zzly#9134               | [Codepen](https://codepen.io/ly00/pen/GRxxOpR)                               |
| Shau#6400               | [Codepen](https://codepen.io/shau-chen/pen/xxWWPYB)                          |
| 山貓(焜)#7041           | [Codepen](https://codepen.io/pen?template=bGvvYvW)                           |
| Vivi0225#3634           | [Codepen](https://codepen.io/vivian820225/pen/KKoQJWz)                       |
| 眼睛 #0314              | [Codepen](https://codepen.io/thrizzacode/pen/poLLaJo)                        |
| fannnny#7112            | [Codepen](https://codepen.io/vivian820225/pen/KKoQJWz)                       |
| JimHwang#3594           | [Codepen](https://codepen.io/jimh1129/pen/wvmmXvN)                           |
| 城堡#2126               | [Codepen](https://codepen.io/tthcastle/pen/wvmmXgb)                          |
| 楓之聲#6945             | [Codepen](https://codepen.io/sshane258/pen/MWVVXqJ)                          |
| DaleHsu#0355            | [Codepen](https://codepen.io/dale_hsu/pen/VwXXBxw)                           |
| LinaChen#1796           | [Codepen](https://codepen.io/LinaChen/pen/ZExxKxe)                           |
| Neal#0665               | [Codepen](https://codepen.io/neallkf/pen/poLLOyx)                            |
| charlottelee849#0366    | [Codepen](https://codepen.io/charlotte-lee/pen/WNzzgjK)                      |
| POKA #2168              | [Codepen](https://codepen.io/POKAHSIAO/pen/JjLLmLM)                          |
| JessSong#5050           | [Codepen](https://codepen.io/jssanji03/pen/mdxxdxE)                          |
| yoshidc#0455            | [Codepen](https://codepen.io/yoshiyyc/pen/oNqqJYx)                           |
| 灰塵貓#7994             | [Codepen](https://codepen.io/rjk66268/pen/jOzzXYQ?editors=0011)              |
| seijo #1585             | [Codepen](https://codepen.io/SeijoHuang/pen/yLKKwJo?editors=1010)            |
| Robert Lo#9653          | [Codepen](https://codepen.io/Robert-Lo/pen/GRxxebN)                          |
| Evachan#5729            | [Codepen](https://codepen.io/Eva-go/pen/OJvvKgO?editors=1010)                |
| 彼得#1923               | [Codepen](https://codepen.io/shiou-ho/pen/NWYMKoq)                           |
| Tsuei#9284              | [Codepen](https://codepen.io/AlbertoLL/pen/GRxdgxM?editors=1010)             |
| 翔#0859                 | [Codepen](https://codepen.io/energy95272z/pen/jOzxEed)                       |
| kir4che#7701            | [Codepen](https://codepen.io/kir4che/details/qBoYEMN)                        |
| Tuhacrt#0008            | [Codepen](https://codepen.io/Tuhacrt/pen/NWYMqrm)                            |
| MarsKuo#6015            | [Codepen](https://codepen.io/shiou-ho/pen/NWYMKoq)                           |
| RayRayHuang#1998        | [Codepen](https://codepen.io/hongrueihuang/pen/QWmrbOW)                      |
| Jasonlu#7163            | [Codepen](https://codepen.io/wnptocip/pen/BarxoZK)                           |
| moitw                   | [codepen](https://codepen.io/tsuifei/pen/mdxLepy?editors=1010)               |
| Carol Li #2269          | [Codepen](https://codepen.io/carolli834/pen/ZExobdM?editors=1010)            |
| 小夜 #3809              | [Codepen](https://codepen.io/Naito_K/pen/poLLZWd?editors=0010)               |
| 蘇蘇 #0426              | [Codepen](https://codepen.io/sabine1123/pen/WNzJrPY)                         |
| Murmurline#6969         | [Codepen](https://codepen.io/murmurline/pen/poLVEXm)                         |
| 陳sam#9117              | [Codepen](https://codepen.io/euldpliv/pen/YzaLpmd)                           |
| 真．穎旻粉撕#4995       | [Codepen](https://codepen.io/gbnbihif/pen/BarxpLN?editors=1010)              |
| GL#2256                 | [Codepen](https://codepen.io/4genie/pen/YzaLNZb)                             |
| Chaim#5739              | [Codepen](https://codepen.io/hgit915/pen/QWmQJaa)                            |
| Alex Liao#8538          | [CodePen](https://codepen.io/alex0207s/pen/GRxdyqN)                          |
| NinaKuo#3332            | [Codepen](https://codepen.io/ninakuo0814/pen/BarxYYb)                        |
| john21429#9434          | [Codepen](https://codepen.io/john21429/pen/mdxLKoa)                          |
| YJ#1839                 | [Codepen](https://codepen.io/cshjufxc/pen/RwMyJdq)                           |
| Renren #8437            | [Codepen](https://codepen.io/ehren-chen/pen/XWEqPMG)                         |
| 許揚民 Evan#4546        | [Codepen](https://codepen.io/gitevanhsu/pen/vYRjPLb?editors=1011)            |
| TedWang#7721            | [Codepen](https://codepen.io/wangtaiyan/pen/abYGMwG?editors=1010)            |
| 黑白兔#0684             | [CodePen](https://codepen.io/johnny329/pen/gOezEzb)                          |
| Pandaa #7740            | [CodePen](https://codepen.io/pandaachu/pen/ZExoZMZ)                          |
| Rikku#1756              | [CodePen](https://codepen.io/rikkubook/pen/OJvZYeY)                          |
| Li-Ninja#0471           | [CodePen](https://codepen.io/li-ninja/pen/qBoYzaK?editors=0110)              |
| YuZhun#1362             | [CodePen](https://codepen.io/danzhun/pen/ExELzWy)                            |
| Wins#8457               | [CodePen](https://codepen.io/winszhuang/pen/yLKjdmv?editors=1111)            |
| anby#7112               | [CodePen](https://codepen.io/andy-ch-bo-an/pen/qBoKWex)                      |
| Wendy Chang#8310        | [Codepen](https://codepen.io/Zhangbun/pen/ExERxVb)                           |
| 薯餅#3581               | [Codepen](https://codepen.io/ColdingPoTaTo/pen/LYdrYbB)                      |
| Judy☻                   | [Codepen](https://codepen.io/hsiaohan/pen/KKoeKGq?editors=1010)              |
| 夕璇#5662               | [Codepen](https://codepen.io/SiShiuan/pen/VwXdLbM)                           |
| Doris#1140              | [Codepen](https://codepen.io/doris79588/pen/GRxGNvd)                         |
| Emily Hsi #9066         | [Codepen](https://codepen.io/EmilyHsi/pen/qBoKqYj)                           |
| 寶貝                    | [codepan](https://codepen.io/wei-nie/pen/wvmXzXP?editors=1010)               |
| james#1443              | [codepan](https://codepen.io/clothn0105700/pen/zYWaNea?editors=0010)         |
| emma#3398               | [codepan](https://codepen.io/itsems/pen/XWEYVqG?editors=1011)                |
| 龜人#7299               | [codepan](https://codepen.io/dullshen/pen/mdxKpYm)                           |
| whatsupmm#6761          | [Codepen](https://codepen.io/meidada/pen/JjLZeea)                            |
| Louise                  | [Codepen](https://codepen.io/LouiseHuang/pen/RwMJEvo)                        |
| Sabrina77#1675          | [Codepen](https://codepen.io/sabrina-huang/pen/xxWzeZm)                      |
| toshow#5609             | [CodePen](https://codepen.io/toshow/pen/jOzKorQ)                             |
| Otis#8455               | [CodePen](https://codepen.io/humming74/pen/YzajKLr?editors=1010)             |
| 咻蹦#1526               | [CodePen](https://codepen.io/emmasyu/pen/mdxKRMY)                            |
| 小班#3324               | [CodePen](https://codepen.io/jlhung168/pen/rNdrKoV)                          |
| k.sin#3155              | [Codepen](https://codepen.io/sin588/pen/PoRdwxG?editors=0010)                |
| Cookie SSS#6991         | [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/dymqYqK?editors=1010) |
| Rocker#6235             | [CodePen](https://codepen.io/RockerLi/pen/QWmVGzz)                           |
| 雪莉#4827               | [CodePen](https://codepen.io/utshang216/pen/jOzeEvm)                         |
| justin                  | [CodePen](https://codepen.io/just-perfect/pen/QWmZNMQ)                       |
| Josh DB #3366           | [CodePen](https://codepen.io/joshjong/pen/GRxdXeO)                           |
| Cherry ZY#4647          | [CodePen](https://codepen.io/qoosdd89382/pen/NWYOgvo?editors=0010)           |
| Maxxxxxxxxxxx#9711      | [CodePen](https://codepen.io/MaxHarry/pen/jOzevNE?editors=1011)              |
| Ben Ko#1623           | [CodePen](https://codepen.io/designerko1215/pen/xxWyaaJ)  |
| 鉛筆 #7763            | [CodePen](https://codepen.io/zoeguava/pen/QWmZZXB?editors=1010) |
| 魚魚 #1220             |[CodePen](https://codepen.io/vkkkmkbv-the-selector/pen/BarqEje) |
| hsiuhsiu #7412        |[CodePen](https://codepen.io/hsiuhsiu/pen/dymgwmQ) |
| Rose Wu#1669          |[CodePen](https://codepen.io/Rose-Wu/pen/NWYOVWb)  |
| Mori#5582             |[CodePen](https://codepen.io/flower9312/pen/VwXEoZX) |
| SunnyCheng#4113       |[CodePen](https://codepen.io/Sunny0509/pen/abYRgeW)  |
|kancheng#3915 |[CodePen](https://codepen.io/kancheng/pen/ZExmNro?editors=1010)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/OJvrxNJ?editors=1111)|
|Emily #3648  |[CodePen](https://codepen.io/flien/pen/dymjJxY?editors=1011)|
|eching#9183  |[CodePen](https://codepen.io/echin/pen/WNzPJeK?editors=1010)|
|Eileen#6454  |[CodePen](https://codepen.io/Eileen-io/pen/XWEGMpr)|
|ninipopo#7983  |[CodePen](https://codepen.io/Robinnini/pen/LYdvLxX)|
|Yushi#3972  |[CodePen](https://codepen.io/yus3/pen/oNqKNmM)|
|SleepWalk#1635  |[CodePen](https://codepen.io/arthurliinn/pen/WNJGvdg?editors=1010)|
| Amy |[CodePen](https://codepen.io/crazzyamy/pen/BaEyzoG?editors=1010)
| Eshiunm | [CodePen](https://codepen.io/Code-My/pen/wvZxLdm)


