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

# 6/15 每日任務 Day7

## HTML 任務題目
請回答下方三道選擇題：

### Q1: 製作響應式網頁時 header 中必須加入什麼東西？
A. `<meta media="true" />`
B. `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
C. `<script src="./viewport.js"></script>`
### Q2: 在響應式網頁中嚴格禁止出現以下哪個東西？
A. `X 軸`
B. `Y 軸`
C. `Z 軸`
### Q3: 關於響應式網頁的說法以下何者錯誤？
A. RWD 是 Responsive Web Design 的簡稱
B. `@media (max-width: 400px) {...}` 表示當螢幕尺寸大於等於 400px 就會套用 `{...}` 中撰寫的樣式
C. `@media (max-width: 400px) {...}` 表示當螢幕尺寸小於等於 400px 就會套用 `{...}` 中撰寫的樣式

不知道的同學可以到 50 小時影音教學找 RWD 手機版網頁設計 章節的那兩個影片學習。

## JS 任務題目

本題目在練習 **流程判斷 - if、else if、else**，

範例題目為：

1. age 為未滿 19 歲，表示這年紀是 小屁孩
2. age 為 19 至未滿 31 歲，表示這年紀是 青年期
3. age 為 31 至未滿 45 歲，表示這年紀是 壯年期
4. age 為 45 至未滿 65 歲，表示這年紀是 中年期
5. age 為 65 歲以上，表示這年紀是 老年期

答案會寫：

let age = 31;

if (age < 19) {
  console.log("是個小屁孩啊～");
} else if (age >= 19 && age < 31) {
  console.log("到青年期了");
} else if (age >= 31 && age < 45) {
  console.log("是壯年期了");
} else if (age >= 45 && age < 65) {
  console.log("已經是中年期了");
} else {
  console.log("老年期了，你老了");
}

接下來換您試試看，請依照以上範例，宣告變數 age 並使用 if、else if、else 撰寫出以下條件：

1. age 為未滿 2 歲，表示這年紀是個 寶寶
2. age 為 2 至未滿 6 歲，表示這年紀是 幼兒園小朋友 了
3. age 為 6 至未滿 12 歲，表示這年紀是 國小生 了
4. age 為 12 至未滿 15 歲，表示這年紀是 國中生 了
5. age 為 15 至未滿 18 歲，表示這年紀是 高中生 了
6. age 為 18 歲以上，表示這年紀是 成年人 了

## 回報流程

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


## 作業回報區
<!--
1. WangShuan - HTML答案: Ｂ、Ａ、Ｂ；
JS 答案：

let age = 3;

if (age < 2) {
  console.log("寶寶乖乖在家～");
} else if (age >= 2 && age < 6) {
  console.log("幼兒園小朋友");
} else if (age >= 6 && age < 12) {
  console.log("國小生");
} else if (age >= 12 && age < 15) {
  console.log("國中生");
} else if (age >= 15 && age < 18) {
  console.log("高中生");
} else {
  console.log("成年人");
}

-->
1. [小詹－HTML & JS 作業](https://codepen.io/ball77111/pen/zYZyYvV)
2. [Teddy Wu - HTML 作業] B A B
3. [Benson－HTML & JS 作業](https://codepen.io/polarBear712/pen/MWpZyYo?editors=1010)
4. [henry- HTML 作業] B A B
5. [Katie - HTML作業區] B / A / B
6. [Lina Chen－HTML & JS 作業](https://codepen.io/LinaChen/pen/OJprNMV)
7. [Ken Chen－HTML&JS作業](https://codepen.io/ilovedriftcity168/pen/yLMGOgz)
8. [Sz－HTML & JS 作業](https://codepen.io/szyln/pen/KKWbMPe)
9. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/ZEeVOYV?editors=0110)
10. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/mdWaEPW)
11. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/yLMGJXZ)
12. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/jOBXraQ)
13. [winnie - HTML & JS 作業](https://codepen.io/hsuanyu0115/pen/JjWwRYN?editors=1010)
14. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/GRWPjmw)
15. [Teddy - HTML & JS 作業](https://codepen.io/nina-web-eng/pen/abJPZyz)
16. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/OJprRwe)
17. [Xing CT - HTML & JS 作業](https://codepen.io/xing10/pen/ZEeVOqz?editors=0111)
18. [Qian - HTML 作業] B A B
19. [Yuna - HTML & JS 作業](https://codepen.io/Yuna-Zhang/pen/NWpebLg)
20. [Jane Lin HTML & JS 作業](https://codepen.io/as60160/pen/MWpZJQd)
21. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/poeqROB?editors=1010)
22. [Yen - HTML & JS 作業](https://codepen.io/skxydvbs/pen/bGqOgXO?editors=1011)
23. [Joy Cheng - HTML & JS 作業](https://codepen.io/joycheng5432/pen/XWMoMbd?editors=0010)
24. [BaoH - HTML & JS 作業](https://codepen.io/baoh/pen/NWpepRV)
25. [駱彥融 - HTML & JS 作業](https://codepen.io/yjluo/pen/jOBXByN)
26. [Wei Han Jan - HTML & JS 作業](https://codepen.io/begoniasuccess/pen/gOmZWMO)
27. [coco li - HTML & JS 作業](https://codepen.io/corinna_li/pen/JjWwNgg)
28. [明達在這 - HTML & JS 作業](https://codepen.io/bmzpfyxe/pen/GRWPEGO?editors=1010)
29. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/BaWvZXq)
30. [OAO - HTML & JS 作業](https://codepen.io/OAOAO/pen/MWpZoNW)
31. [Yu](https://codepen.io/yuuuu4444/pen/eYvbGrK?editors=0010)
32. [Isaac - HTML & JS 作業](https://codepen.io/isaac1125/pen/xxqmXvo?editors=1010)
33. [Hi Annie - HTML & JS 作業](https://codepen.io/lhohdalu/pen/XWMozev?editors=0111)
34. [Moto - HTML & JS 作業](https://codepen.io/moto-san/pen/qBrLjEB?editors=0110)
35. [yu shiuan chang - HTML & JS 作業](https://codepen.io/prankaChang/pen/jOBXYMg?editors=0011)
36. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/gOmZoRQ)
37. [PinYin - HTML & JS 作業](https://codepen.io/PinYin/pen/mdWapLQ)
38. Snail Yen - HTML作業：B A B
39. [Anne Lin - HTML&JS 作業](https://codepen.io/mmj159/pen/mdWaKLJ)
40. [Anita](https://codepen.io/lcogkgva/pen/XWMoYOx?editors=0010)
41. [Jeff H](https://hackmd.io/@jeff14994/SyIdWIIju)
42. [LiMin](https://codepen.io/XuLiMin/pen/dyvwKRL)
43. [betty - HTML&JS 作業](https://codepen.io/betty-hu/pen/ZEeVjGq)
44. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/JjWwBLY)
45. [三隻小貓 HTML & JS 作業](https://codepen.io/bagelover/pen/eYvbPrr)
46. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/PopVoaO?editors=0010)
47. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/oNZmgQq)
48. [Erica Chen HTML & JS 作業](https://codepen.io/ericachen/pen/YzZBXyd)
49. [Null - HTML作業] Q1. B Q2. A Q3. B
50. [YOYO -HTML & JS 作業](https://codepen.io/lumedkle/pen/WNpPQLg?editors=1011)
51. [Ted Wu - HTML作業：B A B]
52. [Haley－HTML & JS 作業](https://codepen.io/wsx3690/pen/LYWqyXa?editors=0010) HTML答案 BAB
53. [Chung－HTML & JS 作業](https://codepen.io/chung_123/pen/KKWJGpV?editors=1010)
54. [Sabrina](https://codepen.io/a120220ms25/pen/MWpLxyG)
55. [li li](https://codepen.io/lintapop/pen/jOBdREQ)
56. [Kelvin Wu－HTML & JS 作業](https://codepen.io/kai5363/pen/YzZgXzv)
57. [Shiny－HTML & JS 作業](https://codepen.io/shinychen/pen/KKWEpNz)
57. [Ting－HTML & JS 作業](https://codepen.io/veqnspek-the-decoder/pen/mdWoWLx)
58. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/wvJOXzL)
59. [Min - HTML作業](https://codepen.io/minnn7716/pen/zYZXYWM)
60. [林詠雯-HTML作業](https://codepen.io/meimeilin/pen/jOBRKvb)
61. [andyphl - HTML & JS 作業](https://codepen.io/andyphl/pen/ZEeZVyw)
62. [jie - HTML&JS作業](https://codepen.io/jie333/pen/gOmJQRV)
63. [drumrick - HTML作業](https://codepen.io/drumrick/pen/XWMwOoN)
64. LoKing - HTML作業：BAB
65. [周周-HTML&JS作業](https://codepen.io/jhoujhou-the-decoder/pen/bGWbMYE?editors=1010)
66. [Min Chun Tsai - HTML & JS作業](https://codepen.io/Tsai0926/pen/WNjNeOX?editors=1010)
67. [Overy- HTML &JS作業](https://codepen.io/overy-tsai/pen/yLbLBaK)
68. [zong huan- HTML &JS作業](https://codepen.io/wxsobwib-the-encoder/pen/qBmBEqo)
69. [蔡秉祐- HTML &JS作業](https://codepen.io/cwrzyhae-the-animator/pen/ZEKEBgP?editors=0010)
70. [Newman - HTML &JS作業](https://codepen.io/newmankz/pen/yLbLpgJ)
71. [chiachia-HTML作業](https://codepen.io/chiachiaD/pen/mdmdXjr?editors=1100)
72. [Zackaz HTML & JS作業](https://codepen.io/zackaz/pen/wvdvEpw)