---
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) 中 `...` 的部分，還原成下方圖片樣式
回報流程
---
請同學依照下圖教學觀看解答、回報答案:
回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)
<!-- 解法一
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 |
Sign in with Wallet
Connect another wallet