---
# System prepended metadata

title: "\U0001F3C5 Day 7"
tags: [Vue 直播班 - 2022 春季班]

---

---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 7
###### tags: `Vue 直播班 - 2022 春季班`

題目 (使用 CodePen 作答)
---
小明有固定存錢的好習慣，以下是小明的銀行帳戶資訊。
1. 請協助他將存款資訊 mingTransfer 的內容合併到 mingAccount.depositRecord 陣列中 (使用 `.push()`)。
2. 請將他各月的存款累加到 mingAccount.deposit 中 (可以使用 `forEach()` 或 `reduce()`)

參考: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

```js=
// 小明的銀行帳戶資訊
let mingAccount = {
  name: '小明',
  age: 22,
  deposit: 10000,
  depositRecord: [
    {
      title: '開戶',
      amounts: 10000
    }
  ]
};
// 小明的存款資訊
let mingTransfer = [
  {
    title: '一月存款',
    amounts: 777
  },
  {
    title: '二月存款',
    amounts: 7000
  },
  {
    title: '三月存款',
    amounts: 70000
  }
]
console.log(mingAccount);
```

Bootstrap 格線系統
---
觀看 [Bootstrap 網格](https://bootstrap5.hexschool.com/docs/5.1/layout/grid/#row-columns)，練習運用 `.row`  `.col-*`，修改此 [Codepen](https://codepen.io/Bingbingboom/pen/jOLReLb) 中 `...` 的部分，還原成下方圖片樣式

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


回報流程
---
請同學依照下圖教學觀看解答、回報答案:

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

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

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

<!-- 解法一
mingTransfer.forEach(item => {
	mingAccount.depositRecord.push(item);
    mingAccount.deposit += item.amounts;
})
console.log(mingAccount);
-->

<!-- 解法二
mingTransfer.forEach(item => {
	mingAccount.depositRecord.push(item);
})
mingAccount.deposit = mingAccount.depositRecord.reduce((prev, curr) => {return prev + curr.amounts}, 0);
console.log(mingAccount);
-->

<!-- 
- Bootstrap -
https://codepen.io/Bingbingboom/pen/yLorRdX
-->

回報區
---

| 報數 | 組別/名字      | codepen / 其他回饋                                                |
| ---- | -------------- | ----------------------------------------------------------------- |
| 1    | Karen Huang    | https://codepen.io/Coding_Snorlax/pen/NWaMvor?editors=1112        |
| 2    | Iris Huang     | https://codepen.io/ythuang/pen/dyVezEL                            |
| 3    | POPEYE         | https://codepen.io/popeye_ux/pen/PoJeKvq                          |
| 4    | Larry          | https://codepen.io/larrylinr5/pen/QWqrMYG                         |
| 5    | kevin嘉軒      | https://codepen.io/kevin-chang-the-sasster/pen/yLzjzbK            |
| 6    | CloThEs        | https://codepen.io/bogwdnxx-the-sans/pen/YzrLxBb                  |
| 7    | Laura          | https://codepen.io/minminn/pen/abLGLdQ                            |
| 8    | 有廖先生(Rain) | https://codepen.io/billpop741/pen/mdBLBPJ                         |
| 9    | Pei Ying       | https://codepen.io/Pei-Ying/pen/MWEGEQq?editors=1111              |
| 10   | Aaron Tu       | https://codepen.io/aarontu/pen/gOGzGoL                            |
| 11   | 許敏鑫         | https://codepen.io/MIN-HSIN/pen/XWeqerY                           |
| 12   | shio           | https://codepen.io/shioyen/pen/abLGLJX                            |
| 13   | 威爾           | https://codepen.io/WILL_Wu/pen/OJxZxNX                            |
| 14   | Himi           | https://codepen.io/Himi/pen/QWqrqVm                               |
| 15   | Yof            | https://codepen.io/yangyof/pen/WNZzBKJ                            |
| 16   | Will           | https://codepen.io/ncrdpepc-the-lessful/pen/MWEGEdL?editors=1012  |
| 17   | Liu            | https://codepen.io/feng-chi-liu/pen/xxXjXBx                       |
| 18   | Yunei          | https://codepen.io/Yunei/pen/qBPYPMB                              |
| 19   | Izumi 泉       | https://codepen.io/izumi-dev/pen/eYGredq                          |
| 20   | kevinhes       | https://codepen.io/kevinhes/pen/PoJeOmR?editors=1001              |
| 21   | 群嘉           | https://codepen.io/efzdamnp-the-lessful/pen/eYGreJw?editors=1111  |
| 22   | Jerry          | https://codepen.io/rteyfwwd-the-scripter/pen/YzrLEQx?editors=1111 |
| 23   | Gill           | https://codepen.io/Gill-Chin/pen/mdBLqeM?editors=0110             |
| 24   | AllenW         | https://codepen.io/AllenW/pen/YzrLrNP                             |
| 25   | Empty Wu       | https://codepen.io/emptywu/pen/GRMdOLX                            |
| 26   | kk             | https://codepen.io/potatokaka/pen/RwLyLBG?editors=1111            |
| 27   | wenfish        | https://codepen.io/wenfisht/pen/QWqrqeB                           |
| 28   | Tim Lin        | https://codepen.io/TimmyLin/pen/vYejpGz                           |
| 29   | Charlotte Lee  | https://codepen.io/charlotte-lee/pen/LYzmeRd?editors=1010         |
| 30   | andersonshen   | https://codepen.io/luxyenni-the-bold/pen/ZEXoaXz                  |
| 31   | Arista         | https://codepen.io/arista-hsieh/pen/PoJeEvq                       |
| 32   | 陳暐中         | https://codepen.io/wei-z/pen/PoJeQwZ                              |
| 33   | Meng           | https://codepen.io/MGHN/pen/ZEXovRy?editors=0010                  |
| 34   | Jhen           | https://codepen.io/cheng-jhen/pen/poWVpqP                         |
| 35   | Bella Shya     | https://codepen.io/BellaXie/pen/PoJeQPZ?editors=1010              |
| 36   | Elaine Liu     | https://codepen.io/elaine7598/pen/ZEXoaoY?editors=1010            |
| 37   | Beanhuang      | https://codepen.io/Beanhuang/pen/QWqrQYr?editors=1011             |
| 38   | Henry Wu       | https://codepen.io/dkcmlaww-the-flexboxer/pen/bGoMLPL             |
| 39   | Mylène         | https://codepen.io/hamajibashi/pen/PoJeEWv                        |
| 40   | Sheep          | https://codepen.io/SheepNDW/pen/rNGvppz                           |
| 41   | 我是泇吟       | https://codepen.io/kljuqbxs/pen/NWaMYbL                           |
| 42   | 黃士桓         | https://codepen.io/shr-huan-huang/pen/oNGddwy?editors=0010        |
| 43   | 萱             | https://codepen.io/hyxfish27/pen/RwLyyGq                          |
| 44   | Terry21        | https://codepen.io/feng0409/pen/KKXRRaV?editors=1112              |
| 45   | Fleur          | https://codepen.io/swwlee/pen/XWeqYEo                             |
| 46   | 肉鬆           | https://codepen.io/klrkicog/pen/bGoMKZa?editors=1011              |
| 47   | tingyu         | https://codepen.io/dgltu/pen/ZEXoRVV?editors=1011                 |
| 48   | Rick Tzeng     | https://codepen.io/rick917jp6/pen/WNZJKWB                         |
| 49   | Judy           | https://codepen.io/judy86101166/pen/bGoMvBj                       |
| 50   | JohnLu         | https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011            |
| 51   | yu             | https://codepen.io/yuu9916/pen/OJxZBpR?editors=1001               |
| 52   | Benson         | https://codepen.io/soul81624/pen/poWVWWL                          |
| 53   | Otis           | https://codepen.io/humming74/pen/yLzjRvj?editors=1010             |
| 54   | Calon          | https://codepen.io/Calon0118/pen/qBPYQNZ                          |
| 55   | Jess_Wu        | https://codepen.io/jess1104/pen/mdBLQMq?editors=0011              |
| 56   | 咖咖           | https://codepen.io/gon790219/pen/qBPYQyr                          |
| 57   | Abbie          | https://codepen.io/Abbie0704/pen/QWqrzgb                          |
| 58   | Yummyniya      | https://codepen.io/yummyniya/pen/LYzmqPM                          |
| 59   | 柴貓           | https://codepen.io/shibacat/pen/yLzjZQq                           |
| 60   | 大衛           | https://codepen.io/exnsrpjc/pen/MWEGQVq?editors=1011              |
| 61   | Evan Chiang    | https://codepen.io/piskesocute/pen/poWVYeY                        |
| 62   | 浩             | https://codepen.io/Ahoyyyy/pen/dyVKPKq                            |
| 63   | Howard         | https://codepen.io/yawdnhbm/pen/XWeYJPe                           |
| 64   | Eason          | https://codepen.io/easonlinvscode/pen/rNGKxZz                     |
| 65   | Steven Chan    | https://codepen.io/Steven1220/pen/xxXzZpp?editors=1011            |
| 66   | Judy ☻         | https://codepen.io/hsiaohan/pen/PoJaNdb?editors=1000              |
|67|Alvin|https://codepen.io/Alvin20201116/pen/mdBKEzX?editors=1111|
|67|Bonnie|https://codepen.io/bonnieli1414/pen/Bawxqew?editors=1112|
|68|Alicia Lo|https://codepen.io/dkcyhyre/pen/mdBKWmz
|69|hua|https://codepen.io/hahahazzz123/pen/yLzEbjK
|70|Ron| https://codepen.io/long-sian-liang/pen/ExwRXzy |
|71|Gui|https://codepen.io/guitimliu/pen/poWKwLY
|72|AKI|https://codepen.io/akichen27/pen/rNGvZaM|
|73|Leo Song|https://codepen.io/sunnylaba/pen/oNGyPMd?editors=1100 |
|74|DDDDK|https://codepen.io/dkklee/pen/WNZygav |
|75|Steve|https://codepen.io/ycsteve/pen/oNGyQex?editors=1111|
|76|Yuan|https://codepen.io/yuanluo13542/pen/rNGKRoN?editors=1010|
|77|peter.chen1024|https://codepen.io/JIAN-RONG/pen/LYzBjqQ?editors=1011|
|78|Hedy|https://codepen.io/hhhsuan41/pen/RwLBjLo?editors=1112|
|79|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/OJxoMqd |
| 80| Sihle Huang | https://codepen.io/bugbug777/pen/WNZgOMd |
| 81| Erin Huang | https://codepen.io/ErinHuang/pen/QWqVgvO |
|82|Scottie|https://codepen.io/wow767t/pen/wvrErNM?editors=1111|
|83|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/gOGdGmy
|84|阿武|https://codepen.io/samwnkyat/pen/GRMXbQq
|85|Jasper|https://codepen.io/li-jasper/pen/VwMGJjJ
|86|Dobe|https://codepen.io/lisebee/pen/ccfa0afb104efe3c37713297d10beb6e?editors=1011|
|87|Henry|https://codepen.io/kaohenry9287/pen/zYEmLEL|
|88|YC|https://codepen.io/YCLu/pen/zYEMBdj|
|89|ShaoYu|https://codepen.io/shaoyukao/pen/zYEMgOm|
|90|William_O^2|https://codepen.io/CodingTrain_1/pen/VwMVJMg|
|91|Anna|https://codepen.io/kycrleao/pen/zYEyxvM?editors=1011|
|92|Jason Chen|https://codepen.io/jason60810/pen/MWEZNJQ |
|93|FuChang|https://codepen.io/fuchang830714/pen/LYzJGyW|
|94|mei|https://codepen.io/Shila-Chen/pen/gOGZVzw|
|95|Jordan|https://codepen.io/jordan-ttc-design/pen/rNGPgMR?editors=1111|
|96|Jerry Yen|https://codepen.io/JerryYen/pen/XWeGbJO|
|97|Riley|https://codepen.io/jjpxbprd/pen/NWaJpMb|
|98|安志|https://codepen.io/lwmtsgek/pen/jOGJQNX?editors=1011|
|99|肉桂卷|https://codepen.io/ginnlee/pen/qBPwGgB?editors=1111|
|100|Sean Chang|https://codepen.io/seanchang7/pen/GRMaKgR?editors=1011 |
|101|Clara|https://codepen.io/ClaraChen/pen/xxXNxrZ?editors=1111|
|102|Carol Li|https://codepen.io/carolli834/pen/zYEVpzK?editors=1111|
|103|Yashien Lin|https://codepen.io/YashienLin/pen/vYeoeyQ|
|104|阿劍| https://codepen.io/seonkuraito/pen/YzrBqMY |
|105|andyii| https://codepen.io/gultrotpybyvue/pen/BamBmaN |
|106|2/WA| https://codepen.io/Coding_Snorlax/pen/NWaMvor |
|106|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/podvxmv?editors=1001
|107|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/wvPoKjd?editors=1112
|108|Van |https://codepen.io/fbacojji-the-selector/pen/rNYKKeg?editors=1111 |