---
# System prepended metadata

title: "\U0001F3C5 Day 7 - 加總技巧、Bootstrap 格線系統 1"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 7 - 加總技巧、Bootstrap 格線系統 1

題目（使用 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/hexschool/pen/NWzByya) 中 `...` 的部分，還原成下方圖片樣式

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


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.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/hexschool/pen/ExRpQEJ
-->



回報區
---


| Discord          |                                CodePen / 答案                                |
| ---------------- |:----------------------------------------------------------------------------:|
| Aaron Shih#3879  |      [Codepen](https://codepen.io/aaron00366/pen/OJwPVNq?editors=1111)       |
| albee#9121       |            [Codepen](https://codepen.io/albee-chang/pen/OJwJWax)             |
| WeiJ#7376        |               [Codepen](https://codepen.io/weij0/pen/eYjYLaZ)                |
| bakiii           |               [codepen](https://codepen.io/aki168/pen/NWBWNER)               |
| 冬天#5215        |              [codepen](https://codepen.io/winter_/pen/JjBjaVJ)               |
| 柔柔#1716        |        [Codepen](https://codepen.io/rouchen/pen/rNrNZgL?editors=1011)        |
| YC#2522          |                [CodePen](https://codepen.io/YCLu/pen/oNMNPPe)                |
| Wendy3#5615      |              [CodePen](https://codepen.io/wendy03/pen/PoBodgx)               |
| JackC#0411       |              [codepen](https://codepen.io/key0329/pen/mdjdGgj)               |
| yaru#6308        |       [CodePen](https://codepen.io/lszaietc/pen/YzjzJKL?editors=1011)        |
| 薯餅#3581        |           [codepen](https://codepen.io/ColdingPoTaTo/pen/rNrNqOW)            |
| yuyu#6310        |       [codepen](https://codepen.io/yuyu0905/pen/rNrNqLj?editors=1012)        |
| AuroraC#6539     |              [codepen](https://codepen.io/AuroraC/pen/BaPaqNE)               |
| PeihanWang#2530  |             [CodePen](https://codepen.io/PeihanWang/pen/QWBWZKw)             |
| 米米#1824        |     [CodePen](https://codepen.io/Jameshsu0407/pen/yLqLRoa?editors=1011)      |
| RyanC#6960       |        [CodePen](https://codepen.io/RyanYD/pen/poZoxEg?editors=0011)         |
| LinaChen#1796    |              [CodePen](https://codepen.io/LinaChen/pen/BaPaqje)              |
| mandylai#4055    |            [CodePen](https://codepen.io/mandy-lai-2/pen/JjBjmEM)             |
| kenki100#0068    |               [Codepen](https://codepen.io/ken100/pen/wvxvYGL)               |
| Jill Lee#0809    |     [Codepen](https://codepen.io/chi-ling-lee/pen/dyjygmg?editors=1111)      |
| MotoRin#2616     |       [Codepen](https://codepen.io/sakimoto/pen/VwBwEVg?editors=1011)        |
| Winnie#1306      |    [Codepen](https://codepen.io/WinnieWuWinnie/pen/VwBwEEg?editors=0012)     |
| 大頭#8116        |       [Codepen](https://codepen.io/d22495521/pen/qByBJgJ?editors=0012)       |
| 大衛#4869        |       [Codepen](https://codepen.io/exnsrpjc/pen/ExpxdrL?editors=0011)        |
| hannahTW#2224    |             [Codepen](https://codepen.io/hangineer/pen/NWBWOyG)              |
| 楊苡安#2752      |      [Codepen](https://codepen.io/yi-an-yang/pen/BaPaqej?editors=1111)       |
| LHchien33#6232   |             [Codepen](https://codepen.io/lin_chien/pen/eYjYPQG)              |
| Alex#9978        | [Codepen](https://codepen.io/datsxzqg-the-selector/pen/GRBRYXV?editors=1111) |
| 威0#6919         |      [codepen](https://codepen.io/n0918679182/pen/LYBYXVa?editors=0012)      |
| 威爾#1694        |              [CodePen](https://codepen.io/WILL_Wu/pen/mdjdQPJ)               |
| Cheryl#4007      |      [Codepen](https://codepen.io/Cheryl-Hsu/pen/abjbQmP?editors=1011)       |
| AkiHico#9239     |        [Codepen](https://codepen.io/akihico/pen/ExpxONO?editors=1000)        |
| jacky010080#0880 |           [CodePen](https://codepen.io/Yen-Jung-Chen/pen/ZEjEmBo)            |
| 心幻羽#0056      |      [CodePen](https://codepen.io/linglingsyu/pen/BaVeLjy?editors=1011)      |
| Wendy77#8049     |              [Codepen](https://codepen.io/Wendy__/pen/ZEjEmMm)               |
| Hilda#7085       |         [Codepen](https://codepen.io/vwquikad-the-vuer/pen/abjbQjr)          |
| int#7518         |       [Codepen](https://codepen.io/intHuang/pen/KKBKxOK?editors=1001)        |
| Potatolee#7749   |      [Codepen](https://codepen.io/potatoleee/pen/bGjGOqj?editors=1011)       |
| Ruby Chen#7452   |       [Codepen](https://codepen.io/ruby92429/pen/bGjGObv?editors=1011)       |
| JY#5712          |              [CodePen](https://codepen.io/judy_123/pen/KKBKGdp)              |
| Fang#4680        |              [Codepen](https://codepen.io/std95174/pen/vYaYbgV)              |
| JimmyChang#5558  |   [Codepen](https://codepen.io/JimmyChangWenChi/pen/NWBWoaP?editors=1010)    |
| 出事了阿伯#9923  |            [Codepen](https://codepen.io/BradpittLai/pen/xxJxMJj)             |
| Yuna Huang#2692  |       [Codepen](https://codepen.io/Yuna1002/pen/VwBwgex?editors=1010)        |
| KC_8685#9343     |             [Codepen](https://codepen.io/cathy7411/pen/BaPaMVa)              |
| RJRS#9430        |                [CodePen](https://codepen.io/RJRS/pen/jOpOdpM)                |
| Rena#6249        |            [Codepen](https://codepen.io/aureate0116/pen/ExpxrqR)             |
| 魚子醬#5220      |              [Codepen](https://codepen.io/haihsuan/pen/zYLYegj)              |
| popeye           |             [Codepen](https://codepen.io/popeye_ux/pen/MWBWLME)              |
| Cream#3449       | [Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/MWBWxJV?editors=1111)  |
| Yishan#4902      | [Codepen](https://codepen.io/gdjrehhw-the-animator/pen/MWBWLpj?editors=1100) |
| Jenny真#7532     |      [CodePen](https://codepen.io/wei-chen-wu/pen/XWBWGPO?editors=1011)      |
| 阿沁#8176        |              [CodePen](https://codepen.io/a8322342/pen/wvxvZrx)              |
| 黑白兔#0684      |             [CodePen](https://codepen.io/johnny329/pen/bGjGJxO)              |
| 泊岸#3466        |      [CodePen](https://codepen.io/qoq77416416/pen/WNKNLVq?editors=1011)      |
| RainJ#3480       |       [CodePen](https://codepen.io/RainJCode/pen/mdjdYdG?editors=1111)       |
| Amberhh#2465     |              [Codepen](https://codepen.io/Amberhh/pen/MWBWPgK)               |
| SASIMI#5099      |            [Codepen](https://codepen.io/sashimi1327/pen/mdjdjdd)             |
| 小夜#3809        |        [Codepen](https://codepen.io/Naito_K/pen/QWBWzee?editors=1012)        |
| masterYan#2480   |  [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/poZoXYZ?editors=1010)  |
| 老皮博士#8050    |             [Codepen](https://codepen.io/hexschool/pen/ExRpQEJ)              |
| How#5806         |            [Codepen](https://codepen.io/howtobefine/pen/dyjyxbM)             |
| 小木馬#8760      |              [Codepen](https://codepen.io/wmmtbcsd/pen/OJwJKBo)              |
| 圈圈#4060        |   [Codepen](https://codepen.io/wjejfczn-the-bold/pen/mdjdzPQ?editors=1010)   |
| xin#1214         |              [Codepen](https://codepen.io/SiaoYao/pen/qByEWBX)               |
| Hironaka#7367    |     [Codepen](https://codepen.io/Hironaka0815/pen/KKBwPgp?editors=1010)      |
| 無名#6427        |              [Codepen](https://codepen.io/Nomoney/pen/PoBojPN)               |
| yoyo123456#0577  |       [Codepen](https://codepen.io/hungyoyo/pen/MWBYgJe?editors=0011)        |
| DIO大人#4776     |             [Codepen](https://codepen.io/oscar-2283/pen/mdjdzRa)             |
| sherlin#4587     |      [Codepen](https://codepen.io/sherlinKuo/pen/ExpaYdQ?editors=1111)       |
| 艸良#2846        |     [Codepen](https://codepen.io/momoninainai/pen/VwBYwmo?editors=1101)      |
| Bella_#1587      |             [Codepen](https://codepen.io/Chen-Bella/pen/abjzoej)             |
| Austyn#0949      |       [Codepen](https://codepen.io/fish90547/pen/MWBYYJR?editors=1111)       |
| Asher Xu#9297    |             [Codepen](https://codepen.io/kirakira72/pen/MWBYwaK)             |
| 柚子 #3958       |       [Codepen](https://codepen.io/as6625998/pen/JjBoYEx?editors=0011)       |
| christina#6185   |             [Codepen](https://codepen.io/chrisc0210/pen/WNKbQXE)             |
| enolachen#8031   |             [Codepen](https://codepen.io/Chen-Enola/pen/abjbePB)             |
| Hazel.#6020      |      [CodePen](https://codepen.io/Hazelhsieh/pen/GRBRoqy?editors=1011)       |
| Sean#3825        |       [CodePen](https://codepen.io/sean_1215/pen/OJwJGBo?editors=1011)       |
| Chi#7605         |              [Codepen](https://codepen.io/YoChi84/pen/poZvRQV)               |
|阿榮#8277|[CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/ZEjYLmM)|
|Benson#6763|[CodePen](https://codepen.io/kumashow/pen/JjBoEwg)|
|jimmyFang#9575|[CodePen](https://codepen.io/pohxiqqo/pen/rNramLM?editors=0011)|
| PH#2731        |       [CodePen](https://codepen.io/lokf9527/pen/ZEjYKwy)       |
|ㄚ翔#8126|[CodePen](https://codepen.io/engineerjohnson/pen/LYBELEX)|
|yoyo#1003|[CodePen](https://codepen.io/pen/LYBELOo)|
|ABOOS#6276|[CodePen](https://codepen.io/guhungyin/pen/GRBgvBQ?editors=1111)|
|Kimi#9564|[CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/mdjyweb?editors=1000)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/ZEjYrLW?editors=1100)
|Barret#1119|[codepen](https://codepen.io/barret0720/pen/qByEoeW)
|Bassjim#0118|[codepen](https://codepen.io/unrtxbaq/pen/zYLxjMv?editors=1111)
|Knock59487#9114|[codepen](https://codepen.io/Zack88/pen/MWBYBbE)|
Zack_P#1805|[codepen](https://codepen.io/tmzazirh-the-animator/pen/GRBgYKd?editors=1111)|
|雞腿#6089|[codepen](https://codepen.io/C-WEi/pen/PoBwPWN?editors=1010)|
|Asher Xu#9297|[codepen](https://codepen.io/kirakira72/pen/WNKbybW)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[codepen](https://codepen.io/sho666/pen/OJwPagM?editors=1010)|
|shiuan#4721|[codepen](https://codepen.io/prankaChang/pen/LYBEMwy?editors=0011)|
|Tami#6742|[Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/WNKbVga)|
|RainLiao#2616|[Codepen](https://codepen.io/billpop741/pen/MWBYdoK)|
|CatBoxy#4207|[Codepen](https://codepen.io/nekoboxy/pen/LYBYqgg)|
|Chaya#3412|[Codepen](https://codepen.io/ChiaoJiao/pen/ZEjGONj?editors=1112)|
|Silvialu#4521|[Codepen](https://codepen.io/Silvia091640/pen/XWBJByy)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/bGjVpKZ?editors=1111)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/gOjaLvj)|
|你看我像是會玩嗎#1866|[Codepen](https://codepen.io/hasagg/pen/LYBpWYv)|
|Ron Ling#7277|[Codepen](https://codepen.io/ron-go/pen/gOjaeBY)|
|kevin #6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/WNKQJGO?editors=1011)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/abjvKgW)|
|ChloeLo#4858|[Codepen](https://codepen.io/chloelo/pen/LYBprgL)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/PoBPdqZ?editors=1011)|
|popcorn_3q#9893|[CodePen](https://codepen.io/arnyrpqt-the-sasster/pen/dyjGbQz)|
|Hsiu#8767|[CodePen](https://codepen.io/amy-hsiu/pen/RwBroap?editors=1112)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/poZgVoe)|
|IreneY#0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/JjBGvwQ)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/LYBGrmR?editors=1011)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/mdjPqVX)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/oNMxpxa?editors=1111)|
|  cbs#9007  |[Codepen](https://codepen.io/wasdjk/pen/oNMXjrv)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/BaPKMpZ)
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/XWBKXOq?editors=0011)
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/abjmrwa?editors=1011)|
|RBC#7632|[CodePen](https://codepen.io/LinChole/pen/yLqamgN)|
|yuling#1634|[codepen](https://codepen.io/igzdflpu/pen/XWBKwBO)|
|阿異#4776|[CodePen](https://codepen.io/yani21399/pen/bGjBLLe)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/xxJVBpq?editors=1000)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/mdjWWYL)|
| YU#0618  |      [CodePen](https://codepen.io/yoken_/pen/poZPZxW)       |
| Cookie SSS#6991  |      [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/PoBKBQg?editors=1111)       |
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/NWByaGG)|
|Keep#4336|[codepen](https://codepen.io/keep-/pen/bGjLeLM?editors=1111)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/ExpROWE?editors=1011)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/wvxYJOJ?editors=1101)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/LYJKPra)|