---
# System prepended metadata

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

---

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

# 6/16 每日任務 Day8

## HTML 任務題目
請修改[範例檔案](https://codepen.io/WangShuan/pen/XWMoezY)的 CSS 區塊完成以下三種設計：

1. 圖片大小預設為 800px
2. 將圖片大小在平版模式(768px 以下)設為 500px
3. 將圖片大小在手機版(500px 以下)設為 260px

示意圖：
PC:
![](https://i.imgur.com/Xix2enY.jpg)
iPad:
![](https://i.imgur.com/0hqRnyt.png)
iPhone X
![](https://i.imgur.com/7TVw4A8.png)


## JS 任務題目

請回答下方三道題目：

Q1 在撰寫 JS 判斷多個條件時當撰寫方式為 `if`+`else if`+`else` 的寫法，下方哪個選項錯誤？
A. 通常 `if` 一定是整個判斷式的開頭 後面才會是 `else if` 或 `else`
B. 判斷式都可以亂寫 順序也能亂排 次數隨便我開心 反正只要 console.log 沒報錯就好
C. 中間的 `else if` 可以重複出現多次用來判斷不同的條件

Q2 關於判斷中的條件式(即 if 判斷式 () 中的內容)，下方選項哪個說明正確？ 
A. 條件式中除了可以使用數字判斷條件(ex: a > 3) 也可以使用字串判斷是否有符合條件(ex: a == "John")
B. 條件式中只能使用數字判斷條件(ex: a > 3) 不能使用字串判斷是否有符合條件(ex: a == "John")
C. 判斷時條件式中只能寫 a == b 不能寫成 a = b 或 a === b

Q3 請看以下代碼回答 `console.log("今天我也美美噠～")` 是否會執行？以及為什麼會執行 or 為什麼不會執行？
```javascript=
let today = 6;

if (today === 1) {
  console.log("我要穿襯衫");
} else if (today === 2) {
  console.log("我要穿裙子");
} else if (today === 3) {
  console.log("我要穿吊帶褲");
} else if (today === 4) {
  console.log("我要穿踢恤");
} else if (today >= 5 && today <= 7) {
  console.log("抽籤決定要穿什麼好了");
}

console.log("今天我也美美噠～")
```

## 回報流程

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

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

## 作業回報區
<!-- 
1. WangShuan - 答案:
```css=
@media(max-width: 768px) {
  img{
    width: 500px;
  }
}
@media (max-width: 500px) {
  img{
    width: 260px;
  }
}
```
ＪＳ：Ｂ、Ａ、會，因為該行程式碼外面沒有撰寫任何判斷要求
 -->
 1. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/ExWGpRa)
 2. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/MWpZqgg)
 3. [Benson - HTML & JS 作業](https://codepen.io/polarBear712/pen/zYZybWO)
 4. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/xxqmBNV)
 5. [BaoH - HTML & JS作業](https://codepen.io/baoh/pen/ExWGMJV)
 6. [Katie -HTML作業](https://codepen.io/aria-mi/pen/KKWbYMO)
 7. [Xing CT -HTML作業](https://codepen.io/xing10/pen/XWMoQbm?editors=0010)
 8. [Lina Chen - HTML & JS作業](https://codepen.io/LinaChen/pen/YzZdMGY)
 9. [明達在這 - HTML & JS]([https://](https://codepen.io/bmzpfyxe/pen/jOBXRGN?editors=0010))
 10. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/ExWGzNE)
 11. [Qian - HTML & JS 作業](https://codepen.io/qianhuiwei/pen/BaWvedj)
 12. [LiMin - HTML & JS 作業](https://codepen.io/XuLiMin/pen/BaWveOL)
 13. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/xxqmNve)
 14. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/KKWbLYZ?editors=1010)
 15. [winnie - HTML & JS 作業](https://codepen.io/hsuanyu0115/pen/OJprebg?editors=1010)
 16. [駱彥融 - HTML & JS 作業](https://codepen.io/yjluo/pen/abJPgrd)
 17. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/dyvwxGz)
 18. [Yen - HTML & JS 作業](https://codepen.io/skxydvbs/pen/OJprKKK)
 19. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/BaWMBWN?editors=1100)
 20. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/JjWxPLe)
 21. [coco li - HTML & JS 作業](https://codepen.io/corinna_li/pen/abJXbYb)
 22. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/gOmqOqo?editors=0010)
 23. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/vYxvVyw)
 24. [Huana - HTML & JS 作業](https://codepen.io/hua_nan/pen/yLMZNBa)
 25. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/NWpoqRx)
 26. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/NWpoqXR?editors=1100)
 27. [Erica Chen - HTML & JS 作業](https://codepen.io/ericachen/pen/gOmqaOw)
 28. [Moto - HTML & JS 作業](https://codepen.io/moto-san/pen/NWpoPMZ)
 29. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/LYWqpKb?editors=1010)
 30. [OAO - HTML & JS 作業](https://codepen.io/OAOAO/pen/WNpPrjW)
 31. [yu shiuan chang HTML & JS 作業](https://codepen.io/prankaChang/pen/yLMZapy)
 32. [William HTML - & JS 作業](https://codepen.io/hsuweihung/pen/LYWqROj)
 33. [PinYin HTML - & JS 作業](https://codepen.io/PinYin/pen/QWpYdzV)
 34. [Jeff H](https://hackmd.io/@jeff14994/r14E_cPjO)
 35. [Anita HTML - & JS 作業](https://codepen.io/lcogkgva/pen/OJpdpVE)
 36. [我是泇吟 - & JS 作業](https://codepen.io/kljuqbxs/pen/ZEewWPo)
 37. [Haley - & JS 作業](https://codepen.io/wsx3690/pen/YzZBVMK)
 38. [henry - HTML & JS 作業](https://codepen.io/henrymorgan666/pen/mdWvRWr)
 39. [Joy Cheng - HTML & JS 作業](https://codepen.io/joycheng5432/pen/bGqzMZP?editors=0010)
 40. [Yu](https://codepen.io/yuuuu4444/pen/xxqMzgW?editors=0011)
 41. [Chung - HTML & JS 作業](https://codepen.io/chung_123/pen/eYvxPZv)
 42. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/PopVxgO)
 43. [Sabrina](https://codepen.io/a120220ms25/pen/MWpLxXz)
 44. [Hi Annie - HTML & JS 作業](https://codepen.io/lhohdalu/pen/xxqMeQd?editors=1111)
 45. [Kelvin Wu - HTML & JS 作業](https://codepen.io/kai5363/pen/dyvroGK)
 46. [Shiny - HTML & JS 作業](https://codepen.io/shinychen/pen/abJMOra)
 47. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/MWpxyKe)
 48. [li li](https://codepen.io/lintapop/pen/GRWeRLE)
 49. [Ting](https://codepen.io/veqnspek-the-decoder/pen/yLMwXRx)
 50. [Ching hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/YzZgmaQ)
 51. [Min - HTML作業](https://codepen.io/minnn7716/pen/NWpmWMg)
 52. [Ken Chen-HTML&JS作業](https://codepen.io/ilovedriftcity168/pen/abJxzLO)
 53. [三隻小貓 - HTML & JS 作業](https://codepen.io/bagelover/pen/dyvLYxY?editors=0110)
 54. [林詠雯 - HTML作業](https://codepen.io/meimeilin/pen/ZEeZRVL)
 55. [andyphl - HTML & JS 作業](https://codepen.io/andyphl/pen/YzZMdeN)
 56. [LTL - HTML & JS 作業](https://codepen.io/ltlin93/full/ExWzmxV)
 57. [jie -HTML&JS作業](https://codepen.io/jie333/pen/OJpYaOJ)
 58. [drumrick - HTML & JS 作業](https://codepen.io/drumrick/pen/rNygbPg)
 59. LoKing - [今日作業](https://codepen.io/loking23/pen/OJpKvLo)
 60. [Min Chun Tsai - HTML & JS 作業](https://codepen.io/Tsai0926/pen/WNjNeXd)
 61. [Overy - HTML & JS 作業](https://codepen.io/overy-tsai/pen/dyWybaM)
 62. [蔡秉祐 - HTML & JS 作業](https://codepen.io/cwrzyhae-the-animator/pen/QWvWpvj)
 63. [zong huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/poPovBr)
 64. [Newman - HTML & JS 作業](https://codepen.io/newmankz/pen/vYmYpxV)
 65. [chiachia- HTML 作業](https://codepen.io/chiachiaD/pen/LYyYQgY?editors=1100)