---
# System prepended metadata

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

---

---
tags: 2021 程式體驗營
---
# 6/24 每日任務 Day14
{%hackmd theme-dark %}
## HTML 任務題目

今天進入 Sass 變數 的影片章節(顏色加深、加亮的部分會放到明天)
這邊要請同學練習使用 Sass 中的連結符號 `&`，
還有練習使用變數搭配加減乘除的方式來減少代碼的重複性，
請同學嘗試將[範例檔案](https://codepen.io/WangShuan/pen/GRWLbYp?editors=1100)中的樣式改寫成 scss 或 sass 的格式，
改寫前與改寫後的畫面需一致，且同學只能修改 CSS 的區塊，
最後將改寫完的 codepen 連結貼到下方的作業回報區即算完成。

方向參考：
1. 請把樣式修改成 scss 或 sass 格式
2. 盡量多使用 & 連結符號減少重複代碼
3. 嘗試把一些重複的、可找到規律的部分做成變數
4. 記得設定 CSS 區塊為 SCSS 或 Sass 謝謝

補充：
進入範例檔案後點擊右下角 fork 即可把 codepen 複製一份到自己帳號
有疑惑處可在 slack 上詢問，若需要幫助也請到 slack 上尋求支援

**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/BaWXLOp?editors=0011)**
- 學到最驚艷的事：原來 & 可以當成字串連接符號
    - e.g. 
        ```js=
        .menu {

        }
        .menu-list {

        }
        .menu a {

        }
        .menu a: hover {

        }
        //可以改寫成
        .menu {
            &-list {

            }
            & a {
                &:hover {

                }
            }
        }
        ```
    
### 參考答案：
```html=
<!-- 
1. WangShuan - 答案參考:
ＨＴＭＬ：
```css=
$black: #000;
$white: #fff;

$primary: #ffa;
$secondary: #8a8a8a;
$secondary-dark: #333;
  
$spacer-1: 5px;
$spacer-2: $spacer-1 * 2;
$spacer-3: $spacer-1 * 3;
$spacer-4: $spacer-1 * 4;
$spacer-6: $spacer-1 * 6;

$spacer-n1: -1px;

$font-size-base: 20px;
$font-size-m: $font-size-base * 1.2;
$font-size-l: $font-size-base * 1.8;

$border-width-1: 1px solid;

* {
  box-sizing: border-box;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  border: $border-width-1 $secondary;
}

.header {
  background-color: $primary;
  padding: 0 $spacer-3;
  margin-bottom: $spacer-n1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  
  .logo {
    font-size: $font-size-l;
    a {
      color: $black;
      text-decoration: none;
      text-shadow: 1px 2px 2px $secondary;
      &:hover {
        color: $white;
      }
    }
  }
  .menu {
    display: flex;
    &-item {
      padding: $spacer-4;
      a {
        color: $secondary;
        text-decoration: none;
      }
    }
  }
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  width: 30%;
  padding: $spacer-6;
  border-right: $border-width-1 $secondary;
  text-align: center;

  @media screen and (max-width: 540px) {
    width: 100%;
  }

  &-title {
    font-size: $font-size-base;
    padding: $spacer-2 0;
    border-bottom: $border-width-1 $black;
    margin-bottom: $spacer-2;
    font-style: italic;
    color: $secondary;
  }
}

.listGroup {
  line-height: 2;
  &-item {
    margin: $spacer-1 0;
    a {
      color: $secondary-dark;
      padding: 0 $spacer-1;
      &:hover {
        background-color: $secondary;
        color: $primary;
      }
    }
  }
}

.main {
  padding: $spacer-3 $spacer-6;
  width: 70%;
  @media screen and (max-width: 540px) {
    width: 100%;
    border-top: $border-width-1 $black;
  }
  .title {
    font-size: $font-size-m;
    margin: $spacer-3 0;
  }
  .desc {
    margin-left: $spacer-4;
    list-style: decimal;
    &-item {
      color: $secondary-dark;
      margin-bottom: $spacer-3;
    }
  }
}

.footer {
  background-color: $primary;
  text-align: center;
  padding: $spacer-3 0;
  margin-top: $spacer-n1;
}
```
## JS 任務題目

請看 50 小時影片的**物件教學**章節，到**新增物件屬性**看完後，依照下方說明撰寫代碼：

1. 建立一個物件 user ，屬性有姓名(name)、性別(gender)、年齡(age)、是否已婚(isMarried)
2. 屬性值部分請依照你自己的狀態填入(EX:助教自己的狀態是姓名 wangshuan 性別女 年齡24 已婚，就照寫)
3. 嘗試添加一個新的物件屬性，比如添加興趣或是有幾個小孩等等，這部分同學可自由發揮

代碼大概是這樣：
```
let user = 一個物件，裡面有四個物件屬性且同學要把值寫上;
console.log(user) 看一下是否建立成功
接下來幫 user 新增一個物件屬性 如 hobbies、children 等等，寫入對應的值
最後再 console.log(user) 確認是否寫入成功
```

完成後把代碼放在 codepen 的 JS 區塊即可
```javascript=
let user = {
        name: 'Omg',
        gender: 'Male',
        age: 21,
        isMarried: true,
};
console.log(user);
user.hobbies = 'tennis';
console.log(user);
```