---
tags: React 直播班 - 2024 冬季班
---
# 🏅 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

// 小明的銀行帳戶資訊
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) 中 `...` 的部分，還原成下方圖片樣式


## 回報流程

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


<!-- 解法一
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
-->

回報區
---
| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Sonia | [CodePen](https://codepen.io/YUJOU/pen/LEPLbyL?editors=1111) |
| 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/ByBZWzR) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/vEBZxmK) |
| 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/EaYXWgJ?editors=1011) |
| Toung | [CodePen](https://codepen.io/Toung/pen/RNbgpoR) |
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/PwYjpJj?editors=1011) |
| tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/VYZWpdK?editors=1010) |
|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/NPKgpMM?editors=1011)|
| 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/WbeOpyy) |
| Nocab | [CodePen](https://codepen.io/PeihanWang/pen/ogvwZaL?editors=1011) |
| Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/YPKQZZq) |
|ollie|[CodePen](https://codepen.io/daiyy97/pen/LEPLyYb?editors=1000)|
| Amanda | [CodePen](https://codepen.io/cym199922/pen/MYgomQa) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/WbeOjLe?editors=1001) |
| Johnson | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/azowWzN) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/KwPqmYd) |
| Clove_墨 | [CodePen](https://codesandbox.io/p/sandbox/jpxjpw) |
| LinaChen | [CodePen](https://codepen.io/LinaChen/pen/RNbggxX) |
| Aaron 謝宗佑 | [CodePen](https://codepen.io/aaron-hsieh/pen/MYgooqO) |
|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/NPKgged?editors=1111)|
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/MYgopLR?editors=1111)|
| Kaya | [Codepen](https://codepen.io/kayaribi/pen/ogvwGvB)|
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/WbeOEEM?editors=1011) |
| Tammy | [CodePen](https://codepen.io/Tammy_Tsai/pen/QwLgqQe) |
| Rothy | [CodePen](https://codepen.io/ChloeHsu1/pen/KwPqyQW) |
| andy | [CodePen](https://codepen.io/andygggg/pen/LEPLeMN?editors=1111) |
| Jasmine Lin | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/dPbRdov) |
| 蕾蕾 leilei| [CodePen](https://codepen.io/Leileisme/pen/gbYRRQa?editors=1111) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/WbeOgPK) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/QwLgVoV?editors=1111) |
| Rochel | [CodePen](https://codepen.io/rochelwang1205/pen/MYgoPyN?editors=1000) |
| jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/mybMyvW?editors=1111) |
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/pvzrRjg) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/RNbZQZL )|
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/gbYxvdK?editors=1111) |
|a1phaki(小k)|[codepen](https://codepen.io/a1phaki/pen/ogvedMg)|
|嚼勁先生|[codepen](https://codepen.io/James520284/pen/JoPyQMp)|
| Cami | [CodePen](https://codepen.io/irisLife/pen/yyBzeEK)|
|Glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/RNbLYqW?editors=1111)|
|1457|[Codepen](https://codepen.io/1457dys/pen/bNboXdd)|
|Mike|[Codepen](https://codepen.io/mike2049/pen/ogvqZBe?editors=0011)|
| Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/KwPeeJM) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/azoQzbq?editors=1111) |
| .ztion | [CodePen](https://codepen.io/ztion/pen/EaYMRJd) |
| Edie | [CodePen](https://codepen.io/eku10rei/pen/ByBERbj?editors=1010) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/wBwbJxE?editors=1111) |
| yaoling.liang | [CodePen](https://codepen.io/Yao-Ling-L-/pen/emYZWaG?editors=1111) |
| Jim | [CodePen](https://codepen.io/JimChou/pen/QwWNOpv?editors=1010) |
| KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/pvoRvpW?editors=1011) |
| 姜承 | [CodePen](https://codepen.io/Troy0718/pen/vEYjMPw?editors=1012) |
| Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/QwWZawr?editors=1011) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/zxxWBvW) |

<!-- 快速複製

| user | [CodePen]() |

-->