---
# System prepended metadata

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

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 / 答案                                |
| ---------------- |:----------------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/ExMavLW?editors=0010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/zYbxdMw) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/vYPEJPV?editors=1111)
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/VwRYzRB) |
| 熊大| [CodePen](https://codepen.io/asiating/pen/jOJELdP?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/yLwyoQO) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/vYPEJMV?editors=1111) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/WNmbZev) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/mdoyBJg)|
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/XWGJeJa) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/GRegMoa) |
| Eden |[Codepen](https://codepen.io/iseden/pen/gOEbGpN)|
| FangFang |[Codepen](https://codepen.io/FangFang09/pen/GRegMyR)|
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/RwdNLyb?editors=1111) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/wvOBrjW?editors=0011) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/ZEPYJNL?editors=1001) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/NWJPaop) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/gOEbGmY?editors=1101) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/wvOBrLJ) |
| Ariel| [CodePen](https://codepen.io/ariel0510/pen/NWJPaVj) |
| 貢波波夫| [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/YzgPEqy) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/qBvEVOe) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/dyrPZoy?editors=1111) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/eYXmeEx) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/bGZNYvv) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/rNRaYqX?editors=0012)|
|Winnie|[CodePen](https://codepen.io/codepen-io-winnie/pen/GRegOBv?editors=1011)|
|Eazy|[CodePen](https://codepen.io/Eazychen/pen/NWJPXxe?editors=1112)|
| carrie | [CodePen](https://codepen.io/echocarriet/pen/oNVgpYw) |
|  cbs  |[Codepen](https://codepen.io/wasdjk/pen/RwdNjyp?editors=1111)|
| Martin |[Codepen](https://codepen.io/markyourpage/pen/NWJPXpJ)|
| PoRay | [CodePen](https://codepen.io/raycheng/pen/RwdNjWa?editors=0011) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/MWxYrxe)|
|MDFK|[Codepen](https://codepen.io/maywang/pen/bGZNYra?editors=0012)|
| Neil | [CodePen](https://codepen.io/Neil1024/pen/wvOBmBd?editors=1000) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/JjzoLjq) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/ZEPYvdL?editors=1012) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/RwdNZqe) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/OJqPvKZ) |
| dora | [CodePen](https://codepen.io/dorayu/pen/mdoyxYB) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/gOEbeKx) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/jOJExBj?editors=1111) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/oNVgGmr) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/QWowrOX?editors=1011) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/ZEPYoXb) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/oNVgdKy) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/yLwyEgM) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/zYbxaXm) |
| 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/gOEbjaw?editors=1112) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/eYXmjOj) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/jOJEKjG) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/NWJPBbw) |
|stone4584 | [CodePen](https://codepen.io/Royen0506/pen/bGZNjaa?editors=1111) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/dyrPjqX?editors=1111) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/dyrPqyv) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/qBvEMdq) |
| aaron | [CodePen](https://codepen.io/nzygxhnl-the-scripter/pen/xxBbagR?editors=1111) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/XWGJPgd) |
| Yuetin | [CodePen](https://codepen.io/hexschool/pen/NWzByya) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/oNVgVgK) |
| Yafan | [CodePen](https://codepen.io/yafanchung/pen/YzgPbEg) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/MWxYNaM?editors=1010) |
| \_amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/RwdPbbq) |
| ChihYang | [CodePen](https://codepen.io/hike1707/pen/ZEPGzRa) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/mdoJdXO?editors=0012) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/dyroGgJ) |
| PayRoom | [CodePen](https://codepen.io/water38198/pen/LYaVZRw)
| adam322 | [CodePen](https://codepen.io/Adam-Chou-forgame0322/pen/xxBGEQd)
| yuli | [CodePen](https://codepen.io/qlmjined-the-typescripter/pen/MWxwbdO)
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/QWobQyw) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/MWxwQXm?editors=1111) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/gOEpvqO?editors=1011) |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/eYXNVqV)|
| Yang | [CodePen](https://codepen.io/Yang-J/pen/vYPOXqa?editors=1000) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/vYPOVBr) |
| 翔.(Ben) | [CodePen](https://codepen.io/energy95272z/pen/bGZdZNw?editors=0011) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/xxBwKWY?editors=1111) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/oNVgomz?editors=1111) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/ExMVPVY?editors=1112) |
| 黃士桓 | [CodePen](https://codepen.io/shr-huan-huang/pen/LYapZXP) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/WNmQjwV?editors=0011) |
| Jim | [CodePen](https://codepen.io/asiahedh-the-encoder/pen/jOJbmvq?editors=1112) |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/XWGmzXE?editors=1000) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/zYbvPmy?editors=0010) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/qBvOVQe) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/WNmQzLZ?editors=1111) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/zYbvjYX?editors=1111) |
|　Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/ExMVJdV)|
|　Vivian2857 | [Codepen](https://codepen.io/vivian_lin/pen/oNVbxJd?editors=1111)|
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/LYaGbme?editors=1011) |
| Jason | [CodePen](https://codepen.io/bfnrjakt/pen/abMdWRy) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/ZEPQPJJ?editors=1011) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/yLwOJog?editors=1000) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/KKEzggZ?editors=1011) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/qBvaBqj) |
| owen | [CodePen](https://codepen.io/owen-dong/pen/gOEMyYV?editors=1111) |
| hua | [CodePen](https://codepen.io/LHua/pen/XWGjBJb?editors=1111) |
| samgu666 | [CodePen](https://codepen.io/orz311013/pen/yLwaRRZ) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/poYRNxV) |
| 關關 | [Codepen](https://codepen.io/ashkuan/pen/dyrWzZz) |
| Ting | [Codepen](https://codepen.io/liara/pen/gOExxVe) |
| 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/gOEoYNz?editors=1111) |
| WA | [Codepen](https://codepen.io/ldddl/pen/qBvwzKO) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/qBwdKpW) |

<!-- 快速複製

| user | [CodePen]() |
 
-->
