---
# System prepended metadata

title: "\U0001F3C5 5/20 (五) 每日切版任務 - label ＆ input - list"
tags: [公益程式體驗營 - 2022]

---

---
tags: 公益程式體驗營 - 2022
---

#  🏅 5/20 (五) 每日切版任務 - label ＆ input - list
## 題目 

**請使用 Codepen 做出下列的切版**
圖中只提供大方向相關尺寸，請自行設計相關間距，或者參考 [todolist](https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList) 頁面相關資訊

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


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




<!--
ans:
[label＆input](https://codepen.io/DoLucky/pen/vYdyNjM?editors=1100)
-->
---

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

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

<!-- 解答：  -->

回報區
---

<!-- 1. yunyun
答案：
Codepen：https://codepen.io/yun_yunni/pen/eYVRmLR
-->

<!-- 2. Bruno Yu
答案：
Codepen：https://codepen.io/bruno-yu/pen/NWygPLq
-->

<!-- 3. su#7798
codepen: https://codepen.io/wc-su/pen/GRQEgdL
-->

<!-- 4. RJRS#9430
codepen: https://codepen.io/RJRS/pen/bGLRdbp
-->

<!-- 5. Stanley#3825
codepen: https://codepen.io/sean_1215/pen/WNMOvME
-->

<!-- 6. Josh Chen#4552
codepen: https://codepen.io/hiphop825/pen/YzeQXMw
-->

<!-- 7. CloThEs
codepen: https://codepen.io/bogwdnxx-the-sans/pen/PoQjqBb
-->

<!-- 8.  Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/eYVRNrL?editors=1111
-->

<!-- 9. Peng
https://codepen.io/peng-027/pen/dydRYjW
 -->
 
<!-- 10. Noy
https://codepen.io/MochiCodingPen/pen/XWZgmym
-->

<!-- 11. 楓之聲#6945
https://codepen.io/sshane258/pen/PoQjPPK  
-->

<!-- 12. yuyu#6310
https://codepen.io/yuyu0905/pen/JjpJdyz?editors=1100
-->

<!-- 13. Vicky Chang#8846
Codepen:
https://codepen.io/cychang/pen/MWQoaKZ?editors=1100
-->

<!-- 14. Chi
Codepen: https://codepen.io/YoChi84/pen/eYVRJVv 
-->

<!-- 15. Mitour#0672
codepen: https://codepen.io/mitour/pen/jOZwWdr 
-->

<!-- 16. han#9437
codepen: https://codepen.io/qnrxylcw-the-reactor/pen/KKQqzMq
-->

<!--17. Aaron803
Codepen : https://codepen.io/narrowd4c/pen/WNMOrBw
-->

<!--18. Knn#0492
Codepen : https://codepen.io/Knn_84/pen/wvyeGyg
-->

<!--19. NaRa#7954
Codepen : https://codepen.io/chou-nara/pen/abqwvQZ
-->

<!-- 20. #EVC1876
Codepen: https://codepen.io/elvi-chuang/pen/LYQLGvJ?editors=1100
 -->
 
<!-- 21. hw#0715
https://codepen.io/Lhwei/pen/xxYrVMo  
-->

<!-- 22.ㄚ華
https://codepen.io/jzkonzat-the-typescripter/pen/eYVRNqx
-->

<!-- 23. andersonshen#4675
https://codepen.io/luxyenni-the-bold/pen/BaYZzgG
-->

<!-- 24.IreneLee
codepen:https://codepen.io/ntjtcxpt-the-animator/pen/JjpJKqE 
-->

<!-- 25. LHchien
https://codepen.io/lin_chien/pen/dydRoro?editors=1100
 -->

<!-- 26. Hao#2485
https://codepen.io/hao216/pen/BaYZKgd
-->

<!-- 27. Cheng-Yu#1813
https://codepen.io/ball77111/pen/ZEryBpv
-->

<!-- 28. Jason Chen
https://codepen.io/jason60810/pen/VwQWjqz
-->

<!-- 29. Wang
https://codepen.io/stevetanus/pen/rNJwMJy 
-->

<!-- 30. Muse#9741
https://codepen.io/mu24/pen/NWygjGr
-->

<!-- 31.眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/mdXwrvg
-->

<!-- 32.鉦勝 #8333
CodePen: https://codepen.io/atckmax823/pen/QWQgMQw
-->

<!-- 33.lyle#8123
CodePen: https://codepen.io/tomys/pen/rNJwzWM
-->

<!-- 34. Joyce 
https://codepen.io/joycehuang/pen/abqwwog?editors=1111
-->

<!-- 35.阿基基
https://codepen.io/JIJI_GNI/pen/LYQLyoY
 -->

 <!-- 36.雷雷#7844
https://codepen.io/lei-yi-jie/pen/jOZwLYP?editors=1100
 -->
 
 <!--37.黑松胖#4836
CodePen:https://codepen.io/yi-chien-hsieh/pen/QWQggaZ?editors=0100
-->

<!--38. Raymond Lam#0344
https://codepen.io/manshun-lam/pen/rNJwGeJ
-->

<!-- 39. Chaoci#2460
Codepen: https://codepen.io/gmailchao/pen/poawJZL?editors=1100
-->

<!-- 40. 白狐
Codepen：https://codepen.io/baihu7851/pen/RwQgqpK
-->

<!-- 41. Triple
 https://codepen.io/riku30/pen/VwQWVve -->
 
 <!-- 42. Arista
 https://codepen.io/arista-hsieh/pen/xxYrmqd -->
 
<!-- 43. skypassion5000#4151
Codepen：https://codepen.io/skypassion5000/pen/bGLROOG?editors=1100
--> 

<!--44. JustinLiu
Codepen: https://codepen.io/justin0227/pen/KKQqJRX
-->

<!--45. hsiuhsiu
Codepen: https://codepen.io/hsiuhsiu/pen/OJQgpLB?editors=1100
-->

<!--46. Chaco#2993
Codepen: https://codepen.io/chaco-wang/pen/OJQgYLL?editors=1000
-->

<!--47. Carrie#2750
Codepen: https://codepen.io/carrie-wang/pen/dydRwzd
-->

<!--48. Easton#3863
Codepen: https://codepen.io/EastonIsCodingNow/pen/KKQqLQv
-->

<!--49. Ayre#0016
codepen: https://codepen.io/yichunlin09/pen/abqwgzr
-->

<!--50. 小不點#1793
codepen: https://codepen.io/fwmfmgkx-the-flexboxer/pen/poawmML
-->

<!--51. Vera#5592
codepen: https://codepen.io/skvera/pen/GRQEyPL
-->

<!-- 52. Lina Chen
Codepen:https://codepen.io/LinaChen/pen/KKQqLVN
-->

<!-- 53. Erica Chen#6929
Codepen:https://codepen.io/ericachen/pen/QWQgooz
-->

<!-- 54. Cliff
https://codepen.io/Cliff_hex/pen/qBxRGob
-->

<!-- 55. Cynthia1111
https://codepen.io/Cynthia1111/pen/LYQjZbE
-->

<!-- 56. ajhappy#6488
Codepen:https://codepen.io/ajhappy5438/pen/wvyqoKB
-->

<!-- 57. 小羅#9921
Codepen:https://codepen.io/peizhen0609/pen/yLvXwoG
-->

<!-- 58. J_u_d_y#5993
 Codepen:https://codepen.io/J_u_d_y/pen/xxYLOMZ
-->

<!-- 59. Charlotte Lee
 Codepen:https://codepen.io/charlotte-lee/pen/poarNmp?editors=1100
-->

Codepen: https://codepen.io/Adif/pen/PoQKGMv?editors=1100

<!-- 61. How#5806
 Codepen:https://codepen.io/howtobefine/pen/BaYdWeg
-->

<!-- 62. amy芳#1385
 Codepen:https://codepen.io/amy-chieng/pen/qBxXdog
-->

<!-- 63. SASIMI#5099
 Codepen:
https://codepen.io/sashimi1327/pen/oNEeWPO
-->

<!-- 64. xuan#0808
 Codepen:
https://codepen.io/xuan0915/pen/MWQvVNd?editors=1100
-->

<!-- 65. bonnieli1414#4906
 Codepen:
https://codepen.io/bonnieli1414/pen/dydzKvQ?editors=1100
-->

<!-- 66. Greta#0837
Codepen: https://codepen.io/gretali/pen/GRQvqpj
-->

<!-- 67. weihsin#5643
Codepen: https://codepen.io/weisin/pen/LYQjXGw
-->

<!-- 68. Katie
Codepen: https://codepen.io/Katie24/pen/xxYLmeL
-->

<!-- 69 yen#5757
https://codepen.io/TZU-HUANG-YEN/pen/QWQMzpo -->

<!-- 70. WilliamChou#7375
Codepen: https://codepen.io/williampo78/pen/YzexgjG
-->


<!-- 71. RayChen1996 
https://codepen.io/raychen1996/pen/YzexBMm
-->

<!-- 72. 花禮湖燒#7359
Codepen: https://codepen.io/lai-pei/pen/ZErJwYB
-->

<!-- 73.yuling
 https://codepen.io/igzdflpu/pen/ExQvrKb
-->

<!-- 74. Mojito#6002
 codepen: https://codepen.io/vu3xk41997/pen/eYVGpmr
-->

<!-- 75. 小天#7177
https://codepen.io/linyujing/pen/PoQOGbJ
-->

<!-- 76. JessieCho
https://codepen.io/jessieCho/pen/YzeEOdQ
-->

<!-- 77. JackC
https://codepen.io/key0329/pen/gOvXZYL
-->

<!-- 78. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/WNMOXoJ
-->

<!-- 79. Tori#1287
Codepen：https://codepen.io/FlyTori/pen/NWyweKa
-->

<!-- 80. ling chang#1024
Codepen：https://codepen.io/ling-chang/pen/KKQXryZ
-->

<!-- 81. danny123
codepen: https://codepen.io/binlandz123/pen/rNJprVm?editors=1000
-->

<!-- 82. mei#8421
codepen: https://codepen.io/Shila-Chen/pen/gOvojWV?editors=1100
-->

<!-- 83 muzz#0345
 https://codepen.io/yunnnz/pen/MWQrYaq-->

<!-- 84  EllieLo#9809
 https://codepen.io/ellie-lo/pen/VwQxOLZ
-->

<!-- 85  Jumpye#8601
 https://codepen.io/Jumpye/pen/OJQoWbg?editors=1100
-->

<!-- 86. Jamie
https://codepen.io/Wu220103/pen/VwQWpEE -->

<!-- 87. Zera#6060
https://codepen.io/zera-tseng/pen/GRQGaMZ
-->

<!-- 88. Newman
https://codepen.io/newmankz/pen/vYdJKqJ?editors=1100
-->

<!-- 89. 艾芮絲#6060
https://codepen.io/wangyingju/pen/wvyNOyv
-->
