---
tags: 2021 程式體驗營
---
# 6/25 每日任務 Day15
## HTML 任務題目
請自行建立 codepen 使用 SCSS 中的顏色加亮(lighten)、加深(darken)方法，
做出以藍色為主的 1~9 階色階。
方向參考：
首先寫一個 container 來放九個色階，
這邊給 container 加上 flex 讓色階由左至右排列。
然後刻出九個 div ，每個 div 的寬高都為 100px
第五個 div 背景顏色為正常的 blue
第五個往左是顏色漸亮的背景色(每次都跟上個 blue 差 10%)，
第五個往右是顏色漸深背景色(每次都跟上個 blue 差 10%)。
附上完成圖如下：
補充：
- 記得把 CSS 區塊改成 SCSS 或 Sass 格式
- 想延伸練習可嘗試做出響應式效果 比如加點 flex-wrap 之類的
## JS 任務題目
這邊要練習物件與陣列的結合使用方式，下週一則是會出 json 的部分。
請同學依照下方代碼回答問題：
```javascript=
let cars = [
{
brand: "法拉利", // 品牌
releaseYear: 2017, // 發布時間(年)
isOnSale: false, // 是否特價中
qty: 99 // 剩餘數量
},
{
brand: "寶馬", // 品牌
releaseYear: 2019, // 發布時間(年)
isOnSale: false, // 是否特價中
qty: 238 // 剩餘數量
},
{
brand: "賓士", // 品牌
releaseYear: 2013, // 發布時間(年)
isOnSale: true, // 是否特價中
qty: 102 // 剩餘數量
}
];
```
Q1: 假設想獲取關於寶馬的所有資訊 該如何撰寫代碼獲得該資訊？(直接寫 console.log 即可)
Q2: 有人購買了十台賓士後 賓士的剩餘數量為多少？該如何更新資料？(先修改資料後 console.log 檢查是否有修改成功)
Q3: 廠商決定把法拉利特價出售，賓士則取消特價，該怎麼寫？(先修改資料後 console.log 檢查是否有修改成功)
請同學將上方代碼複製到 JS 區塊，並撰寫出上面的三個問題，且每次撰寫完畢都需 console.log 確認是否有成功更改/獲取到 cars 的資料。
最終輸出結果應該是：
```javascript=
[
{
brand: "法拉利", // 品牌
releaseYear: 2017, // 發布時間(年)
isOnSale: true, // 是否特價中
qty: 99 // 剩餘數量
},
{
brand: "寶馬", // 品牌
releaseYear: 2019, // 發布時間(年)
isOnSale: false, // 是否特價中
qty: 238 // 剩餘數量
},
{
brand: "賓士", // 品牌
releaseYear: 2013, // 發布時間(年)
isOnSale: false, // 是否特價中
qty: 92 // 剩餘數量
}
];
```
## 回報流程
1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）
## 作業回報區
<!--
1. WangShuan - 答案:
ＨＴＭＬ：
```
<style>
.container{
display: flex;
max-width: 900px;
margin: 50px auto;
flex-wrap: wrap;
justify-content: center;
}
.box{
width: 100px;
height: 100px;
}
.box9{
background-color: darken(blue,40%);
}
.box8{
background-color: darken(blue,30%);
}
.box7{
background-color: darken(blue,20%);
}
.box6{
background-color: darken(blue,10%);
}
.box5{
background-color: blue;
}
.box4{
background-color: lighten(blue,10%);
}
.box3{
background-color: lighten(blue,20%);
}
.box2{
background-color: lighten(blue,30%);
}
.box1{
background-color: lighten(blue,40%);
}
</style>
<div class="container">
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
<div class="box4 box"></div>
<div class="box5 box"></div>
<div class="box6 box"></div>
<div class="box7 box"></div>
<div class="box8 box"></div>
<div class="box9 box"></div>
</div>
```
ＪＳ：
```javascript=
let cars = [
{
brand: "法拉利", // 品牌
releaseYear: 2017, // 發布時間(年)
isOnSale: false, // 是否特價中
qty: 99 // 剩餘數量
},
{
brand: "寶馬", // 品牌
releaseYear: 2019, // 發布時間(年)
isOnSale: false, // 是否特價中
qty: 238 // 剩餘數量
},
{
brand: "賓士", // 品牌
releaseYear: 2013, // 發布時間(年)
isOnSale: true, // 是否特價中
qty: 102 // 剩餘數量
}
];
// Q1
console.log(cars[1])
// Q2
cars[2].qty-=10
console.log(cars)
// Q3
cars[0].isOnSale = true;
cars[2].isOnSale = false;
console.log(cars)
```
-->
1. [Jane Lin - HTML & JS 作業](https://codepen.io/as60160/pen/wvJVzez)
2. [henry - HTML & JS 作業](https://codepen.io/henrymorgan666/pen/ZEegJrx)
3. [Lina Chen - HTML & JS 作業](https://codepen.io/LinaChen/pen/QWpeMPa)
4. [Teddy wu - HTML 作業](https://codepen.io/hongwei0522/pen/PopMKVb)
5. [Hi Annie - HTML & JS 作業](https://codepen.io/lhohdalu/pen/eYvqExL?)
6. [BaoH - HTML & JS 作業 ](https://codepen.io/baoh/pen/ZEegXWV)
7. [Yao Lin - HTML & JS 作業 ](https://codepen.io/yaoyaoiii/pen/yLMmzgQ)
8. [Sz - HTML & JS 作業](https://codepen.io/szyln/pen/GRWVMMv)
9. [Mao - HTML & JS 作業](https://codepen.io/vsfvjiuv-the-typescripter/pen/gOmVGeX)
10. [Min - HTML作業](https://codepen.io/minnn7716/pen/dyvxVrW)
11. [Will - HTML & JS 作業](https://codepen.io/WILL_Wu/pen/yLMmzZd)
12. [阿丁兒 - HTML & JS 作業](https://codepen.io/dingpachan/pen/abJeLxZ)
13. [我是泇吟 - HTML & JS 作業](https://codepen.io/kljuqbxs/pen/JjWgraK?editors=0110)
14. [Xing - HTML & JS 作業](https://codepen.io/xing10/pen/xxqvXOK?editors=1111)
15. [Nap－HTML & JS 作業](https://codepen.io/o0o0o1o0/pen/poeMdoM)
16. [Ching Hua - HTML & JS 作業](https://codepen.io/ching-hua-wang/pen/BaWXmKv?editors=0012)
17. [明達在這 - HTML & JS 作業](https://codepen.io/bmzpfyxe/pen/zYZgEdO?editors=1010)
18. [huanan - HTML & JS 作業](https://codepen.io/hua_nan/pen/PopMOKV?editors=1111)
19. [ZY Hsu - HTML & JS 作業](https://codepen.io/zihyin/pen/qBreYZJ?editors=1111)
20. [YOYO - HTML & JS 作業](https://codepen.io/lumedkle/pen/jOBgKyp?editors=1010)
21. [HsiuTing - HTML & JS 作業](https://codepen.io/syutei/pen/YzZmLYm)
22. [Haley - HTML & JS 作業](https://codepen.io/wsx3690/pen/bGqXOwE?editors=1111)
23. [Moto - HTML & JS 作業](https://codepen.io/moto-san/pen/QWpezqp)
24. [drumrick - HTML & JS 作業](https://codepen.io/drumrick/pen/YzVKPMz)
25. [Sabrina](https://codepen.io/a120220ms25/pen/mdmbJKw?editors=1111)
26. [Anne Lin - HTML & JS 作業](https://codepen.io/mmj159/pen/ExmYZdm)
27. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FHJB4cCi9_%2F%252Ftr2SUQD6TByl4UGnxjfvug)
28. [Roger - HTML & JS 作業](https://codepen.io/redtea227/pen/abWoGGj)
29. [Katie - HTML & JS 作業](https://codepen.io/aria-mi/pen/oNWvRgr)
30. [Null - HTML作業](https://codepen.io/Whale-Cat/pen/XWRrwVG?editors=1100)
31. [Saiki - HTML & JS 作業](https://codepen.io/rostpfette/pen/QWvLRoB)
32. [Qian - HTML & JS 作業](https://codepen.io/qianhuiwei/pen/eYWOwEm)
33. [雅琇 Alicia - HTML作業](https://codepen.io/yahsiu-hsu/pen/OJmJMYM)
34. [Chiu3106 - HTML作業](https://codepen.io/chiu3106/pen/dyWyXEd)
35. [Kelvin Wu - HTML & JS 作業](https://codepen.io/kai5363/pen/abWbBMo)
36. [袁祥恩](https://codepen.io/ovfxsavp-the-bashful/pen/gOWarrE?editors=0010)
37. [betty - HTML & JS 作業](https://codepen.io/betty-hu/pen/gOWPYLZ?editors=1111)
38. [zong-huan - HTML & JS 作業](https://codepen.io/wxsobwib-the-encoder/pen/gOWVZqe)
Sign in with Wallet
Connect another wallet