---
tags: 2021 程式體驗營
---

# 6/17 每日任務 Day9

## HTML 任務題目

請修改[範例檔案](https://codepen.io/WangShuan/pen/RwpEMXx)中的 CSS 完成以下設計條件(Flex + RWD)：
1. 設置父層 .container 大小為 1000px 居中對齊，
2. 平板(768px以下)時 .container 最大寬度會變成 500px (請設置 "max-width")
3. 手機版(500px以下)時 .container 最大寬度為 300px (請設置 "max-width")
4. 使用 flex 技巧將 .container 下的四個 div 設置為由左至右的排列、居中對齊
5. 當寬度超過時會自動往下一行排列(提示：flex-wrap)
6. 手機版時設置成由上至下的排列方式，且順序為 img4 > img3 > img2 > img1 (可使用 flex-direction 調整)

附上完成圖：

769px 以上顯示畫面如下


768px ~ 501px 顯示畫面如下


500px 以下顯示畫面如下


補充：
- 打開範例檔案的 codepen 可以直接點擊右下角的 fork 就能將助教的 codepen 複製到同學的帳號中使用哩！
- RWD 響應式要使用 max-width 做設置 才有辦法像水一樣控制內容大小 如果寫死寬度就不是響應式了！
## JS 任務題目

請同學根據下方文字說明練習使用 [whimsical](https://whimsical.com/) 來繪製自己的流程圖：

胖虎今天要做健康檢查
他打算把自己的身高記錄下來
量完身高後得知胖虎身高為 170

該練習只需使用以下三種圖案來繪製即可：

step1: 進入官網點擊使用 Google 註冊或信箱註冊
step2: 點擊左上角加號選擇要繪製哪種圖選擇 FlowChart 流程圖
step3: 開始依照說明條件繪製出自己的流程圖
step4: 繪製完成後點擊右上角頭像左邊的鎖頭 找到地球那行設置成 can view
step5: 點擊上方出現的 Copy Link 貼到下面回報區即可

完成後同學也可嘗試照著自己的流程圖撰寫 JS 代碼

## 回報流程

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


## 作業回報區
<!--
1. WangShuan - 答案:

.container {
  max-width: 1000px;
  margin: 0 auto 50px; // 這邊下方推出 50px 助教覺得看起來比較美麗 你們自己看要不要加～
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px) {
  .container {
    max-width: 500px;
  }
}
@media (max-width: 500px) {
  .container {
    max-width: 300px;
    flex-direction: column-reverse;
    align-items: center;
  }
}

ＪＳ流程圖參考答案：https://whimsical.com/PMNwcnfdDt4kQW4jnS9a2j
-->
1. [Anne Lin - HTML & JS 作業](https://codepen.io/mmj159/pen/VwpgPgP)
2. [Anita - HTML & JS 作業](https://codepen.io/lcogkgva/pen/poeGewz)
3. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/JjWxpme?editors=1100)
4. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/eYvxMgP?editors=1100)
5. [Lina Chen - HTML & JS 作業](https://codepen.io/LinaChen/pen/PopVRmp)
6. [明達在這 - HTML 作業]([https://](https://codepen.io/bmzpfyxe/pen/WNpPzyJ))
7. [henry - HTML & JS 作業](https://codepen.io/henrymorgan666/pen/PopVRvE)
8. [huanan - HTML & JS 作業](https://codepen.io/hua_nan/pen/WNpPJoP)
9. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/MWpLGbg)
10. [Qian](https://codepen.io/qianhuiwei/pen/WNpPJMB?editors=1100)
11. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/PopVeGe)
12. [Joy Cheng - HTML作業](https://codepen.io/joycheng5432/pen/MWpLGRy)
13. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/MWpLXpp)
14. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/rNyPKay)
<!-- 畫流程作業： https://whimsical.com/2021-6-17-5LzWDmyh3HxSXXqURKtXeR -->
15. Nap－[HTML](https://codepen.io/o0o0o1o0/pen/OJpdEzP) & [JS](https://whimsical.com/2021-06-17-hex-daily-Wn4DCjrEcyoSKZAwBVotXi) 作業
16. ZY Hsu- [HTML](https://codepen.io/zihyin/pen/gOmqKwJ?editors=1010)&[ JS 作業](https://whimsical.com/6-17-HuP9iub9shQokRpjp3cKau)
17. [Yu](https://codepen.io/yuuuu4444/pen/eYvxKGG?editors=1010)
18. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/KKWJepV)
<!-- JS 作業 https://whimsical.com/7q3NAo6THnBRB3S2DW3Gyg -->
19. [winnie - HTML & JS 作業](https://codepen.io/hsuanyu0115/pen/mdWvLNQ)
20. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/XWMOaQM)
<!-- JS 作業 https://whimsical.com/js-TH7Dob6onmiUUsZxVobuHv -->
21. [LTL - HTML & JS 作業](https://codepen.io/ltlin93/full/ExWrpWM)
22. [Chung - HTML & JS 作業](https://codepen.io/chung_123/pen/qBrgJRK?editors=1010)
23. [Jane Lin HTML & JS 作業](https://codepen.io/as60160/pen/NWpopZW)
24. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/MWpLZYd)
<!-- 流程圖作業 https://whimsical.com/6-17-day9-GGA6RP944Rg7X6PKuzshn3 -->
25. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/WNpPmNj)
26. [Xing CT- HTML & JS 作業](https://codepen.io/xing10/pen/JjWxxva)
27. [Sabrina](https://codepen.io/a120220ms25/pen/GRWzezE)
28. Hi Annie -[HTML](https://codepen.io/lhohdalu/pen/ExWrJBm)&[JS作業](https://whimsical.com/6-17-NRG3QCNVmAFWTvD65szHZz)
29. [OAO- HTML & JS 作業](https://codepen.io/OAOAO/pen/LYWqvvO)
<!-- 流程圖 https://whimsical.com/0617-EpQygcjvpJHqqN9tUuthCo -->
30. yu shiuan chang -[HTML](https://codepen.io/prankaChang/pen/vYxbMrR)&[JS作業](https://whimsical.com/6-17js-SfJs7DfTt8c9xTeQTHdA8b)
31. William - [HTML 作業](https://codepen.io/hsuweihung/pen/ZEewdLj)＆[JS作業](https://whimsical.com/js-KvvYftSy4yYshgsA2WGBFS)
32. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/ExWrqoy)
33. [Moto - HTML & JS 作業](https://codepen.io/moto-san/pen/PopVLQm)
34. [Jeff H](https://hackmd.io/@jeff14994/HJB4cCi9_/%2FBPAIa5GLTsytSWwFIoHrfQ)
35. Shiny - [HTML](https://codepen.io/shinychen/pen/RwpdWZr) & [JS 作業](https://whimsical.com/JsCueWHT8Y1HG4dxqDMQkX)
36. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/poeYyNy)
37. [li li](https://codepen.io/lintapop/pen/GRWeqOj)
38. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/dyvrOYe)
39. [BaoH - HTML & JS 作業](https://codepen.io/baoh/pen/GRWerxj)
40. [Benson - HTML & JS 作業](https://codepen.io/polarBear712/pen/LYWqdZw)
41. [Min - HTML作業](https://codepen.io/minnn7716/pen/OJpGJEb)
42. [三隻小貓 - HTML 作業](https://codepen.io/bagelover/pen/jOBRWMv?editors=1100)
43. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/OJpqKGo?editors=1100)
44. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/QWpPPWa)
45. [coco li - HTML作業](https://codepen.io/corinna_li/pen/ExWzajM)
46. [PinYin - HTML作業](https://codepen.io/PinYin/pen/bGqyNdr)
47. [andyphl - HTML & JS 作業](https://codepen.io/andyphl/pen/yLMrGwW)
48. [jie - HTML](https://codepen.io/jie333/pen/PopvxrZ)[&JS作業](https://whimsical.com/LBt8MHDM85zJ6feoLuJzWw)
49. drumrick - [HTML & JS 作業](https://codepen.io/drumrick/pen/PopvvoE) 以及 [flowchart 作業](https://whimsical.com/ERqsTYWfeFY2pMfD8E7HYb)
50. [Kelvin Wu - HTML作業](https://codepen.io/kai5363/pen/XWMLgoZ)
51. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/BaWXwXq?editors=1100)
52. LoKing - [HTML作業](https://codepen.io/loking23/pen/mdWNxdx)
53. [周周 HTML&JS作業](https://codepen.io/jhoujhou-the-decoder/pen/NWjKMyr)
54. [Overy - HTML 作業](https://codepen.io/overy-tsai/full/PomooKa)
55. [蔡秉祐 - HTML 作業](https://codepen.io/lcogkgva/pen/poeGewz)
56. [chiachia - HTML 作業](https://codepen.io/chiachiaD/pen/wvdvyQr?editors=1100)
57. [Erica Chen - HTML 作業](https://codepen.io/ericachen/pen/qBmBKed) 和 [JS作業](https://whimsical.com/6-17-js-88ha3ct7gbmzry1p7jncYv)
58. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/xxdbEMW)
59. [zong huan - HTML 作業](https://codepen.io/wxsobwib-the-encoder/pen/WNjNJPx?editors=1111)+[JS作業](https://whimsical.com/6-17-8jV96r5fQBWKzLCt8ocheg)