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

# 6/30 每日任務 Day18

## HTML 任務題目

請嘗試使用 @mixin + @content 做出下方三個斷點：
1. pc: 992px
2. pad: 768px
3. mobile: 414px

接著在 HTML 插入以下程式碼：

<div class="container">
  <img src="https://fakeimg.pl/550x250/888888/fff?text=img1">
  <img src="https://fakeimg.pl/550x250/999999/fff?text=img2">
  <img src="https://fakeimg.pl/550x250/aaaaaa/fff?text=img3">
  <img src="https://fakeimg.pl/550x250/bbbbbb/fff?text=img4">
</div>

並使用 @mixin + @content 設計在三種斷點中，圖片分別為：
1. pc: 由左到右排列
2. pad: 一排兩張圖片
3. mobile: 由上至下排列

## JS 任務題目

下方程式碼中有兩個類似的函式，請同學將下方兩函式中重複的內容獨立成另一個新的函式，並更新以下的函式，完成後請同學嘗試執行 studentA 與 studentB 函式。

function studentA(){
  console.log('起床')
  console.log('刷牙')
  console.log('洗臉')
  console.log('吃早餐')
  console.log('趕 SCSS 任務')
}
function studentB(){
  console.log('起床')
  console.log('刷牙')
  console.log('洗臉')
  console.log('吃早餐')
  console.log('趕 JS 任務')
}

## 回報流程

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


## 作業回報區
<!--
1. WangShuan - 答案:
ＨＴＭＬ：

@mixin pc {
  @media (max-width: 992px) {
    @content;
  }
}

@mixin pad {
  @media (max-width: 768px) {
    @content;
  }
}

@mixin mobile {
  @media (max-width: 414px) {
    @content;
  }
}

.container{
  @include pc{
    ...
  }
  @include pad{
    ...
  }
  @include mobile{
    ...
  }
}

ＪＳ：

// function studentA(){
//   console.log('起床')
//   console.log('刷牙')
//   console.log('洗臉')
//   console.log('吃早餐')
//   console.log('趕 SCSS 任務')
// }
// function studentB(){
//   console.log('起床')
//   console.log('刷牙')
//   console.log('洗臉')
//   console.log('吃早餐')
//   console.log('趕 JS 任務')
// }
function morning(){
  console.log('起床')
  console.log('刷牙')
  console.log('洗臉')
  console.log('吃早餐')
}
function studentA(){
  morning()
  console.log('趕 SCSS 任務')
}
function studentB(){
  morning()
  console.log('趕 JS 任務')
}
studentA()
studentB()

-->

1. [明達 - HTML 作業](https://codepen.io/bmzpfyxe/pen/bGWNwNZ?editors=1100)
2. [Lina Chen](https://codepen.io/LinaChen/pen/mdmyrbL)
3. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/yLbyagY)
4. [Phoebe- HTML & JS 作業](https://codepen.io/phoebe4561/pen/xxdbEKg)
5. [Xing CT - HTML & JS 作業](https://codepen.io/xing10/pen/ZEKYpGb)
6. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/abWzmdJ)
7. [Mao - HTML & JS 最後一份作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/QWvwGwK)
8. [Katie- HTML & JS作業](https://codepen.io/aria-mi/pen/zYwxKWz)
9. [Natsu小夏 - HTML作業](https://codepen.io/natsunari/pen/VwbYmaN)
10. [我是泇吟 - HTML & JS 最後一份作業](https://codepen.io/kljuqbxs/pen/WNjboaZ)
11. [Hi Annie - HTML & JS 最後一份作業](https://codepen.io/lhohdalu/pen/RwVNoYW?editors=1111)
12. [ZY Hsu - HTML & JS 最後一份作業](https://codepen.io/zihyin/pen/KKmwNyX?editors=0012)
13. [YOYO - HTML & JS 最後一份作業](https://codepen.io/lumedkle/pen/ExmaNRG?editors=1111)
14. [阿丁兒 - HTML & JS 最後一份作業](https://codepen.io/dingpachan/pen/ExmaNpG)
15. [huanan - HTML作業 & JS作業](https://codepen.io/hua_nan/pen/eYWmgaN)
16. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/mdmyRZx)
17. [Min - HTML作業](https://codepen.io/minnn7716/pen/OJmPpoe?editors=0100)
18. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/gOWbWpY)
19. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/VwbYXrm)
20. [雅琇 Alicia－HTML 作業](https://codepen.io/yahsiu-hsu/pen/abWzGzm)
21. [Haley－HTML & JS 作業](https://codepen.io/wsx3690/pen/WNjvQYg)
22. [Sabrina](https://codepen.io/a120220ms25/pen/VwbLjeL?editors=1111)
23. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/mdmeENm?editors=0010)
24. [betty－HTML & JS 作業](https://codepen.io/betty-hu/pen/OJmNRYv?editors=0110)
25. [zong-huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/oNwbgZd)