---
# System prepended metadata

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

---

# 🏅 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://getbootstrap.com/docs/5.3/layout/grid/)，練習運用 `.row`  `.col-*`，修改此 [CodePen](https://codepen.io/yen-kg/pen/eYqVPLB) 中 `...` 的部分，還原成下方圖片樣式

![](https://i.imgur.com/AgSZ747.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/yen-kg/pen/PoMQyyL
-->

| 名字         | 連結                                                                         |
| ------------ | ---------------------------------------------------------------------------- |
| Eileen       | [CodePen](https://codepen.io/Eileen-io/pen/bNeGGaE)                          |
| Nooooora     | [CodePen](https://codepen.io/Nora-Ch/pen/qENBBgL?editors=1111)               |
| Zem          | [CodePen](https://codepen.io/dgldwqlg-the-vuer/pen/bNeGGRd)                  |
| cks40660     | [CodePen](https://codepen.io/CKS40660/pen/pvbooOw)                           |
| Jin          | [CodePen](https://codepen.io/Jin-L/pen/WbxNNWp)                              |
| andy         | [CodePen](https://codepen.io/ewnblckz-the-styleful/pen/WbxNbej?editors=0011) |
| Sherry       | [CodePen](https://codepen.io/twvyqojd-the-typescripter/pen/pvboodR)          |
| Hugh         | [CodePen](https://codepen.io/Hugh-Chen/pen/dPMBGXv)                          |
| Tetsu        | [CodePen](https://codepen.io/ttgchang/pen/EayxxGp)                           |
| 叮咚         | [CodePen](https://codepen.io/pinchieh-lin/pen/QwEWWaK)                       |
| Marco        | [CodePen](https://codepen.io/MarcoChiu/pen/jErOEyY)                          |
| 老屠         | [CodePen](https://codepen.io/fsgfxvlb-the-selector/pen/bNeGGzw?editors=1101) |
| ying         | [CodePen](https://codepen.io/Lara-Lin/pen/gbMObem?editors=1010)              |
| 地瓜         | [CodePen](https://codepen.io/ChippyYU/pen/JoKjjmm?editors=1011)              |
| Rogan        | [CodePen](https://codepen.io/RoganHsu/pen/jErOPPX?editors=1111)              |
| Rudy         | [CodePen](https://codepen.io/Rudy-crw/pen/qENBdep?editors=1000)              |
| 7Red         | [CodePen](https://codepen.io/cch2655/pen/zxBYxqM)                            |
| tanuki       | [CodePen](https://codepen.io/tanuki320/pen/zxBYrrM?editors=0011)             |
| Jenna        | [CodePen](https://codepen.io/abiscc14/pen/qENBZaa)                           |
| 星雪糖       | [CodePen](https://codepen.io/vfpofbgm-the-scripter/pen/JoKjXrE?editors=1011) |
| cindy        | [CodePen](https://codepen.io/a50134/pen/ogLNxao?editors=1010)                |
| 7lun         | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/VYjwaVQ?editors=1011)     |
| Wafa         | [CodePen](https://codepen.io/dqricwgo-the-reactor/pen/xbOxOxX)               |
| Naojun       | [CodePen](https://codepen.io/NAOJUN/pen/vEKYLbg)                             |
| 社子畢卡索   | [CodePen](https://codepen.io/pen?template=zxBYBaW)                           |
| 登登登       | [CodePen](https://codepen.io/Duncanin/pen/bNeGpMz)                           |
| Percy        | [CodePen](https://codepen.io/Percy-Ku/pen/WbxNGRZ)                           |
| An           | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/qENBqbN?editors=1011)  |
| FangFang     | [CodePen](https://codepen.io/Fang-the-selector/pen/KwMKaKp?editors=1011)     |
| Katie        | [CodePen](https://codepen.io/Katiekatiehsu/pen/KwMKaXg?editors=1010)         |
| wind         | [CodePen](https://codepen.io/wind7y/pen/JoKjWBP)                             |
| Tippy        | [CodePen](https://codepen.io/Ektodor-Wang/pen/JoKjrvE)                       |
| jchunnn      | [CodePen](https://codepen.io/jchunnn/pen/JoKjrBW?editors=1111)               |
| Owen He      | [CodePen](https://codepen.io/owen1120/pen/GgqROXV?editors=0011)              |
| Vergil       | [CodePen](https://codepen.io/aglgvsie/pen/LEZYeYa)                           |
| KOMATSU PEI  | [CodePen](https://codepen.io/Komatsu2021/pen/ogLNGxY?editors=1011)           |
| JiaMori      | [CodePen](https://codepen.io/jiamori/pen/VYjwgvm)                            |
| 平平         | [CodePen](https://codepen.io/ypinpin/pen/EayxBxZ)                            |
| Eric         | [Codepen](https://codepen.io/wc-su/pen/OPXPNOv)                              |
| RyanC        | [Codepen](https://codepen.io/RyanYD/pen/MYeYjrG)                             |
| Leonard      | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/myEyOWw)                  |
| kashiwatei   | [Codepen](https://codepen.io/kashiwatei/pen/emzmVbY?editors=1011)            |
| 舜仁         | [Codepen](https://codepen.io/shunjen/pen/dPXPEav)                            |
| ZoeKang      | [Codepen](https://codepen.io/byehywmx-the-animator/pen/xbObvVz)              |
| 主委加碼啦幹 | [Codepen](https://codepen.io/popbob-the-bashful/pen/azZOzrM)                 |
| Michelle     | [Codepen](https://codepen.io/bastar_dize/pen/vEKOjVB?editors=1111)           |
| Miikaa       | [Codepen](https://codepen.io/Miikaa/pen/OPXyLLX)                             |
| CharisLai    | [Codepen](https://codepen.io/charislai/pen/ByzNyNy)                          |
| 伊迪         | [Codepen](https://codepen.io/sorryFish/pen/vEKNxdP)                          | 
| nonwa_jeff          | [codepen](https://codepen.io/nonwaaa/pen/GgqpmRJ)                          | 
| 冠翔        | [Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/jErPgEb)                    | 
|小趴|[Codepen](https://codepen.io/papa2415/pen/RNRWyre)|
|蛋白|[Codepen](https://codepen.io/sjlu-0/pen/LEZGJOQ)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/ByzWGpb)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/emzRKbx?editors=0000)|