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

# 6/29 每日任務 Day17

## HTML 任務題目

請同學嘗試建立一個 @mixin 來實現傳入兩個變數 $size 跟 $bgColor
做出背景色為 $bgColor 的 $size 寬高大小的圓形，
且圓形中要練習插入一個 font-awesome 的任意 icon，
該 icon 的行高是 $size 的大小 font-size 是 $size 的一半，
寫完 @mixin 後請在 HTML 區塊中建立四個圓形，
分別擁有四種不同的 size、bgColor、icon

完成圖如下(稍微調了下間距比較美麗)：

補充：
1. 記得引入 font-awesome 到 CSS 中
2. CSS 區塊記得改成 SCSS/Sass 格式
## JS 任務題目

請同學根據下方條件撰寫出程式碼：
1. 先創建一個物件為 student
2. student 的屬性有 name(學生姓名) score(分數) comment(評語)
3. name 為同學自己的名字， score 為同學對自己在這次體驗營中自己給自己打的分數！ comment 為空。
4. 接下來請使用物件結合 if / else if / else 判斷分數並給出對應評語
4-1. 當 score 大於等於 80 時 comment 為 你做的 hen 棒！
4-2. 當 score 大於等於 60 時 comment 為 你做的不錯哩！
4-3. 當 score 小於 60 時 comment 為 加油，你可以的！
5. 最後請使用 console.log(student) 顯示出有學生姓名、分數、評語的物件結果

（在我心裡你們都是一百分💯）

## 回報流程

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


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

// SCSS
@mixin circle($size, $bgc) {
  width: $size;
  height: $size;
  line-height: $size;
  background-color: $bgc;
  text-align: center;
  border-radius: $size;
  font-size: $size/2;
}
.circle-1 {
  @include circle(30px, #0997);
}
.circle-2 {
  @include circle(40px, #d097);
}
.circle-3 {
  @include circle(50px, #f227);
}
.circle-4 {
  @include circle(60px, #fc37);
}
// 這個是用來美化ㄉ
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 500px;
  margin: 100px auto;
}

// html
<div>
  <i class="circle-1 fab fa-facebook-f">
  </i>
  <i class="circle-2 fas fa-heart">
  </i>
  <i class="circle-3 far fa-copy">
  </i>
  <i class="circle-4 fas fa-user">
  </i>
</div>

ＪＳ：

let student = {};
student.name = "wang shuan";
student.score = 1000;
student.comment = ""
console.log(student)
if(student.score>=80){
  student.comment = "做的 hen 棒！";
}else if(student.score>=60){
  student.comment = "做的不錯哩！";
}else{
  student.comment = "加油，可以的！";
}
console.log(student)

-->

1. [Lina Chen - HTML & JS 作業](https://codepen.io/LinaChen/pen/jOmOZyG)
2. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/oNWNEag)
3. [Katie- HTML & JS 作業](https://codepen.io/aria-mi/pen/rNmNJQP)
4. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/bGWGLBg)
5. [Bao - HTML & JS 作業](https://codepen.io/baoh/pen/KKmKQJe)
6. [雅琇 Alicia - HTML 作業](https://codepen.io/yahsiu-hsu/pen/LYyYQdP)
7. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/PomoRzE)
8. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/eYWYMKm)
9. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/RwVwyrY)
10. [明達 - HTML 作業](https://codepen.io/bmzpfyxe/pen/WNjNJBG)
11. [Xing CT- HTML 作業](https://codepen.io/xing10/pen/RwVwMLL)
12. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/ZEKERxM)
13. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/jOmOKez)
14. [Ching Hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/RwVwJzo)
15. [huanan - HTML & JS 作業](https://codepen.io/hua_nan/pen/zYwYayX)
16. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/poPoKpL?editors=1100)
17. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/ZEKEjbZ)
18. [Natsu小夏 - HTML作業](https://codepen.io/natsunari/pen/jOmOvJV)
19. [Moto - HTML & JS 作業](https://codepen.io/moto-san/pen/gOWOKra)
20. [Phoebe- HTML & JS 作業](https://codepen.io/phoebe4561/pen/ZEKErwV)
21. [Min - HTML作業](https://codepen.io/minnn7716/pen/poPoGyr?editors=1100)
22. [Hi Annie - HTML & JS 作業](https://codepen.io/lhohdalu/pen/KKmKJOB?editors=1012)
23. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/BaRabam)
24. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/abWbMMB)
25. [Yao Lin - HTML & JS 作業](https://codepen.io/yaoyaoiii/pen/JjNjQMK)
26. [yu shiuan chang - HTML & JS 作業](https://codepen.io/prankaChang/pen/QWvWeYE)
27. [Snail Yen - HTML作業](https://codepen.io/SnailYen/pen/poPvzVa)
28. [YOYO - HTML作業](https://codepen.io/lumedkle/pen/XWRJNgY?editors=1011)
29. [Sabrina](https://codepen.io/a120220ms25/pen/LYyVpzp?editors=1111)
30. [Haley - HTML作業](https://codepen.io/wsx3690/pen/XWRbdLx)
31. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/RwVWRMR?editors=0010)
32. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/JjNXRBY)
33. [zong-huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/xxrwQdV)