---
# System prepended metadata

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

---

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

# 6/21 每日任務 Day11

## HTML 任務題目

請修改[範例檔案](https://codepen.io/WangShuan/pen/vYxPYby?editors=1100)中的 CSS 完成以下設計條件：

1. box1 為垂直居中的不重複背景圖片，且背景色為 green 文字為白色
2. box2 為從左到右重複背景圖片，背景圖片起始位置從左上角開始，背景為黑色 文字為白色
3. 背景圖片連結請使用：https://i.ibb.co/3yhw5PR/string-of-beads.png



附上完成圖：
![](https://i.imgur.com/QznlV7H.png)

補充：
- 打開範例檔案的 codepen 可以直接點擊右下角的 fork 就能將助教的 codepen 複製到同學的帳號中使用哩！
- 同學可以另外去查詢 background-size 這個東西 也蠻好用的哦
## JS 任務題目

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

靜香是個可愛的女生，她今年 15 歲，
隔壁的餐館正在舉辦活動，
十八歲以上成年男子可獲得一杯免費啤酒，
未成年男子可獲得一杯免費葡萄汁，
十八歲以上成年女子可獲得一杯免費葡萄酒，
未成年女子可獲得一杯免費西瓜汁，
請問她去隔壁餐館吃飯可以免費獲得一杯什麼飲品？

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


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

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

## 回報流程

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

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

## 作業回報區
<!-- 
1. WangShuan - 答案:
ＨＴＭＬ：文字白色助教設在 .content 裡面，其他的看下方
```css=
.box1 {
  width: 100%;
  height: 240px;
  background-repeat: no-repeat;
  background-image: url(https://i.ibb.co/3yhw5PR/string-of-beads.png);
  background-position: 50% 50%;
  background-color: green;
}
.box2 {
  width: 100%;
  height: 240px;
  background-repeat: repeat-x;
  background-image: url(https://i.ibb.co/3yhw5PR/string-of-beads.png);
  background-color: #000;
}
```
ＪＳ：https://whimsical.com/Y89BAYrSMnHLUfewWFwRGs
 -->
 1. [Benson - HTML 作業](https://codepen.io/polarBear712/pen/WNpWgxM?editors=1100)
 2. [henry - HTML &JS 作業](https://codepen.io/henrymorgan666/pen/mdWgGQB?editors=1100)
 3. [Lina Chen - HTML &JS 作業](https://codepen.io/LinaChen/pen/ZEeZMNz)
 4. [Min - HTML作業](https://codepen.io/minnn7716/pen/wvJZYvY) 
 5. [明達在這 - HTML Homework]([https://](https://codepen.io/bmzpfyxe/pen/ZEeZqGY?editors=1100))
 6. [Natsu小夏 - HTML 作業](https://codepen.io/natsunari/pen/VwpNEpQ)
 7. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/oNZOaWo)
 8. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/mdWgzEL)
 9. 阿丁兒 - [HTML](https://codepen.io/dingpachan/pen/BaWEqPe?editors=1100) & [JS](https://whimsical.com/2021-6-21-MHqTLhmKYDPZGQ4ZiPsjMd) 作業
 10. [huanan - HTML & JS 作業](https://codepen.io/hua_nan/pen/MWpRzMX)
 11. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/ExWJGXq)
 12. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/VwpNqgb?editors=1100)
 13. [BaoH - HTML & JS 作業](https://codepen.io/baoh/pen/abJxMzq?editors=1100)
 14. [Xing CT- HTML & JS 作業](https://codepen.io/xing10/pen/BaWEveP)
 15. [anna - HTML作業](https://codepen.io/annhys/pen/rNybbOo)
 16. [winnie - HTML 作業](https://codepen.io/hsuanyu0115/pen/WNpWWEJ?editors=1100)
 17. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/YzZMMBV?editors=1100)
 18. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/gOmyyRR)
 19. [Chung - HTML & JS 作業](https://codepen.io/chung_123/pen/QWpPPRz?editors=1100)
 20. [Sabrina](https://codepen.io/a120220ms25/pen/NWpmZWq)
 21. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/WNpWPjq)
 22. [Teddy Wu - HTML 作業](https://codepen.io/hongwei0522/pen/KKWYORr?editors=1100)
 23. [Katie - HTML作業](https://codepen.io/aria-mi/pen/abJroqW?editors=1100)
 24. Hi Annie - [HTML](https://codepen.io/lhohdalu/pen/QWpRWwy?editors=1100) & [JS 作業](https://whimsical.com/6-21-E1ZSo3k6NFzCsCTdEStxio)
 25. [Yao Lin - HTML & JS 作業](https://codepen.io/yaoyaoiii/pen/NWpVWNx)
 26. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/YzZbPQW)
 27. [Moto - HTML作業](https://codepen.io/moto-san/pen/QWpRjGE?editors=1100)
 28. [Ching Hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/dyvLaaj?editors=0110)
 29. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug)
 30. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/JjWqGEP?editors=1100)
 31. Nap－[HTML](https://codepen.io/o0o0o1o0/pen/WNpBRNv) & [JS](https://whimsical.com/2021-06-21-hex-daily-TwyYUZriJ4gFeDhYzo1bkf) 作業 
 32. [Yu](https://codepen.io/yuuuu4444/pen/dyvEVdZ?editors=1100)
 33. [LTL - HTML作業](https://codepen.io/ltlin93/full/NWpVvZL) & [JS作業](https://whimsical.com/2021-6-21-8HKLUqG7idbUozugzaAVmD)
 34. [yu shiuan chang HTML & JS 作業](https://codepen.io/prankaChang/pen/OJpYwWL?editors=0110)
 35. drumrick [HTML 作業](https://codepen.io/drumrick/pen/WNpBqLo?e) 以及 [flowchart 作業](https://whimsical.com/3Xiio42iYw82gqvSB5meZa) 
 36. 雅琇 Alicia [HTML 作業](https://codepen.io/yahsiu-hsu/pen/QWpXyrQ)
 37. [jie- HTML作業](https://codepen.io/jie333/pen/LYWKbyb?editors=1100)
 38. [Anne Lin - HTML & JS 作業](https://codepen.io/mmj159/pen/ExWBbob)
 39. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/BaWgrZX?editors=1100)
 40. [Qian- HTML作業](https://codepen.io/qianhuiwei/pen/gOmNqmX?editors=1100)
 41. [YOYO- HTML作業](https://codepen.io/lumedkle/pen/mdWNqzv?editors=1010)
 42. LoKing - [HTML作業](https://codepen.io/loking23/pen/BaWXrqX?editors=1100)
 43. [Saiki HTML作業](https://codepen.io/rostpfette/pen/KKWjdVd)
 44. [Kelvin Wu - HTML作業](https://codepen.io/kai5363/pen/oNWNzEa)
 45. [蔡秉祐 - HTML作業](https://codepen.io/cwrzyhae-the-animator/pen/XWRWRpx)
 46. [三隻小貓 - HTML作業](https://codepen.io/bagelover/pen/YzVPzyG?editors=1100)
 47. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/GRmgNNg?editors=1010)
 48. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/BaRoxqq)
 49. Shiny - [HTML](https://codepen.io/shinychen/pen/KKmVrPg) & [JS 作業](https://whimsical.com/6-21-E7hHtWewpDZNQ9LfrZvQa)
 50. zong-huan - [HTML作業](https://codepen.io/wxsobwib-the-encoder/pen/LYyOEpo?editors=1100) & [JS作業](https://whimsical.com/6-21-7GGSdo4SqVn9utceNYorNk)