---
tags: 2021 程式體驗營
---
{%hackmd theme-dark %}
# 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 之類的

**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/MWmgpZQ)**

## JS 任務題目

這邊要練習物件與陣列的結合使用方式，下週一則是會出 json 的部分。

請同學依照下方代碼回答問題：

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 即可)

console.log(cars[1]);

Q2: 有人購買了十台賓士後 賓士的剩餘數量為多少？該如何更新資料？(先修改資料後 console.log 檢查是否有修改成功)

var qty = 102;
qty -= 10;
cars[2].qty = qty
console.log(cars[2].qty);

Q3: 廠商決定把法拉利特價出售，賓士則取消特價，該怎麼寫？(先修改資料後 console.log 檢查是否有修改成功)

var isOnSale = true;
cars[0].isOnSale = isOnSale;
console.log(cars[0]);
isOnSale = false;
cars[2].isOnSale = isOnSale;
console.log(cars[2]);

請同學將上方代碼複製到 JS 區塊，並撰寫出上面的三個問題，且每次撰寫完畢都需 console.log 確認是否有成功更改/獲取到 cars 的資料。
最終輸出結果應該是：

[
  {
    brand: "法拉利", // 品牌
    releaseYear: 2017, // 發布時間(年)
    isOnSale: true, // 是否特價中
    qty: 99 // 剩餘數量
  },
  {
    brand: "寶馬", // 品牌
    releaseYear: 2019, // 發布時間(年)
    isOnSale: false, // 是否特價中
    qty: 238 // 剩餘數量
  },
  {
    brand: "賓士", // 品牌
    releaseYear: 2013, // 發布時間(年)
    isOnSale: false, // 是否特價中
    qty: 92 // 剩餘數量
  }
];

### Result: