---
# System prepended metadata

title: 6/17 每日任務 Day9
tags: [2021 程式體驗營]

---

---
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 以上顯示畫面如下

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

768px ~ 501px 顯示畫面如下

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

500px 以下顯示畫面如下

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

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

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

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

該練習只需使用以下三種圖案來繪製即可：
![](https://i.imgur.com/OqRcQOv.png)


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

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

## 回報流程

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

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

## 作業回報區
<!-- 
1. WangShuan - 答案:
```css=
.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)